Mamosch: Onmouseover Code einfügen

SELF-Forum

Onmouseover Code einfügen

Mamosch Homepage des Autors
– Informationen zu den Bewertungsregeln

Hi,
ich bin gerade am kämpfen mit Javascript.

Mein momentaner Code schaut so aus:

  
  
<p style="text-align:center;"><span style="font-size:22pt;"><a href="javascript:var EffectiveNewWin = tab.open('http://www.fahrerprofis.de/','_blank','directories,location,menubar,resizable,scrollbars,status,toolbar'); EffectiveNewWin.focus();"><img style="border:none;" title="Berufskraftfahrer Aus- und Weiterbildung" alt="Berufskraftfahrer Aus- und Weiterbildung" src="res/Default/bkf.jpg" width="100%" height="100%" /></a></span></p>

Das funktioniert sowiet ganz gut. Nur möchte ich jetzt da noch einen onmouseover Effekt einbauen, der auf die Bilddatei bkf1.jpg zugreift. Leider komme ich mich mit meinem Wissen hier nicht mehr weiter.

Wer kann mir da weiterhelfen? Vielen Dank schon mal im Voraus.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hintergrundbild eines Links (scheinbar) wechseln

    Jörg Reinholz
    – Informationen zu den Bewertungsregeln

    Das funktioniert sowiet ganz gut.

    [...]

    Also wie ein Link, nur dass Du vorschreibst, dass ein neuer Tab geöffnet wird. Auch das ist das Verhalten, welches mit <a href="..." target="_blank"><img src="foo.png" /></a> ganz ohne Javascript erreicht wird.

    Nur möchte ich jetzt da noch einen onmouseover Effekt einbauen, der auf die Bilddatei bkf1.jpg zugreift.

    Also, wie hast Du Dir diesen Zugriff vorgestellt? Normalerweise benutzt man CSS um derlei zu realisieren.

    Wenn es partout und gegen jeden besseren Ratschlag Javascript sein SOLL, dann  wäre eine primitive Lösung etwas wie:

    <img src="foo.png" onmouseover="this.src='bar.jpg'" onmouseout="this.src='foo.jpg'" />

    Ansonsten böte sich CSS an. Beispiel:

    <!DOCTYPE html>  
<html>  
<head>  
<title>toggle</title>  
<style type="text/css">

    body {  
    background-color:gray;  
}  
  
a.effekt {  
   #display:block;  
   display:inline-block;  
   width:100px;  
   height:100px;  
}  
  
a.effekt {  
   background-position:top;  
}  
  
a.effekt:hover {  
   background-position: bottom;  
}

    </style>  
</head>  
<body>  
<p>Effekt:<p>  
<a class="effekt" href="test.html" style="background-image:url('sw.gif')"></a>  
</body>  
</html>

    Das für das Beispiel verwendet sw.gif ist eine 200 Pixel hohe und 100 Pixel breite Grafik, deren ober Hälfte schwarz und deren untere Hälfte weiß ist. Deshalb der graue Hintergrund für den Body. Gezeigt wird die obere Hälfte (schwarz), wenn die Maus drüber ist jedoch die untere (weiß). Und zwar ohne störendes Nachladen vonm Server. Das ist vermutlich der Effekt den Du willst.

    Jörg Reinholz

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln