✔ Beim DIV-onMouseOver ein Bild einblenden?

Suchfunktion

Suchfunktion

Erfahrenes Mitglied
Hi!

Ich habe folgenden (Beispiel-)HTML-Code:
HTML: 
...
<body>
  <div class="menu">
    <div class="entry1">
      <img src="foo.jpg" id="image1"> foo1
    </div>
    <div class="entry2">
      <img src="foo.jpg" id="image2"> foo2
    </div>
    <div class="entry3">
      <img src="foo.jpg" id="image3"> foo3
    </div>
  </div>
</body>
...

Wie kann ich es bewerkstelligen,
dass die Bilder (foo.jpg) ausgeblendet sind und wenn ich ueber einen der <div class="entry"> Bereiche gehe, das jeweils enthaltene Bild eingeblendet wird? (Nur in dem entsprechenden DIV-Bereich, nicht alle Bilder!)
Es soll halt immer das Bild angezeigt werden, ueber dessen DIV-Bereich ich mich befinde.

Ich moechte mich schonmal im Voraus bedanken! :)

See ya.
 
Hallo,
so
HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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>
</head>
<body>
  <div class="menu">
    <div class="entry1" onmouseover="show_pic('bild1')" onmouseout="show_pic('bild1')">
      <img id="bild1" style="display: none" src="foo.jpg"> foo1
    </div>
    <div class="entry2" onmouseover="show_pic('bild2')" onmouseout="show_pic('bild2')">
      <img id="bild2" style="display: none" src="foo.jpg"> foo2
    </div>
    <div class="entry3" onmouseover="show_pic('bild3')" onmouseout="show_pic('bild3')">
      <img id="bild3" style="display: none" src="foo.jpg"> foo3
    </div>
  </div>
</body>
</html>
sollte es funktionieren.

mfg
forsterm
 
Hi, danke.
Eigtl. haette ein Loesungs-Ansatz voll ausgereicht, aber das ist ja echt sehr geil! :eek:

Vielen, vielen Dank!! ;)
 
Hi.
An sich funktioniert es schonmal so halbwegs :p

Aber die Sache ist die, dass wenn ich ueber einen der DIV-Bereiche gehe, die Grafik komplett 'entfernt' wird, somit rutscht der Text nach links.
Das hatte ich nicht bedacht :(

Vermutlich muss ich die Grafiken austauschen lassen.
(Onmouseover -> Normales bild anzeigen. Onmouseout -> leeres Platzhalterbild anzeigen.)
Wie mache ich das?

Danke :)
 
Ändere anstelle der display-Eigenschaft die visibility-Eigenschaft auf "hidden" bzw. "visible" ....dann verrutscht nichts.
 
Hi!

Habe eben das ganze mal mit CSS umgesetzt.
(Mit Hovereffekt. also .entry:hover{ background..blabla })
Klappt auch (teilweise) ganz gut.

Von daher -> Thema erledigt ;)

Trotzdem nochmal vielen Dank!

mfg
Suche
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück