nicht angemeldet
Zufälliges "Hinterfrund" Bild
Beispiel: geht mal bitte auf diese Seite http://www.euro-ro.net/.
Jetzt klickt ein paar mal F5 "Aktualisieren. Und ihr werdet fesstellen, dass ganz oben immer wieder ein anderes Bild erscheint.
Mit kann man sowas machen...^^
Wäre sehr Dankbar für eure Antwort.
-
hallo Hinterfrund,
Mit kann man sowas machen
Wenn das eine Frage ist: sowas kann man mit einem Zufallsgenerator machen, der entscheidet, ob er an der entsprechenden Stelle im PHP-Script nun http://www.euro-ro.net/multimedia/images/head/12/de/logo.jpg oder http://www.euro-ro.net/multimedia/images/head/02/de/logo.jpg oder http://www.euro-ro.net/multimedia/images/head/05/de/logo.jpg zur Verfügung stellt.
Grüße aus Berlin
Christoph S.
-
Hallo,
Ich hatte da mal nen Artikel dazu geschrieben: Zufallsheader Augen- und Serverschonend
Grüße
Jeena Paradies-
Hallo,
Ich hatte da mal nen Artikel dazu geschrieben: Zufallsheader Augen- und Serverschonend
Grüße
Jeena ParadiesSorry aber ich verstehe bei dem HTML Code nicht wo ich den Bilderlink einfügen kann
-
Hallo,
Sorry aber ich verstehe bei dem HTML Code nicht wo ich den Bilderlink einfügen kann
Genau wie auf der von dir verlinkten Seite wird das Bild als CSS-Hintergrundbild eingefügt.
Dann werden ein paar verschiedene Klassen im CSS mit verschiedenen Hintergrundbildern gemacht und per Zufall wird dem Header-Div eine von diesen Klassen zusätzlich hinzugefügt.
Grüße
Jeena Paradies-
Hallo,
Sorry aber ich verstehe bei dem HTML Code nicht wo ich den Bilderlink einfügen kann
Genau wie auf der von dir verlinkten Seite wird das Bild als CSS-Hintergrundbild eingefügt.Dann werden ein paar verschiedene Klassen im CSS mit verschiedenen Hintergrundbildern gemacht und per Zufall wird dem Header-Div eine von diesen Klassen zusätzlich hinzugefügt.
Grüße
Jeena ParadiesIch versteh es trotzdem nicht, sorry. Kenn mich nicht soooo gut aus.
Kannst du mir vllt so ein Beispiel machen?
mit z.B. bild1.htm, bild2.htm usw.-
Hallo,
Ich versteh es trotzdem nicht, sorry. Kenn mich nicht soooo gut aus.
Kannst du mir vllt so ein Beispiel machen?
mit z.B. bild1.htm, bild2.htm usw.Ich dachte du möchtest bei jedem Aufruf ein anderes (Hintergrund-)Bild haben und nicht bei jeder Seite?
Eine XHTML Seite mit dem Namen test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de-de" xml:lang="de-de"> <head> <title>Zufallsheader Test</title> <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" /> </head> <body> <div id="head"></div> <script type="text/javascript"> [code lang=javascript]( function () { var c = ['a','b','c','d','e','f','g','h','i','j','k']; document.getElementById('head').className = c[Math.round(Math.random()*c.length)]; } ) ()</script>
</body>
</html>[/code]Eine CSS-Seite mit dem Namen screen.css im gleichen Verzeichnis:
#head { background: url(default.jpg) top left no-repeat white; width: 500px; height: 200px; } /* Hier kommen die einzelnen verschiedenen Bilder (Klassen) */ #head.a { background-image: url(1.jpg); } #head.b { background-image: url(2.jpg); } #head.c { background-image: url(3.jpg); }Die Bilder müssen im gleichen Verzeichnis sein wie die CSS Datei, damit sie so gefunden werden.
So wird bei jedem Aufruf der Seite in der JavaScript Funktion erst einmal eine Zufallszahl generiert. Diese Zahl wird dann zum hinzufügen der CSS-Klasse zum <div id="head"> element benutzt. Wenn die Klasse hinzugefügt wurde, wird das CSS dieser Klasse auf das Div angewendet. In der externen CSS-Datei werden die Klassen definiert, so dass jede Klasse ein anderes Hintergrundbild bekommt.
Grüße
Jeena Paradies-
Hallo,
Ich versteh es trotzdem nicht, sorry. Kenn mich nicht soooo gut aus.
Kannst du mir vllt so ein Beispiel machen?
mit z.B. bild1.htm, bild2.htm usw.
Ich dachte du möchtest bei jedem Aufruf ein anderes (Hintergrund-)Bild haben und nicht bei jeder Seite?Eine XHTML Seite mit dem Namen test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de" xml:lang="de-de">
<head>
<title>Zufallsheader Test</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="head"></div>
<script type="text/javascript">
[code lang=javascript]( function () {
var c = ['a','b','c','d','e','f','g','h','i','j','k'];
document.getElementById('head').className = c[Math.round(Math.random()*c.length)];
}
) ()> </script> > </body> > </html>[/code] > > > Eine CSS-Seite mit dem Namen screen.css im gleichen Verzeichnis: > ~~~css > > #head { > background: url(default.jpg) top left no-repeat white; > width: 500px; > height: 200px; > } > /* Hier kommen die einzelnen verschiedenen Bilder (Klassen) */ > #head.a { background-image: url(1.jpg); } > #head.b { background-image: url(2.jpg); } > #head.c { background-image: url(3.jpg); }Die Bilder müssen im gleichen Verzeichnis sein wie die CSS Datei, damit sie so gefunden werden.
So wird bei jedem Aufruf der Seite in der JavaScript Funktion erst einmal eine Zufallszahl generiert. Diese Zahl wird dann zum hinzufügen der CSS-Klasse zum <div id="head"> element benutzt. Wenn die Klasse hinzugefügt wurde, wird das CSS dieser Klasse auf das Div angewendet. In der externen CSS-Datei werden die Klassen definiert, so dass jede Klasse ein anderes Hintergrundbild bekommt.
Grüße
Jeena ParadiesBoah geil. Danke. Vielen Dank, dass du dir die Mühe gemacht hast!
-
Hallo,
Ich versteh es trotzdem nicht, sorry. Kenn mich nicht soooo gut aus.
Kannst du mir vllt so ein Beispiel machen?
mit z.B. bild1.htm, bild2.htm usw.
Ich dachte du möchtest bei jedem Aufruf ein anderes (Hintergrund-)Bild haben und nicht bei jeder Seite?Eine XHTML Seite mit dem Namen test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de" xml:lang="de-de">
<head>
<title>Zufallsheader Test</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="head"></div><script type="text/javascript">
[code lang=javascript]( function () {
var c = ['a','b','c','d','e','f','g','h','i','j','k'];
document.getElementById('head').className = c[Math.round(Math.random()*c.length)];
}
) ()> </script> > </body> > </html>[/code] > > > Eine CSS-Seite mit dem Namen screen.css im gleichen Verzeichnis: > ~~~css > > #head { > background: url(default.jpg) top left no-repeat white; > width: 500px; > height: 200px; > } > /* Hier kommen die einzelnen verschiedenen Bilder (Klassen) */ > #head.a { background-image: url(1.jpg); } > #head.b { background-image: url(2.jpg); } > #head.c { background-image: url(3.jpg); }Die Bilder müssen im gleichen Verzeichnis sein wie die CSS Datei, damit sie so gefunden werden.
So wird bei jedem Aufruf der Seite in der JavaScript Funktion erst einmal eine Zufallszahl generiert. Diese Zahl wird dann zum hinzufügen der CSS-Klasse zum <div id="head"> element benutzt. Wenn die Klasse hinzugefügt wurde, wird das CSS dieser Klasse auf das Div angewendet. In der externen CSS-Datei werden die Klassen definiert, so dass jede Klasse ein anderes Hintergrundbild bekommt.
Grüße
Jeena ParadiesZu früh gefreut. Irgentwas mach ich immer falsch.
- http://home.arcor.de/aktuelleinfo/
Wie fügt man des dort ein, ohne das Bild oben zu zerstören.
(bei mir kommt dann immer ein schwarzes Bild)index.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>euRO Chaos - Aktuelle Liste</title>
<link rel="stylesheet" href="format.css" type="text/css">
</head>
<body><br />
<table align="center" bgcolor="#000000" cellspacing="0" cellpadding="0" border="0" width="680" height="240">
<td width="100%">
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<!--Logo-->
<td align="center" class="logo" >
<table align="center" cellspacing="0" cellpadding="0" border="1" width="680" height="240" style="border:solid 0px #000000;">
</table>
</tr>
<!--Logo Ende-->
<td align="center" width="100%" class="leiste">
<table bgcolor="#93B9DB" width="100%" border="0" cellpadding="0" cellspacing="0">
<td>
<table id="menu2" width="100%" border="0" cellpadding="0" cellspacing="1">
<td > Links</a></td>
<td ><a href="http://www.euro-ro.net/" onfocus="this.blur()">euRo Homepage</a></td>
<td ><a href="http://rocheck.de/" onfocus="this.blur()">Pricewatch</a></td>
<td > <img class="point1" src="images/pixelspace.gif" width="6" height="6" border="0" alt=""> <img class="point2" src="images/pixelspace.gif" width="6" height="6" border="0" alt=""> <img class="point3" src="images/pixelspace.gif" width="6" height="6" border="0" alt=""> Info</a></td>
<td ><a href="buy.html" onfocus="this.blur()">Kaufe [Buy]</a></td>
<td ><a href="sell.html" onfocus="this.blur()">Verkaufe [Sell]</a></td>
</table></td>
</table></td>
<tr>
<td valign="top" bgcolor="#ffffff" width="100%" height="284" class="inhalt" >
<!--Text-->
<!--Text Ende-->
<tr>
<td align="center" class="leisteun" valign="top" >· © 2006 ·</td>
</body>
</html>format.css:
/* schriftstil,abstände */
body
{margin-top: 10px; margin-left: 0px; margin-right: 0px;margin-bottom: 10px; color: #000000;
background-color:#eaf1f7; font: normal 12px/18px times, serif;}table,tr,td
{color: #000000;font: normal 12px/18px verdana, times, serif;}/* scrolleiste internet explorer ab vers.5.5 */
body
{scrollbar-arrow-color: #AABECA; scrollbar-base-color: #ffffff;
scrollbar-highlight-color : #000000; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #bfd6e6;}/* grundlayout*/
.inhalt
{background-color:#ffffff;}.leisteun
{background-color:#689bc0;color:white; font-size: 10px; height:20px; line-height:20px;}.logo
{color:black; height:160px; background: #ffffff url("images/Alberta.jpg"); background-position: 100% 0%;}.banner
{-moz-opacity: 0.66; _filter: progid:DXImageTransform.Microsoft.Alpha(opacity=66);
border:solid 1px #000000; background-color:#689bc0;}.hpname
{color:#ffffff; font-weight:normal; letter-spacing:2px;}ul
{list-style-type:square;}.point1 {border:solid 1px black;background-color:#7095dc}
.point2 {border:solid 1px black;background-color:#CCDAF2}
.point3 {border:solid 1px black;background-color:#ffffff}/* menue oben */
#menu2 a , #menu2 a:visited , #menu2 a:active
{display:block; color:#ffffff; background: url("images/Menü.gif"); text-decoration:none ;
font: normal 11px verdana, times, serif; line-height:24px; text-decoration:none ;
padding: 0px 0px 0px 0px; text-align:center; width:110px;}#menu2 a:hover
{color:#000000; text-decoration:none ; background: url("images/Menü2.gif");}/* allgemeine links im text */
a:link, a:visited, a:active
{font: normal 12px/18px verdana, times, serif;text-decoration:underline;color:#000000}a:hover
{font: normal 12px/18px verdana, times, serif;text-decoration:none;background-color:#689bc0;color:#ffffff;}-
Hallo,
Also sorry, aber da blickt doch kein mensch durch deinen HTML-Quellcode. Mit Tabellen hast du ja nicht gespaart und das ganze style-Zeug hängt auch noch zu großen Teilen im HTML drin. Da ist mir klar dass du da nicht durchblickst, ich tue es ja auch nicht.
Es würde viel schneller gehen wenn du das ganze noch einmal neu machst und das Aussehen vom Inhalt gleich mal sinnvollst trennst.
Ich hab dir das mal schnell zusammengeschustert wie es funktionieren _könnte_: http://jeenaparadies.net/t/self/diff-bg/
Allerdings habe ich nur im Firefox und Opera geschaut dass es funktioniert. Es sollte aber auch im Safari, Konqueror, IE7 und IE6 funktionieren. Wenn du den IE5.x noch unterstützen möchtest dann müsstest du da noch etwas Arbeit reinstecken.
Grüße
Jeena Paradies-
Hallo,
Also sorry, aber da blickt doch kein mensch durch deinen HTML-Quellcode. Mit Tabellen hast du ja nicht gespaart und das ganze style-Zeug hängt auch noch zu großen Teilen im HTML drin. Da ist mir klar dass du da nicht durchblickst, ich tue es ja auch nicht.
Es würde viel schneller gehen wenn du das ganze noch einmal neu machst und das Aussehen vom Inhalt gleich mal sinnvollst trennst.
Ich hab dir das mal schnell zusammengeschustert wie es funktionieren _könnte_: http://jeenaparadies.net/t/self/diff-bg/
Allerdings habe ich nur im Firefox und Opera geschaut dass es funktioniert. Es sollte aber auch im Safari, Konqueror, IE7 und IE6 funktionieren. Wenn du den IE5.x noch unterstützen möchtest dann müsstest du da noch etwas Arbeit reinstecken.
Grüße
Jeena ParadiesLatein, Respekt. Kannst mir noch die HTML Datei und die CSS Datei posten?
-
Hallo,
Latein, Respekt. Kannst mir noch die HTML Datei und die CSS Datei posten?
Guck einfach in den Quellcode der Seite, dann findest du es.
Grüße
Jeena Paradies-
Hallo,
Latein, Respekt. Kannst mir noch die HTML Datei und die CSS Datei posten?
Guck einfach in den Quellcode der Seite, dann findest du es.Grüße
Jeena ParadiesAber nicht die css datei
-
Hallo,
Aber nicht die css datei
Doch, natürlich, sie ist dort verlinkt, sonst würde sie der Browser auch nicht finden:
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />Grüße
Jeena Paradies-
Hallo,
Aber nicht die css datei
Doch, natürlich, sie ist dort verlinkt, sonst würde sie der Browser auch nicht finden:<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />Grüße
Jeena ParadiesWenn man auf das Menü drauf geht leuchtet es nicht >_>
http://home.arcor.de/aktuelleinfo/
http://jeenaparadies.net/t/self/diff-bg/
-
-
Hello,
Aber nicht die css datei
doch, denn was der Browser kann solltest du auch können: Guck nach welche benutzt werden soll und lad sie runter...
http://jeenaparadies.net/t/self/diff-bg/css/screen.cssMfG
Rouven--
-------------------
Eine Bilanz ist wie der Bikini einer Frau. Sie zeigt fast alles, aber verdeckt das Wesentliche -- Günter Stotz, Regierungsdirektor des baden-württembergischen Wirtschaftsministeriums
-
-
-
-
Hallo,
Also sorry, aber da blickt doch kein mensch durch deinen HTML-Quellcode. Mit Tabellen hast du ja nicht gespaart und das ganze style-Zeug hängt auch noch zu großen Teilen im HTML drin. Da ist mir klar dass du da nicht durchblickst, ich tue es ja auch nicht.
Es würde viel schneller gehen wenn du das ganze noch einmal neu machst und das Aussehen vom Inhalt gleich mal sinnvollst trennst.
Ich hab dir das mal schnell zusammengeschustert wie es funktionieren _könnte_: http://jeenaparadies.net/t/self/diff-bg/
Allerdings habe ich nur im Firefox und Opera geschaut dass es funktioniert. Es sollte aber auch im Safari, Konqueror, IE7 und IE6 funktionieren. Wenn du den IE5.x noch unterstützen möchtest dann müsstest du da noch etwas Arbeit reinstecken.
Grüße
Jeena ParadiesHab es jetzt probiert:
http://home.arcor.de/aktuelleinfo/
Noch eine Frage. Wie kann ich einstellen, dass wenn ich auf Verkaufe(Sell) drauf bin, des dann leuchten bleibt.
(Hab jetzt nur die index.htm in buyy.htm und sell.htm gemacht)
(Im img ordner in ein bild des heißt "menu-bg-on")
Genause bei Kaufe(Buy)Danke schon mal!
-
Hallo,
Hab es jetzt probiert:
http://home.arcor.de/aktuelleinfo/Du hast noch das Bild vergessen:
http://jeenaparadies.net/t/self/diff-bg/img/prick.pngNoch eine Frage. Wie kann ich einstellen, dass wenn ich auf Verkaufe(Sell) drauf bin, des dann leuchten bleibt.
Am einfachsten ist es wohl, wenn du dem aktuellen Link eine extra klasse gibst und ihn so formatierst wie du es haben möchtest.
Grüße
Jeena Paradies
-
-
-
-
-
-
-
