Mousover mit Div?

M

Malaxo

Erfahrenes Mitglied
Kann ich ein Mousover machen jedoch das nächste Bild bzw. auch Text irgend wo anders anzeigen lassen?

Also z.b. hat man oben links ein Bild wen man da mit der Mouse darauf geht sollte unten rechts ein Bild angezeigt werden + ein Text unter dem geöffneten Bild.

Ist dies möglich? Wie löst man das mit Div vieleicht?

Hab bis jetzt nur mit Rollover gearbeitet und weiss noch nicht mal wie Mousover geht, aber Mousover brauch ich nicht wenn es nicht mit anderer Ziel anzeige geht.

Thx
 
z.B. so, oder so ähnlich

HTML: 
<SCRIPT ...>
function bild_einblenden()
{
div_bild2.style.visibility=visible;
}
</SCRIPT>

<IMG src="bild1.jpg" onmouseover="bild_einblenden">

<DIV name="div_bild2" style="visibility:hidden">
<IMG src="bild2.jpg" alt="text">
<P>Text2</P>
</DIV>

Ich habs nicht getestet, aber als Anhaltspunkt sollte es reichen...
 
passiert nichts... geht nicht...

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mousover</title>
<SCRIPT ...>
function bild_einblenden()
{
div_bild2.style.visibility=visible;
}
</SCRIPT>
</head>
<body>


<IMG src="bild1.jpg" onMouseover="bild_einblenden">

<DIV name="div_bild2" style="visibility:hidden">
<IMG src="bild2.jpg" alt="text">
<P>hallo</P>
</DIV>

</body>
</html>

hab ich was falsch ?
 
div_bild2.style.visibility=visible; <-- Die Zeile funktioniert nicht in jedem Browser und selbst, wie alles, im IE nicht gescheit

Ändere den Namen des Divs in eine Id, also name="div_bild2" in id="div_bild2" und benutze document.getElementById('div_bild2).style.visibility="visible"; stattdessen.
 
Zuletzt bearbeitet:
1. fehlt doch das' in document.getElementById('div_bild2).style.visibility="visible"; nach dem 'div_bild2*

2. geht trozdem nicht

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mousover</title>
<SCRIPT ...>
function bild_einblenden()
{
document.getElementById('div_bild2').style.visibility=visible; 
}
</SCRIPT>
</head>
<body>


<p><IMG src="bild1.jpg" onMouseover="bild_einblenden">
</p>
<p>&nbsp; </p>
<DIV id="div_bild2" style="visibility:hidden">
  <img src="bild2.jpg" alt="text">  
  <P>hallo</P>
</DIV>

</body>
</html>
 
Weil bei dir die Anfuerungszeichen um visible fehlen, die ich aber mitgepostet hatte. Also bevor man Klugscheisst sollte man sich seiner Sache versichern.
 
ja das weiss ich auch mit absicht weggenommen an dem liegt es aber nicht es geht auch mit "" nicht!

das ist nicht Klugscheissern das ist mit denken! wollte nur darauf hinweissen das du was vergessen hast kann doch jedem passieren aber es geht auch nicht wen ich bei Visible die "" mache!
 
Das Script war ja als Gedankenanstoß gedacht und nicht als fix und fertiges Programm. Vielleicht stimmen bei dir bei den IMG Tags die Pfadangaben zum Bild nicht, oder du hast JavaScript deaktiviert :suspekt:

Außerdem habe ich nicht alle Parameter beim <DIV> angegeben. Ich konnte ja nicht ahnen, dass das ein Problem sein würde...

HTML: 
<div id="div_bild2" style="position:absolute; width:806px; height:466px; z-index:1; top:0px; left:0px; visibility:hidden; border:3px; border-style:outset; border-color:blue; background-color:white;">

@con-f-use: Natürlich hast du mit dem ID Recht :-( In der Eile hab ich mich da vertan.
Wenn man aber mit ID arbeitet, klappt der div_bild2.style.visibility='visible' auch im Opera und im Firefox... Wobei ich natürlich eingestehe, dass es nicht die wahre JavaScript Kunst ist :-)
 
Ganz nebenbei fehlen die Klammern beim Funktionsaufruf im onmousevoer.

Und was das fehlende einfache Anfuerungszeichen angeht, so war es Klugscheisserei, denn jeder kann sich denken, dass das dahin gehoert und es nur ein unsaeglich folgenschwerer (Tipp-)Fehler war, dass ich es beim schnellen Tippen aus dem Stegreif vergessen habe.
 
Hey super es hat geklappt :suspekt:

@con-f-use
Sorry fals du das als Klugscheisserei empfunden hast war nicht so gedacht.
Aber ich entschuldige mich trozdem bei dir dafür.

Danke für eure hilfe
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück