RollOver-Button

Scripte > Button Navigation

Ein simples RollOver mit Button

Ob RollOver oder MouseOver - letztendlich ist das nur eine Bezeichnung für das Überfahren eines Bildes mit der Maus. Zwei identische Button erstellen, hier "btn_demo-a.gif" und "btn_demo-p.gif", wobei die Button untereinander ein wenig abweichen, aber inhaltlich das gleiche aussagen sollten. Und schon verändert sich dieser beim Überfahren mit der Maus. Hier einige Beispiele dazu.

Die entsprechende Bilder für die Button müssen auf dem WEB-Server in einem Verzeichnis z. B. "images" vorliegen bzw. dorthin kopiert werden.

HTML-Code kopieren und in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen. Nun noch die Pfade zu den Bilddateien und zur verlinkten Seite anpassen, fertig.

Der Pfad kann mit "http://www.domain.tld/" auf eine eigene oder andere Domain und auch derer Unterseiten hinterlegt werden.

Aber auch eine relative Pfadangabe, also ohne "http://www.domain.tld/" für eigene Webseiten ist möglich, auch im Unterordner.

RollOver ohne Link:

Code für den <BODY> Bereich

<img src="images/btn_demo-p.gif"

onmouseover="this.src='images/btn_demo-a.gif'" onmouseout="this.src='images/btn_demo-p.gif'">

Nach dem <BODY> Tag

RollOver mit Link im gleichen Fenster:

Code für den <BODY> Bereich

<img src="images/btn_demo-p.gif" width="161" height="30" alt="Test Rollover"

onmouseover="this.src='images/btn_demo-a.gif'" onmouseout="this.src='images/btn_demo-p.gif'"/></a>

Nach dem <BODY> Tag

RollOver mit Link im neuen Fenster:

Code für den <BODY> Bereich

<img src="images/btn_demo-p.gif" width="161" height="30" alt="Test Rollover"

onmouseover="this.src='images/btn_demo-a.gif'" onmouseout="this.src='images/btn_demo-p.gif'"/></a>

Nach dem <BODY> Tag

RollOver zu Seite im Popup-Fenster:

Code für den <BODY> Bereich

function Obj125_1 (url) {

fenster = window.open(url, "Popupfenster", "width=500, height=400, resizable=yes");
fenster.focus(); return false;

}

</script>
<a href="files/demo.html" target="_blank" onclick="return Obj125_1(this.href);">

<img src="images/btn_demo-p.gif"

onmouseover="this.src='images/btn_demo-a.gif'" onmouseout="this.src='images/btn_demo-p.gif'"></a>

Nach dem <BODY> Tag

RollOver zu Bild im Popup-Fenster:

Code für den <BODY> Bereich

function Obj125_2 (url) {

fenster = window.open(url, "Popupfenster", "width=500, height=400, resizable=yes");
fenster.focus(); return false;

}

</script>
<a href="images/demo.jpg" target="_blank" onclick="return Obj125_2(this.href);">

<img src="images/demo_btn-p.gif"

onmouseover="this.src='images/btn_demo-a.gif'" onmouseout="this.src='images/btn_demo-p.gif'"></a>

Nach dem <BODY> Tag

» nach oben «