Mouseonhover ?
Don
- javascript
Hallo Leute!!
Leider verstehe ich das mit dem onmousehover nicht ganz.
Habe mir nen Beispiel angeschaut und an meine Bedürfnisse angepasst. Leider ist das nicht ganz so gut!
Hier der Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
<META NAME="author" CONTENT="Markus Pragel, Don, Der Don">
<META NAME="description" CONTENT="Polopictures die besten Bilder aus dem Bereich Kanupolo">
<META NAME="keywords" CONTENT="Kanupolo, KCNW, KSVH, Bilder, Fotos, pictures, polo, Berlin>
<META NAME="robots" CONTENT="all">
<META NAME="revisit" CONTENT="30 Days>
<META HTTP-equiv="expires" CONTENT="0">
<title> polopictures.de - Home -</title>
<SCRIPT LANGUAGE="javascript"></SCRIPT>
<style type="text/css">
#head {
background-color: #FFFFF0;
width: 574px;
height: 102px;
margin: 45px auto 59px auto;
border: 1px solid #000000;
position: relative;
}
.pic {
position: absolute;
background-color: transparent;
border: none;
}
</style>
</head>
<body>
<div id="head">
<img src="Icon/navi_01.gif" class="pic" style="width: 574px; height: 8px; left: 0px; top: 0px;"/>
<img src="Icon/navi_02.gif" class="pic" style="width: 13px; height: 94px; left: 0px; top: 8px;"/>
<a href="#" onmouseover="document.images[0].src='hover/hover03.gif'; return true;"
onmouseout="document.images[0].src='Icon/navi_03.gif'; return true;">
<img src="Icon/navi_03.gif" class="pic" style="width: 59px; height: 57px; left: 13px; top: 8px;"/>
</a>
<img src="Icon/navi_04.gif" class="pic" style="width: 13px; height: 94px; left: 72px; top: 8px;"/>
<a href="#">
<img src="Icon/navi_05.gif" class="pic" style="width: 58px; height: 57px; left: 85px; top: 8px;"/>
</a>
<img src="Icon/navi_06.gif" class="pic" style="width: 14px; height: 94px; left: 143px; top: 8px;"/>
<a href="#">
<img src="Icon/navi_07.gif" class="pic" style="width: 59px; height: 57px; left: 157px; top: 8px;"/>
</a>
<img src="Icon/navi_08.gif" class="pic" style="width: 16px; height: 94px; left: 216px; top: 8px;"/>
<a href="#">
<img src="Icon/navi_09.gif" class="pic" style="width: 58px; height: 57px; left: 232px; top: 8px;"/>
</a>
<img src="Icon/navi_10.gif" class="pic" style="width: 13px; height: 94px; left: 290px; top: 8px;"/>
<a href="#">
<img src="Icon/navi_11.gif" class="pic" style="width: 58px; height: 57px; left: 303px; top: 8px;"/>
</a>
<img src="Icon/navi_12.gif" class="pic" style="width: 16px; height: 94px; left: 360px; top: 8px;"/>
<a href="#">
<img src="Icon/navi_13.gif" class="pic" style="width: 58px; height: 57px; left: 376px; top: 8px;"/>
</a>
<img src="Icon/navi_14.gif" class="pic" style="width: 15px; height: 94px; left: 434px; top: 8px;"/>
<a href="#">
<img src="Icon/navi_15.gif" class="pic" style="width: 58px; height: 57px; left: 449px; top: 8px;"/>
</a>
<img src="Icon/navi_16.gif" class="pic" style="width: 13px; height: 94px; left: 507px; top: 8px;"/>
<a href="#">
<img src="Icon/navi_17.gif" class="pic" style="width: 18px; height: 77px; left: 520px; top: 8px;"/>
</a>
<img src="Icon/navi_18.gif" class="pic" style="width: 35px; height: 94px; left: 538px; top: 8px;"/>
<img src="Icon/navi_19.gif" class="pic" style="width: 59px; height: 37px; left: 13px; top: 65px;"/>
<img src="Icon/navi_20.gif" class="pic" style="width: 58px; height: 37px; left: 85px; top: 65px;"/>
<img src="Icon/navi_21.gif" class="pic" style="width: 59px; height: 37px; left: 157px; top: 65px;"/>
<img src="Icon/navi_22.gif" class="pic" style="width: 58px; height: 37px; left: 232px; top: 65px;"/>
<img src="Icon/navi_23.gif" class="pic" style="width: 58px; height: 37px; left: 302px; top: 65px;"/>
<img src="Icon/navi_24.gif" class="pic" style="width: 58px; height: 37px; left: 376px; top: 65px;"/>
<img src="Icon/navi_25.gif" class="pic" style="width: 58px; height: 37px; left: 449px; top: 65px;"/>
<img src="Icon/navi_26.gif" class="pic" style="width: 18px; height: 17px; left: 520px; top: 85px;"/>
<div class="headlines"> HOME </div>
</div> <!-- ENDE DIV HEAD -->
</body>
</html>
hier könnt ihr euch das auch nochmal anschauen. http://www.polopictures.de/test.html
Das bild das ich als mouseonhover anzeigen will wird nicht an der richtigen stelle angezeigt. ich will das es am ersten Ball angezeigt wird.
Kann mir jemand helfen?
Leider verstehe ich das mit dem onmousehover nicht ganz.
Habe mir nen Beispiel angeschaut und an meine Bedürfnisse angepasst. Leider ist das nicht ganz so gut!
Du solltest dich vielleicht ein bisschen mit JS beschäftigen. selfhtml kann dir da sehr hilfreich sein, insbesondere dürfte dir diese Seite helfen
http://selfhtml.teamone.de/javascript/objekte/images.htm
Struppi.
Nabend,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
Du mogelst.
<SCRIPT LANGUAGE="javascript"></SCRIPT>
Wozu dieser leere JS-Abschnitt? Zudem hast du die type-Angabe vergessen.
<img src="Icon/navi_01.gif" class="pic" style="width: 574px; height: 8px; left: 0px; top: 0px;"/>
Du vergisst konsequent das alt-Attribut.
hier könnt ihr euch das auch nochmal anschauen. http://www.polopictures.de/test.html
Sehr schön, dass du ein Beispiel bereit stellst. Noch schöner wäre es gewesen, hättest du daraus einen Link gemacht (</faq/#Q-19>): http://www.polopictures.de/test.html
Kann mir jemand helfen?
Ja, schau dir das Beispiel aus SelfHTML noch einmal an, dort wird genau das beschrieben: http://selfhtml.teamone.de/javascript/beispiele/buttons.htm
Bis denne,
Hi!
Also ich habe das nur so von einem Bsp. übernommen von ner anderen Seite:
http://www.widearea.co.uk/designer/mouseoverfr_2.html/
and hat der (oder die) jenige schon gemogelt.
Ich selber habe keine Ahnung von JS
Also ich habe das nur so von einem Bsp. übernommen von ner anderen Seite:
Hast du dir mal die Seite angeguckt?
© Wide Area Communications, 1996, 1997
Ist das die einzige (oder beste) Seite die du gefunden hast?
du solltest deine Suchstrategien verfeinern.
Ich selber habe keine Ahnung von JS
Na, das läßt sich ja mit Hilfe von selfhtml ändern.
Struppi.
Ooops!!
Ne das habe ich nicht gesehen.
Ich habe das nur schnell mal geguckt war anscheinend nicht ganz bei der Sache!
1997! Das ist ja schon Lichtjahre her!
[...]
Hier der Quellcode:
[...]
<a href="#" onmouseover="document.images[0].src='hover/hover03.gif'; return true;"
onmouseout="document.images[0].src='Icon/navi_03.gif'; return true;">
[...]
Kann mir jemand helfen?
Das Problem ist die [0].
Probiers mal mit [1] oder [2] oder ..., je nachdem, welches Bild du aendern willst. Diese Zahl ist für jedes der Bilder unterschiedlich und hängt davon ab, in welcher Reihenfolge die Bilder in deiner Seite angeordnet sind -> Ausprobieren!
Bild 0 ist definitiv das falsche (Es ändert sich der obere Bereich, nicht der gewünschte Ball).
Gruß.
Kai