RollOver-Button - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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 der 2. Button ein wenig vom ersten abweicht. 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 type="text/javascript">
function popup (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 popup(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 type="text/javascript">
function popup (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 popup(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>
Feedbacks zu ""

Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 52 Heute
» 654 Gestern
» 706 Woche
» 23823 Monat
» 99314 Jahr
» 427070 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt