Hallo,

Wie kann ich es realisieren das ich bei dem Hovereffekt neben dem Link ein Bild haben kann! Also wenn ich über den Link mit der Maus gehe das daneben ein Bild kommt z.B ein Häckchen!
Wer kann mir helfen?

mfg Gero

Das funktioniert mit Java oder Css.
Vllt auch mit Frames!?

Das Script hier kannst du z.B. benutzen, wenn du möchtest, dass sich ein Bild ändert, wenn du mit der Maus rüber fährst:

Code: Alles auswählen

<script type="text/javascript">
function popup(url) {
fenster=window.open(url, "Popupfenster", "width=400,height=300,resizable=yes");
fenster.focus();
return false;
}

Normal1 = new Image();
Normal1.src = "banner.bmp";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "banner2.bmp"; /* erste Highlight-Grafik */

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}

</script>

Und mit nem Hover-Effekt weiß ich nur, wie man die SChriftfarbe ändern kann, bei rüberfahren mit der maus.

Das hier ist der Code dafür:

Code: Alles auswählen

<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:visited { text-decoration:none; font-weight:bold; color:#CA0000; }
a:hover { text-decoration:none; font-weight:bold; color:#C0C0C0; }
a:active { text-decoration:big; font-weight:bold; background-color:#000000; }
a:focus { text-decoration:none; font-weight:bold; background-color:#080; }
-->
</style>

Wenn du ein bisschen daran rumbastelst, kommt dir vllt eine Lösung?

Würde mich nämlich auch mal brennend interessieren.

Ich setze mich jetzt auch mal ran und probiere, wenn ich was habe melde ich mich nochmal!


Edit:

Die Datei habe ich von jemandem zugeschickt bekommen...
Ich selber blicke da nicht durch, aber vllt kannst du ja was damit anfangen ^^

http://custodesfati.cu.funpic.de/frame-navi.html

am besten machst du das mit css.

geht ganz einfach: du musst nur deinem Link einen Hintergrund hinzufügen und den dann vor/nach dem Text ausrichten:

erstmal der Link:

Code: Alles auswählen

<a href="zieldeslinks.html" [b]class="linkmiticon"[/b] />Linktext</a>


und dazu das Stylesheet:

Code: Alles auswählen

a.linkmiticon {
padding-left: 15px; /* Abstand des Link-Textes 15px nach rechts */
background: url (kaestchen.gif) no-repeat; /* Hintergrund-Bild festlegen und Wiederholung verhindern */
}


so wird neben dem Link die Datei kaestchen.gif abgebildet, und dann vom ersten pixel des icons 15 px nach rechts eingerückt, wo dann der text steht.

Hier noch der Hover-Effekt:

Code: Alles auswählen

a.linkmiticon:hover {
padding-left: 15px;
background: url (kaestchen_mit_hacken.gif) no-repeat;
}


eigentlich das selbe wie vorher: mit dem Zusatz :hover an die CSS-Klasse wird die Funktion nur beim drüberfahren aktiviert, das bild von vorher wird durch kaestchen_mit_hacken.gif ausgetauscht.

was du machen willst - das icon erst nach dem hover anzuzeigen - solltest du nicht machen. dabei gibt es nur Verschiebungen im Text, weil der ja schließlich durch das neue icon nach rechts verschoben wird.