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

Mouseover Effekt mit verweis-sensitiver Grafik

L

lealo

Neues Mitglied
Hallo Leute ;)

Ich bastle gerade an einer Homepage herum. Dort habe ich nun eine Grafik. Wenn ich mit der Maus über die Grafik fahre, dann erscheint neben dieser Grafik eine andere Grafik, die eine verweis-sensitive Grafik sein sollte. Bei mir sieht der code folgendermassen aus. Es funktioniert alles, ausser dass ich die Links nicht auf der verweis-sensitiven Grafik anklicken kann...
Kann mir jemand helfen??

HTML: 
<html>
<head>
<title>Beispiel Report Links</title><script language="JavaScript">
<!-- begin
// Bilder bekannt machen
// variablennamen werden vergeben
var bild1 = new Image();
// den Variablen wird die Bildquelle zugewiesen
bild1.src = "GISHinten.png";
// Funktion zum Tauschen der Bilder
function Zeigen(Bildname)
{
eval("document['picture'].src = " + Bildname + ".src");
}
// end -->
</script>
</head>
<body><center>

<a href="ReportingSiteTest.html" target="_top"
onMouseOver="Zeigen('bild1');"
onMouseOut="Verstecken('bild1')">
<img src="GISNeu.png" usemap="#GISLinks" name="GISLinks" border="0" 
 onMouseOver="Zeigen('bild1')" onMouseOut="Verstecken('bild1')">
   <map name="GISLinks">
     <area shape="rect" coords="24,31,225,52"
         href="GISBuildYourOwnReport.html" alt="BuildYourOwnReport" title="Build your own report">
     <area shape="rect" coords="24,56,225,75"
           href="GISAllReports.html" alt="AllReports" title="All Reports">
     <area shape="rect" coords="24,77,225,99"
           href="GISInformations.html" alt="Informations" title="Informations">
     <area shape="rect" coords="24,102,225,121"
           href="GISQuestions.html" alt="Questions" title="Questions">
     <area shape="rect" coords="24,124,225,144"
           href="GISMore.html" alt="More" title="More">
   </map>
 </a>
</center></body>
</html>

Liebe Grüsse
Lealo
 
Dein Problem ist leicht erklärt. Die Grafik schiebt sich über deinen Link, dass musst du verhindern.
Da gibt es einige Ansätze um dies zu tun. Aber die leichtere wäre eine divbox zu bauen und diese mit position nach oben zu ziehen oder ggf. mit z-index noch weiter nach oben zu drücken.

<div id="link" style="position:relavtive;z-index:11;"><a href="ReportingSiteTest.html" target="_top" onMouseOver="Zeigen('bild1');" onMouseOut="Verstecken('bild1')">text</a></div>

oder falls das auch nicht geht mit position:absolute; das müsste auf jedenfall gehen.

Edit: ok sehe gerade du hast das Bild als Link genommen... ok das kann so garnicht gehen. Ein Tipp wäre hier einfach ein jQuery Tool zu nutzen oder das ganze mit CSS zu lösen (hover funktion von CSS2). Würde auch zu CSS tendieren, damit das Berrierenfrei bleibt.
 
Hallo agund.

Danke für deine Antwort. Okay, also ich habe ein Problem xD und das lässt sich anscheinend nur mit CSS lösen. Ich kann aber nur spärlich HTML und Javascript... Könntest du mir echt den Code vorgeben? Oder Stichworte?! Weil ich weiss gar nicht wo ich anfangen soll...

Liebe Grüsse
Lealo
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben