RollOver-Button - Website X5 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 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>
Feedbacks zu ""

Manfred Braak

28.06.2013, 14:37

+0 -0  

Hallo,vielen Dank für die tollen Beispiele, was man alles mit der X5 machen kann.Habe relativ wenig Ahnung von HTML usw. und möchte/muß aber doch eine einigermaßen akzeptable geschäftliche Website erstellen. Das Handbuch ist natürlich nicht besonders hilfreich, wenn es um erweitertes knowhow geht. Umso mehr freut es mich, hier fündig zu werden. Schöne Grüße aus OstfrieslandManfred J. Braak

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 - 2020




            
            Besucher Statistik
            » 2 Online
            » 15 Heute
            » 68 Gestern
            » 176 Woche
            » 1239 Monat
            » 42453 Jahr
            » 266659 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt