Lauf-Button - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Besucher Statistik
» 1 Online
» 2 Heute
» 49 Gestern
» 2 Woche
» 2139 Monat
» 21493 Jahr
» 307407 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
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>
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


          CAPTCHA
          Vielen Dank für Dein Feedback.
          Logo Host Europe
          Button Spenden

          © 2009 - 2021

          Hosting by
          Zurück zum Seiteninhalt