[Gast]Richard: Mouseover bei Imagemap - FF spielt nicht mit.

SELF-Forum

Mouseover bei Imagemap - FF spielt nicht mit.

[Gast]Richard
– Informationen zu den Bewertungsregeln

Ich hab folgenden Code geschrieben und wollte damit erzwecken, das meine Navigrafik sich ändert, wenn man in einem bestimmten verlinkten Bereich der Grafik fährt (mit der Maus). Im IE funktioniert alles. Im FF funktioniert alles außer dem Mouseover, welches er völlig ignoriert. Ein Grafikaustausch findet nicht statt. Bitte um Hilfe!

        <img src="grafiken/bio_active.png" width=800 height=45 border=0 alt="Sie befinden sich auf der Seite Bio" title="" usemap="#navi">  
        <map name="navi">  
          <area shape="rect" coords="79,11,158,39" onMouseover="document.images[0].src='grafiken/bio_active_home_mouseover.png'" onMouseout="document.images[0].src='grafiken/bio_active.png'" href="index.html" alt="Home" title="Home">  
          <area shape="rect" coords="199,11,278,39" onMouseover="document.images[0].src='grafiken/bio_active_bio_mouseover.png'" onMouseout="document.images[0].src='grafiken/bio_active.png'" href="bio.html" alt="Bio" title="Bio">  
          <area shape="rect" coords="319,11,398,39" onMouseover="document.images[0].src='grafiken/bio_active_media_mouseover.png'" onMouseout="document.images[0].src='grafiken/bio_active.png'" href="media.html" alt="Media" title="Media">  
          <area shape="rect" coords="439,11,518,39" onMouseover="document.images[0].src='grafiken/bio_active_links_mouseover.png'" onMouseout="document.images[0].src='grafiken/bio_active.png'" href="links.html" alt="Links" title="Links">  
        </map>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Mouseover bei Imagemap - FF spielt nicht mit.

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Ich hab folgenden Code geschrieben und wollte damit erzwecken, das meine Navigrafik sich ändert, wenn man in einem bestimmten verlinkten Bereich der Grafik fährt (mit der Maus). Im IE funktioniert alles. Im FF funktioniert alles außer dem Mouseover, welches er völlig ignoriert. Ein Grafikaustausch findet nicht statt. Bitte um Hilfe!

    Das kann ich nicht nachvollziehen. Der Code copy-paste in eine Standard-HTML-Seite kopiert und durch Grafiknamen aus meinem System ersetzt funktioniert bei mir im FireFox 2.0.0.16 auf Anhieb.

    Anmerkungen:

    Navigrafik

    Eine Navigrafik ist ganz schlechter Stil. Eine Navigation sollte eine Liste (UL oder OL) von Navigationslinks (A) sein.

    <area shape="rect" coords="79,11,158,39" onMouseover="document.images[0].src='grafiken/bio_active_home_mouseover.png'" onMouseout="document.images[0].src='grafiken/bio_active.png'" href="index.html" alt="Home" title="Home">

    »»

    Das Attribut und auch die Eigenschaft im JavaScript heißen onmouseover und onmouseout, \_nicht\_ onMouseover und onMouseout. JavaScript macht einen Unterschied zwischen Groß-und Kleinschreibung und spätestens XHTML auch.  
  
Da ich ein solches Problem (eine Navigation, bei der die Navigationslinks relativ willkürlich auf einem Bild verstreut sein sollten) auch schon mal gelöst habe, hier eine Anregung dazu, die völlig ohne JavaScript auskommt.  
  
~~~html
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Menü als ImageMap</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
* { margin:0; padding:0; }  
#imagemap { position:relative; width:500px; height:150px; background-image:url(grossesBildFuerDieMap); }  
#imagemap a { display:block; text-decoration:none; background:none; border:2px dotted; }  
#imagemap a span { display:none; }  
#imagemap li { list-style-type:none; }  
#imagemap a#shape1 { position:absolute; width:80px; height:80px; top:0; left:0; }  
#imagemap a#shape2 { position:absolute; width:80px; height:80px; bottom:0; left:50%; margin-left:-40px; }  
#imagemap a#shape3 { position:absolute; width:80px; height:80px; top:0; right:0; }  
#imagemap a#shape1:hover { background-image:url(bildFuerShape1) }  
#imagemap a#shape2:hover { background-image:url(bildFuerShape2) }  
#imagemap a#shape3:hover { background-image:url(bildFuerShape3) }  
</style>  
</head>  
<body>  
<h1>Test</h1>  
<div id="imagemap">  
<ul>  
 <li><a href="#" id="shape1"><span>Linktext</span></a></li>  
 <li><a href="#" id="shape2"><span>Linktext</span></a></li>  
 <li><a href="#" id="shape3"><span>Linktext</span></a></li>  
</ul>  
</div>  
<p>Test</p>  
</body>  
</html>

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln