Webdesign: Bildwechsel beim laden

TEUFELSKERL · 4 April 2007

Meine Seite basiert auf CSS.

Dort ist auch der Header festgelegt

#head {

width: 700px;

height: 150px;

}

#head h1 {

margin: 0;

padding: 0;

display: block;

width: 700px;

height: 150px;

background-image: url(../images/head.gif);

text-indent: -10000px;

Ich habe nun folgendes vor.

Bei jedem laden der Seite soll nicht head.gif sondern head2.gif geladen werden.

Wie kann ich das in CSS eingeben, habe bei Google nichts 100% passendes gefunden...

Guest · 4 April 2007

Sorry wenn ich dich jetzt falsch verstehe und das jetzt zu banal klingt, aber mach doch aus head.gif einfach head2.gif

mueto · 4 April 2007

Ich denke er meint das jedesmal wenn die Seite neugeladen wird sich oben der Header ändert

Guest · 4 April 2007

Achso

machste am besten so:

css:

Code:

#head, #head2 {

width: 700px;

height: 150px;

}

#head h1, #head2 h1 {

margin: 0;

padding: 0;

display: block;

width: 700px;

height: 150px;

text-indent: -10000px;

}

#head h1 {

background-image: url(../images/head.gif);

}

#head2 h1 {

background-image: url(../images/head2.gif);

}

Code:

<?php

srand ((double)microtime()*1000000);

$rand = rand(1,2);


if ($rand == 2) $css_id = "head h2";

else $css_id = "head h1";

?>

Dann halt HTML:

Code:

<div id="<?php echo $css_id; ?>">....</div>

Ist halt dann zufallsgesteuert. Wenn du wirklich Abwechslung willst, lass srand() weg.

TEUFELSKERL · 4 April 2007

Achso

machste am besten so:

css:

<div>

Code:

#head, #head2 {

width: 700px;

height: 150px;

}

#head h1, #head2 h1 {

margin: 0;

padding: 0;

display: block;

width: 700px;

height: 150px;

text-indent: -10000px;

}

#head h1 {

background-image: url(../images/head.gif);

}

#head2 h1 {

background-image: url(../images/head2.gif);

}

Code:

<?php

srand ((double)microtime()*1000000);

$rand = rand(1,2);


if ($rand == 2) $css_id = "head h2";

else $css_id = "head h1";

?>

Dann halt HTML:

Code:

<div id="<?php echo $css_id; ?>">....</div>

Ist halt dann zufallsgesteuert. Wenn du wirklich Abwechslung willst, lass srand() weg.
</div>

Genau das wollte ich (war blöd geschrieben da oben *g*)...eine Frage noch...wo baue ich das jetzt alles genau ein? Gut..css ist klar, damit ersetzte ich den alten String, das srand() lasse ich weg weil ich Abwechslung will...heißt das ich lasse den ganzen php Code weg? und wo setze ich den HTML Code ein??

Brauch da einen kräftigen Griff unter die Arme, weil so fit dann doch nicht bin *g*

Guest · 4 April 2007

ok, dann mal als ganze datei, bla.php:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Unbenanntes Dokument</title>

<style type="text/css" media="all">

#head, #head2 {

	width: 700px;

	height: 150px;

}

#head h1, #head2 h1 {

	margin: 0;

	padding: 0;

	display: block;

	width: 700px;

	height: 150px;

	text-indent: -10000px;

}

#head h1 {

	background-image: url('../images/head.gif');

}

#head2 h1 {

	background-image: url('../images/head2.gif');

}

</style>

</head>

<body>

<?php

/*

srand ((double)microtime()*1000000);

*/

$rand = rand(1,2);


if ($rand == 2) $css_id = "head2";

else $css_id = "head";

?> 


<div id="<?php echo $css_id; ?>"><h1>....</h1></div>

</body>

</html>

Wird es so klar? $css_id hat abwechselt head oder head2 als wert, und dementsprechend steht dann da immer abwechseln <div id="head">[..] und <div id="head2">[..]

TEUFELSKERL · 5 April 2007

Ich steh grad voll auf der Leitung....

Also stell Dir vor Du hast einen DAU vor Dir, so fühl ich mich im Moment

Mal Schritt für Schritt, bitte...

A) Was ändere ich in meiner css Datei ab??

Was muss ich in meiner HTML-Seite ändern??

Guest · 5 April 2007

Kannst du einfach mal dein ganzes CSS posten und die Stelle im HTML-Code, wo du head bzw. h1 benutzt? Also da, wo sich das Bild ändern soll.

Dann isses am leichtesten

TEUFELSKERL · 5 April 2007

Die css findest Du hier: http://www.skrobic.de/css/style.css http://www.skrobic.de/css/style.css

Der HTML Code der HTML-Seiten sieht an der Stelle so aus:

<div id="head">
<h1>www.SKROBIC.de</h1>

</div>

Guest · 7 April 2007

sry, vergessen ^^

Code:

<div id="head">

<h1>www.SKROBIC.de</h1>

</div>

ersetzt du durch:

Code:

<?php

$rand = rand(1,2);


if ($rand == 2) $css_id = "head2";

else $css_id = "head";

?> 


<div id="<?php echo $css_id; ?>">

<h1>www.SKROBIC.de</h1>

</div>

CSS veränderst du so:

Code:

#head, #head2 {

	width: 700px;

	height: 150px;

}

#head h1, #head2 h1 {

	margin: 0;

	padding: 0;

	display: block;

	width: 700px;

	height: 150px;

	text-indent: -10000px;

}

#head h1 {

	background-image: url('../images/head.gif');

}

#head2 h1 {

	background-image: url('../images/head2.gif');

}

TEUFELSKERL · 8 April 2007

Funzt leider net, wenn ich es so mache...

CSS sieht nun so aus:

/* Header */

#head, #head2 {

width: 700px;

height: 150px;

}

#head h1, #head2 h1 {

margin: 0;

padding: 0;

display: block;

width: 700px;

height: 150px;

text-indent: -10000px;

}

#head h1 {

background-image: url('../images/head.gif');

}

#head2 h1 {

background-image: url('../images/head2.gif');

}

/* Navigation */

HTML so:

<body>
<?php

$rand = rand(1,2);

if ($rand == 2) $css_id = "head2";

else $css_id = "head";

?>

<div id="<?php echo $css_id; ?>">

<h1>www.SKROBIC.de</h1>

</div>

Das ist das Resultat:

Guest · 9 April 2007

haste das mal online bzw. nen link parat oder kannst mal den gesamten HTML/CSS-Code posten?

TEUFELSKERL · 10 April 2007

den ganzen css Code findest Du unter dem Link den ich bereits genannt habe (hier)...den html Code: www.skrobic.de und dann über Deinen Browser einfach den Code anzeigen lassen

Guest · 11 April 2007

argh! sorry für's späte antworten, irgendwie funktionieren die abos nicht richtig

Jetzt aber:

css:

Code:

#head, #head2 {

	width: 700px;

	height: 150px;

}


#head {

	background-image: url('../images/head.gif');

}

#head2 {

	background-image: url('../images/head2.gif');

}


#head h1, #head2 h1 {

	margin: 0;

	padding: 0;

	display: block;

	width: 700px;

	height: 150px;

	/* text-indent: -10000px; */

}

text-indent hab ich mal auskommentiert, macht eig. nur probleme mit dem hohen wert.

html/php:

Code:

<?php

$rand = rand(1,2);


if ($rand == 2) $css_id = "head2";

else $css_id = "head";

?> 


<div id="<?php echo $css_id; ?>">

	<h1>www.SKROBIC.de</h1>

</div>

Diesmal auch getestet

: http://www.selftitled.de/teufelskerl2.php http://www.selftitled.de/teufelskerl2.php

TEUFELSKERL · 11 April 2007

Sorry aber es geht einfach nicht...

Habs mal in meiner Testversion eingespielt...aber e geht nicht. Ist genauso wie zuvor...also ohne Head...

Kann es sein das Du in Deiner Testseite alles in eienr HTML Seite hast und es nicht aus css holst???

Ich verstehs irgendwie nicht...

Frage: Wäre es möglich, dass Du mir meine Original Css und eine Original HTML Seite umbaust, mir die schickst und ich die zum testen hochlade???

Guest · 11 April 2007

ok kann ich gerne machen. morgen oder so, erst mal den schock jetzt verdauen :\

Suche

Webdesign: Bildwechsel beim laden

TEUFELSKERL

Active Member

Guest

Guest

mueto

Administrator

Guest

Guest

TEUFELSKERL

Active Member

Guest

Guest

TEUFELSKERL

Active Member

Guest

Guest

TEUFELSKERL

Active Member

Guest

Guest

TEUFELSKERL

Active Member

Guest

Guest

TEUFELSKERL

Active Member

Guest

Guest

TEUFELSKERL

Active Member

Guest

Guest