Was ist falsch an diesem MouseoverEffekt?
Markus
- javascript
0 Struppi0 Markus0 Struppi0 Der Martin0 Struppi
Hi!
Ich versuche einen einfachen Mouseover-Effekt mit JavaScript zu machen. Aber das klappt nicht. Woran liegt es? Ich finde den Fehler nicht! Könnt ihr mir vielleicht helfen?
Hier der Quelltext:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function show_top_img(box){
document.getElementById(box).src = "bilder/" + box + "_hover.png";
}
function hide_top_img(box){
document.getElementById(box).src = "bilder/" + box + ".png";
}
</script>
</head>
<body>
<div style="width:699px; margin:0 auto 0 auto;">
<div style="margin-right:0; padding:0; background-color:#FFFFFF;">
<img src="bilder/gal.png" id="gal" width="150" height="96" onmouseover="show_top_img('gal')" onmouseout="hide_top_image('gal')" alt="">
<img src="bilder/scripts.png" id="scripts" width="150" height="96" onmouseover="show_top_img('scripts')" onmouseout="hide_top_image('srcipts')" alt="">
<img src="bilder/art.png" id="art" width="150" height="96" onmouseover="show_top_img('art')" onmouseout="hide_top_image('art')" alt="">
</div>
</div>
</body>
</html>
Vielen Dank für euer Bemühen und für eure Hilfe!
Gruß, Markus
Ich versuche einen einfachen Mouseover-Effekt mit JavaScript zu machen. Aber das klappt nicht. Woran liegt es? Ich finde den Fehler nicht! Könnt ihr mir vielleicht helfen?
Wie lautet die Felermeldung?
Hier der Quelltext:
Wobei deine Lösung extrem umständlich ist.
<img src="bilder/gal.png" id="gal" width="150" height="96" onmouseover="show_top_img('gal')" onmouseout="hide_top_image('gal')" alt="">
Du willst also bei einem mousover das Bild selber auswechseln, dazu reicht this, das ist die Referenz auf das aktuelle Objekt in dem Falle das Bild:
<img src="bilder/gal.png" id="gal"
onmouseover="this.src = 'bilder/'+ this.id + '_hover.png';"
alt="">
ich hab mal ein Skript geschriben, das genau das macht, ohne das du JS Code in den HTML Code einfügen musst, lediglich eine Klasse ist nötig: http://javascript.jstruebig.de/skripte/30/
Das macht dann alles automatisch.
Struppi.
Hallo!
Wie lautet die Felermeldung?
hide_top_img is not defined! Es geht jetzt zwar (mit this! Danke!), aber es würde mich trotzdem interessieren, was daran falsch ist. Weißt du es?
Vielen Dank für deine Hilfe!
Gruß, Markus
Wie lautet die Felermeldung?
hide_top_img is not defined! Es geht jetzt zwar (mit this! Danke!), aber es würde mich trotzdem interessieren, was daran falsch ist. Weißt du es?
Nein. das ist der Name deiner Funktion, die bei einem mousout ausgeführt wird. Wenn du sie so wie in dem Quellcode definiert hast, wie du es uns gezeigt hast, sollte das funktionieren.
Was sagt die JS Konsole von firefox?
Struppi.
Hallo Markus,
hide_top_img is not defined! [...] aber es würde mich trotzdem interessieren, was daran falsch ist. Weißt du es?
natürlich. Schau dir deinen Code genau an:
function hide_top_img(box){
document.getElementById(box).src = "bilder/" + box + ".png";
}
<img src="bilder/art.png" id="art" width="150" height="96" onmouseover="show_top_img('art')" onmouseout="hide_top_image('art')" alt="">
Und nun vergleiche bitte den Namen der Funktion, so wie sie definiert ist, mit dem Namen der Funktion, die du aufrufen möchtest. ;-)
Ciao,
Martin
hide_top_img is not defined! [...] aber es würde mich trotzdem interessieren, was daran falsch ist. Weißt du es?
natürlich. Schau dir deinen Code genau an:
Natürlich ist das nicht, den eigentlich müßte ja die Fehlermeldung den falschen Namen im Funktionsaufruf kritisieren und nicht im script Block.
Da haben wir offensichtlich mal wieder nicht den Code gezeigt bekommen, der den Fehler produziert.
Struppi.
Hallo Struppi,
Da haben wir offensichtlich mal wieder nicht den Code gezeigt bekommen, der den Fehler produziert.
... oder nicht den genauen Wortlaut der Fehlermeldung. ;-)
So long,
Martin
Hallo!
Da haben wir offensichtlich mal wieder nicht den Code gezeigt bekommen, der den Fehler produziert.
Doch! Ich habe euch den kompletten Code gezeigt. Mehr hatte ich zu dem Zeitpunkt noch nicht. Und auch den genauen Wortlaut. Aber die Konsole ist komisch, da sie Zeile1 als Fehlerzeile angibt. Was ja definitiv nicht der Fall ist.
Aber jetzt habe ich ein neues Problem. Ich würde gerne bei dem MouseoverEffekt nicht nur den jeweiligen Button verändern, sondern auch noch ein bestimmtes Bild. Das src-Attribut des Bildes soll bei jedem Mouseover und Mouseout verändert werden.
Hier der Quelltext:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function show_top_img(box){
document.getElementById("head").src = "bilder/" + box + "_top_img.jpg";
document.getElementById(box).src = "bilder/" + box + "_hover.png";
}
function hide_top_img(box){
document.getElementById("head").src = "bilder/top_img1.png";
document.getElementById(box).src = "bilder/" + box + ".png";
}
</script>
</head>
<body>
<div style="width:699px; margin:0 auto 0 auto;">
<div style="float:left; margin:0; padding-top:1px;">
<img src="bilder/top_img1.jpg" id="head" width="549" height="288" alt="Tarot - Der Weg des Lebens" title="Tarot - Der Weg des Lebens">
</div>
<div style="margin-right:0; padding:0; background-color:#FFFFFF;">
<img src="bilder/gal.png" id="gal" width="150" height="96" onmouseover="show_top_img('gal')" onmouseout="hide_top_img('gal')" alt="" style="margin-right:0; padding-right:0; text-align:right;">
<img src="bilder/scripts.png" id="scripts" width="150" height="96" onmouseover="show_top_img('scripts')" onmouseout="hide_top_img('scripts')" alt="" style="margin-right:0; padding-right:0; padding-top:1px; text-align:right;">
<img src="bilder/art.png" id="art" width="150" height="96" onmouseover="show_top_img('art')" onmouseout="hide_top_img('art')" alt="" style="margin-right:0; padding-right:0; padding-top:1px; text-align:right;">
</div>
</div>
</body>
</html>
Vielen vielen Dank für eure Hilfe!
Liebe Grüße, Markus
Da haben wir offensichtlich mal wieder nicht den Code gezeigt bekommen, der den Fehler produziert.
Doch! Ich habe euch den kompletten Code gezeigt. Mehr hatte ich zu dem Zeitpunkt noch nicht. Und auch den genauen Wortlaut. Aber die Konsole ist komisch, da sie Zeile1 als Fehlerzeile angibt. Was ja definitiv nicht der Fall ist.
Für den IE schon, da der falsche code im Eventhandler ausgeführt wird, der Wortlaut der Fehlermledung war dann also ein anderer.
Schau in die JS Konsole vom Firefox und du wirst deine auch alleine Fehler finden!
Aber jetzt habe ich ein neues Problem. Ich würde gerne bei dem MouseoverEffekt nicht nur den jeweiligen Button verändern, sondern auch noch ein bestimmtes Bild. Das src-Attribut des Bildes soll bei jedem Mouseover und Mouseout verändert werden.
[code] ....
Vielen vielen Dank für eure Hilfe!
wie lautet die Fehlerbeschreibung?
Struppi.