Link-Button - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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.
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
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>

mit CSS-Formatierung:
<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>

<button class="MyBTN" onClick="location='http://domain.tld/seite.html'; return false;">
   weiter lesen...
</button>
  |  
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 type="text/javascript">
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 type="text/javascript">
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...
Feedbacks zu ""


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

© 2009 - 2019





Besucher Statistik
» 3 Online
» 150 Heute
» 387 Gestern
» 795 Woche
» 5221 Monat
» 5221 Jahr
» 332977 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt