Login

#1 (**permalink**) 29-11-2006, 02:58

Hai - wie der Betreff schon eindeutig sagt , möchte ich bei einem mouseover befehl automatisch das hintergrundsbild ändern.
mein javascript sieht so aus:

PHP-Code:


			
<script type="text/javascript">

function show_pic(picID){

  var myObj = document.getElementById(picID);

  if(myObj.style.display == "none"){

    myObj.style.display = "block";

  }else{

    myObj.style.display = "none";

  }

}

</script>

Bei normalen links oder feldern die ich definiere funktioniert das alles super indem ich den div bereich definiere und dann das bild an beliebieger stelle erscheinen lasse:

PHP-Code:


			
<div class="entry1" onMouseOver="show_pic('bild1')" onMouseOut="show_pic('bild1')">

und

<img src="bild1.jpg" width="150" height="200" id="bild1" style="display: none">

nun hab ich aber keinen plan wo ich nun einstellen könnte das sich hierdurch das hintergrundsbild ändert da der hintergrund in meiner css datei definiert ist! ich hoffe mir kann jemand helfen.
thx schon jetzt
joe the don CRACK

#2 (**permalink**) 29-11-2006, 08:56

versuch mal das:

PHP-Code:


			
<script type="text/javascript">

   function ChangeBG(IMAGE){

         document.getElementsById("meinLayer").style.background = IMAGE;



   }

</script>



<div id="meinLayer" onmouseover="ChangeBG('meinImage.jpg')"

onmouseout="ChangeBG('mein2Image.jpg')"></div>

NICHT GESTESTET!
Zur Not hier guggn:

http://de.selfhtml.org/javascript/ob..._eigenschaften

#3 (**permalink**) 29-11-2006, 14:56

hmm so funzt es nich ... habs nich hinbekommen
ich habs im div alles so angegeben:

PHP-Code:


			
<div id="meinLayer"  style="background-image:url(background13-3-green.jpg)" 

onmouseover="ChangeBG('background13-3-green.jpg')" 

onmouseout="ChangeBG('background13-3-green.jpg')">

#4 (**permalink**) 29-11-2006, 15:05

Es heißt getElementById, nicht getElementsById und die Property heißt backgroundImage.

PHP-Code:


			
<script type="text/javascript">

function changeBG(e, img) { e.style.backgroundImage = 'url('+img+')'; }

</script>

<div onmouseover="changeBG(this, 'a.jpg')" onmouseout="changeBG(this, 'b.jpg')"></div>

#5 (**permalink**) 29-11-2006, 20:46

Aaaaaalso habs jetzt "fast" gelöst.
Und zwar hab ich es jetzt so gemacht. Mein Probleme sind aber noch erstens das das Bild nich so erscheint, wenn ich es auf eine bestimmte Tabellenzeile lege. Und das das bild nicht wieder verschwindet nachdem ich von dem entsprechenden feld runter bin.

PHP-Code:


			
<script type="text/javascript">

function changeBG(e, img) { e.style.backgroundImage = "url('background13-3-green.jpg')"; }

</script>



<table width="283" border="0">

  <tr>

   <div class="entry1" onMouseOver="changeBG('back')" onMouseOut="show_pic('back')">

    <td width="273" height="49">&nbsp;</td>

   </div>

  </tr>

</table>



<img src="background13-3-green.jpg"  id="back" style="display: none">

#6 (**permalink**) 29-11-2006, 21:15

von onemorenerd

PHP-Code:


			
changeBG(this, 'a.jpg')

Zitat:

Und das das bild nicht wieder verschwindet nachdem ich von dem entsprechenden feld runter bin.

worked as designed. du setzt zweimal den selben parameter bei changeBG, nämlich 'back' und du benutzt auch nur ein bild in der funktion. schau dir nochmal genau(!) den code von onemorenerd an.

gruß
peter

#7 (**permalink**) 29-11-2006, 22:14

ja sorry das hab ich auch geändert - aber weiso kann ich das nicht in die tabelle einbinden wie oben gezeigt .. also das ich eine <tr> damit belege??? das machts nech?!?!

#8 (**permalink**) 29-11-2006, 22:17

arbeite seit ewigen zeiten nicht mehr mit layout-tabellen, aber soweit ich weiss, geht das nur bei td und nicht bei tr.

peter

#9 (**permalink**) 30-11-2006, 02:43

neeeee sorry funktioniert überhauptnich ... so siehts jetzt aus

PHP-Code:


			
<script type="text/javascript">



function changeBG(e, img) { e.style.backgroundImage = "url('background13-3-green.jpg')"; }



</script>



<img src="background13-3-green.jpg"  id="back" style="display: none">

<img src="background13-3take.jpg"  id="back2" style="display: none">

<body>



<p>&nbsp;</p>



<div class="entry1" onMouseOver="changeBG('back')" onMouseOut="changeBG('back2')">

Haddebimbam

</div>

#10 (**permalink**) 30-11-2006, 04:28

Zitat:

Original geschrieben von joeCrack
neeeee sorry funktioniert überhauptnich ... so siehts jetzt aus

Ja schwachsinnig siehts aus!
Wieviele Parameter hat die Funktion, wieviele übergibst du?
Was macht die Funktion eigentlich und wie macht sie das?
Solange du das nicht beantworten kannst, hast du den Code überhaupt nicht verstanden und solltest dich erstmal mit den Grundlagen von HTML, Javascript und DOM auseinandersetzen.