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.
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.
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>
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>
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>
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>
» nach oben «