RollOver-Button - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
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'">
RollOver mit Link im gleichen Fenster:
Code für den <BODY> Bereich
<a href="ordner/seite.html">
<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>
RollOver mit Link im neuen Fenster:
Code für den <BODY> Bereich
<a href="ordner/seite.html" target="_blank">
<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>
RollOver zu Seite im Popup-Fenster:
Code für den <BODY> Bereich
<script>
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>
RollOver zu Bild im Popup-Fenster:
Code für den <BODY> Bereich
<script>
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 oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt