Lauf-Button - Website X5 Helpsite

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

Lauf-Button

Scripte > Button Navigation

Ein Laufbutton mit Mouseover (Kontakt me)

Ein Button, der am rechten Seitenrand augenscheinlich mitläuft und bei Mouseover sein Aussehen verändert (Bildwechsel). Real wurden zwei voneinander geringfügig abweichende Imagedateien durch den Befehl "fixed" nur in der entsprechenden Position fest verankert (siehe auch NEWS-Button auf der linken Seite). Die beiden unterschiedlichen Imagedateien müssen dazu auf dem Webserver in einem Verzeichnis z. B. "images" vorliegen.
Der Lauf-Button muss je nach Bedarf entsprechend dann positioniert werden:
position: fixed;  Image auf Position feststehend
right: 0px;       Ausrichtung am rechten Rand
top: 300px;       Abstand vom oberen Rand
HTML-Code kopieren und in den BODY-Bereich <body>....</body> der ausführenden Seite an beliebiger Stelle einfach nur 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 mit Unterordner.
Download Button
Bild Pferd
Bild Hund
Bild Hund klein
Code für den <BODY> Bereich
<div style="position: fixed; right: 0px; top: 300px;">
<a href="ordner/seite.html">
<img src="images/demo-laufbutton_p.png"
onmouseover="this.src='images/demo-laufbutton_a.png'"
onmouseout="this.src='images/demo-laufbutton_p.png'"
width="100" height="50" alt="Demo-Link" border="0">
</a>
</div>

Darstellung ohne Mouseover:
<div style="position: fixed; right: 0px; top: 300px;">
<a href="ordner/seite.html">
<img src="images/demo-laufbutton_p.png"
width="100" height="50" alt="Demo-Link" border="0">
</a>
</div>

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt