• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Hovereffekt

Status
Für weitere Antworten geschlossen.
C

Celladoor

Neues Mitglied
Hi zusammen,

Ich bin ein völliger Newbie in Sachen HTML etc..

Ich hab da ein Problem bei dem ich nicht weiterkomme und hoffe ihr könnt mir weiterhelfen.

Ich wollte einen Bereich eines Bildes mit einem Link versehen. Ich hab dazu das Programm Fast Image Map 2 (FIM2) verwendet.
Kostenloser Fast Image-Map Download (deutsch) 2 - netzwelt.de

Das hat alles bestens geklappt. Nun wollte ich, das der betreffende Linkbereich des Bildes, in einer anderen Farbe erscheint, sobald man mit der Maus darüberfährt.
Im Programm FIM2 gibt es dazu einen Ort wo man zusätzlich einen Mouseover als Javaskript definieren kann. Im Feld dort habe ich javabild.js eingegeben und dann den ganzen HTML Text in den HTML Editor kopiert. Das sieht dann so aus.

<map name="bild_a" id="bild_a">
<area shape="poly" coords="128,193,129,194,365,86,307,332" href="seite2.html" onMouseover="javabild.js" alt="" />
</map>
<img src="bild_a.jpg" width="900" height="1199" border="0" alt="" title="" usemap="#bild_a" />


Im Netz hab ich für den Hovereffekt das hier gefunden:
JavaScript - Beispiele: Bilder - HTMLWorld

<script language="JavaScript">
<!--
function doHover(b,i)
{
f = document.src;
f = f.substr(0,f.length-5);
f+=i+'.jpg';
document.src = f;
}
//-->
</script>
...
<a href="#" onmouseover="doHover('bild1','b')"
onmouseout="doHover('bild1','a')" >
<img border="0" name="bild1" src="bild_a.jpg">
</a>

Ich habe das dann in einen Texteditor kopiert und als javabild mit der Endung .js im Ordner abgespeichert, wo ich die Homepage mache. Dort hab ich auch das Bild mit den Mouseover Bereichen als bild_a.jpg und dasselbe Bild mit der Veränderung als bild_b.jpg gespeichert.

Wenn ich das aber im HTML Editor teste und mit der Maus über den betreffenden Bereich fahre, öffnet sich eine Fehlermeldung:

"Javabild" is undefined


Was habe ich falsch gemacht?
 
Werbung:
Hi,

als erstes musst du die Datei, die dein Javascript enthält im <head> einbinden, damit die Funtionen später verwendet werden können.

Code: 
<script type="text/javascript" src="javabild.js"></script>

Dann rufst du bei onmouseover nur die Funktion auf und nicht die Datei.

Code: 
<area shape..... onmouseover="doHover(x, y);" />
 
Werbung:
Der erste Parameter ist dein Prefix für die Bilder, also 'bild_', der zweite ist dafür, welches Bild du laden willst, also 'b'. Bei onmouseout tauschst du dann das b wieder durch ein a aus.
 
<area shape="POLY" coords="128,193,129,194,365,86,307,332" href="seite2.html" onmouseover="doHover(bild_a, b);" >

Hab ich das richtig eingegeben?
 
Zuletzt bearbeitet:
Die Funktion brauchst du dafür garnicht.

Gib deinem image eine id welche du dann der Funktion 'getElementById' als Parameter übergibst und bei 'src' gibst du dein neues Bild an.

Code: 
<img src="images/1.jpg" alt=""  id="image" usemap="#map" />
<map id="map" name="map">
  <area shape="rect" coords="10, 10, 50, 50" href="#" alt="" onmouseover="document.getElementById('image').src='images/2.jpg'" onmouseout="document.getElementById('image').src='images/1.jpg'"/>
</map>
 
Werbung:
Kann man es einrichten, dass genau an dem Ort wo die Maus über den zugewiesenen Bereich fährt, sich ein Bild öffnet? Dass sich also das Bild immer neben dem Mauscursor öffnet unabhängig davon an welcher Stelle sich der Mauscursor auf dem zugewiesenen Bereich befindet?

Ich hab da was gefunden was sich Tooltip nennt. Geht das damit?

<a href="index.htm" onmouseover="Tip('Text mit <img src=\'image.jpg\' width=\'60\'>Bild.')" onmouseout="UnTip()"> Homepage </a>


Ich weiss nun aber nicht genau wie ich das in mein HTML korrekt einbinden kann. Kann ich das einfach dahinter hängen?
Mein bisheriges HTML:

<map name="bild_a" id="bild_a">
<area shape="POLY" coords="149,128,150,129,303,129,303,267,149,268" href="seite2.html" onMouseover="document.getElementById('image').src='bild_b.jpg'"
onmouseout="document.getElementById('image').src='bild_a.jpg'">


Ich habs jetzt 2 Stunden versucht, aber das klappt einfach nicht. Kann mir jemand helfen?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben