Link-Button - Website X5 Helpsite

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

Link-Button

Scripte > Button Navigation

Eine einfache Button- oder Text-Verlinkung

Hier einige Beispiele einer Verlinkung mit einem Bild-Button oder einfachen Text.
Das entsprechende Bild für den Button muss auf dem WEB-Server in einem Verzeichnis z. B. "images" vorliegen bzw. dorthin kopiert werden.
CSS-Code (wenn vorhhanden) kopieren und in den HEAD-Bereich <head>...</head>, 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 für Unterordner.
Download Button
JavaScript-Button ohne und mit CSS-Formatierung
Code für den <BODY> Bereich
<button onClick="location='http://domain.tld/seite.html'; return false;">
   weiter lesen...
</button>
oder mit CSS
<button class="MyBTN" onClick="location='http://domain.tld/seite.html'; return false;">
  weiter lesen...
</button>

CSS für den HEAD-Bereich:
<style>
.MyBTN {
color: #7C6031; font-size: 11px; font-weight: bold; font-family: tahoma; padding: 5px; background-color: #EEF6E8; border: 1px solid #7C6031; border-radius: 5px; }
.MyBTN:hover {
background-color: #B4DA9F; border: 1px solid #7C6031; padding-left: 10px; }
</style>
  |  
Einfacher Link im gleichem Fenster
Code für den <BODY> Bereich
<a href="http://domain.tld/seite.html"><img src="images/btn_demo-p.gif"></a>
oder
<a href="http://domain.tld/seite.html"><img src="images/btn_demo-p.gif"
onmouseover="this.src='images/btn_demo-a.gif'" onmouseout="this.src='images/btn_demo-p.gif'"></a>
oder
<a href="http://domain.tld/seite.html">weiter lesen...</a>
  |     |   weiter lesen...
Einfacher Link im neuen Fenster
Code für den <BODY> Bereich
<a href="http://domain.tld/seite.html" target="_blank"><img src="images/btn_demo-p.gif"></a>
oder
<a href="http://domain.tld/seite.html" target="_blank"><img src="images/btn_demo-p.gif"
onmouseover="this.src='images/btn_demo-a.gif'" onmouseout="this.src='images/btn_demo-p.gif'"></a>
oder
<a href="http://domain.tld/seite.html" target="_blank">weiter lesen...</a>
  |     |   weiter lesen...
Einfacher Link im Popup-Textfenster
Code für den <BODY> Bereich
<!-- Das folgende JavaScript wird gundsätzlich benötigt -->
<script>
function Obj124_1 (url) {
fenster = window.open(url, "Popupfenster", "width=500, height=400, resizable=yes");
fenster.focus();
return false;
}
</script>
<a href="files/demo-popup.html" target="_blank" onclick="return Obj124_1(this.href);">
<img src="images/btn_demo-p.gif"></a>
oder
<a href="files/demo-popup.html" target="_blank" onclick="return Obj124_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>
oder
<a href="files/demo-popup.html" target="_blank" onclick="return Obj124_1(this.href);">weiter lesen...</a>
  |     |   weiter lesen...
Einfacher Link im Popup-Bildfenster
Code für den <BODY> Bereich
<!-- Das folgende JavaScript wird gundsätzlich benötigt -->
<script>
function Obj124_2 (url) {
fenster = window.open(url, "Popupfenster", "width=500, height=400, resizable=yes");
fenster.focus();
return false;
}
</script>
<a href="images/natur_06.jpg" target="_blank" onclick="return Obj124_2(this.href);">
<img src="images/btn_demo-p.gif"></a>
oder
<a href="images/natur_06.jpg" target="_blank" onclick="return Obj124_2(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>
oder
<a href="images/natur_06.jpg" target="_blank" onclick="return Obj124_2(this.href);">weiter lesen...</a>
  |     |   weiter lesen...

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