| 

.NET C# Java Javascript Exception

4
Der Hintergrund auf meiner Seite soll sich bei jedem Refresh mit Hilfe eines Scripts ändern und einblenden. Abgeguckt habe ich mir die Idee bei http://www.rockstargames.de/. Dort gibt es den gleichen Effekt. Nun habe ich ein Javascript gebaut, das wie folgt aussieht:

<script type="text/javascript">  
window.onload=function()
{ 
 var thediv=document.getElementById("bildwechsel");   
 var imgarray = new Array("imageeins.gif", 
  "imagezwei.gif", imagedrei.gif");  
 var spot =Math.floor(Math.random()* imgarray.length);  
 thediv.style.background="url("+imgarray[spot]+")";  
} 
</script>


Das funktioniert auch. Allerdings ist JavaScript oftmals im Browser deaktiviert. Ich würde daher die ganze Lösung gerne serverseitig steuern. Hat dazu jemand eine Idee?
15.02.2012
vbrulez
vbrulez
29 ● 1
2 Antworten
3
Ja, machst doch serverseitig!

Z.B mit PHP.

css/php:
<?php 
$bilder = array('bilder/bild1.png', 'bilder/bild2.png');
?>
#background {
  background-image: url("<?php echo $bilder[rand() % count($bilder)];?>");
}
15.02.2012
LiRo
LiRo
1,3k ● 8
Editiert 15.02.2012
LiRo
LiRo
1,3k ● 8
1
Wenn du das Hintergrundbild auch noch nach dem Aufruf der Seite regelmäßig ändern willst (in abhängigkeit von der Mausposition), kannst du das mit CSS folgendermaßen lösen.

In einem fix im Hintergrund positionierten DIV zerteilst du das Fenster in die nötigen Bereiche, z.B. in vier Bereiche.
<!DOCTYPE html>
<html>
    <head>
        <title>Hintergrundbild mit CSS ändern</title>
     </head>
<body>
   <div class="wechselnder_hintergrund">
      <div class="back back1"><div></div></div>
      <div class="back back2"><div></div></div>
      <div class="back back3"><div></div></div>
      <div class="back back4"><div></div></div>
   </div>
   
<div class="container">    
   Hier ist der eigentliche Content.
 </div>
</body>
</html>


Das CSS dazu sieht so aus:
.wechselnder_hintergrund .back
{
    position:fixed;
    width:50%;
    height:50%;
    z-index:10;
}
.wechselnder_hintergrund .back div
{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    z-index:0;
    display:none;
}
.back1
{
    top:0;
    left:0;
}
.back2
{
    top:0;
    left:50%;
}
.back3
{
    top:50%;
    left:0;
}
.back4
{
    top:50%;
    left:50%;
}

.back1 div
{
    background:red;
}
.back2 div
{
    background:green;
}
.back3 div
{
    background:yellow;
}
.back4 div
{
    background:blue;
}
.back:hover
{
    z-index:5;
}
.back:hover div
{
    display:block;
}

.container
{
    z-index:20;
    position:absolute;
}


Siehe auch hier: http://jsfiddle.net/johny7/2jSuW/
17.02.2012
johny7
johny7
509 ● 7

Stelle deine Web-Frage jetzt!