JavaScript Button - Website X5 Helpsite

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

Besucher Statistik
» 1 Online
» 86 Heute
» 132 Gestern
» 679 Woche
» 2530 Monat
» 26654 Jahr
» 312568 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
Direkt zum Seiteninhalt

JavaScript Button

Scripte > Snipped
Buttons und Textlinks mit Javascript
Javascript-Button kommen häufiger zur Anwendung, als man denkt. Der Vorteil dieser Button besteht darin, dass diese verhältnismäßig einfach srukturiert sind und meist identische Funktionen aufweisen.
Einige hier gezeigte Button zeigen keine Wirkung, da diese nur zur Erweiterung in kompletten Funktions-Skripten zur Anwendung kommen oder die Grundvoraussetzungen dazu nicht erfüllt sind.
Es sind nur Beispiel-Button, die auch teilweise in Kombination ausgeführt werden können oder sogar müssen.
Einige Funktionen können variieren oder ausgetauscht werden, führen aber die gleiche Funktion aus z. B. :
<input type="button" ....." ;> und <button type="button" ...... >... </button>
HTML-Code einfach nur kopieren und an vorgesehener Stelle im Body-Bereich <body>....</body> einfügen und Textelemente anpassen.

Die hier gezeigten Elemente sind Standard formatiert und können der Homepage angepasst werden:
Download Button
Code für den <HEAD> Bereich
<style>
.js-button { font-family: tahoma, arial; font-size: 12px; font-weight: normal;
background-color: #e1e1e1; border: 1px solid #000; border-radius: 5px;
padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; }
</style>

Zurück:




Code für den <BODY> Bereich
<!-- zurück Button (1) -->
<input type="button" class="js-button" value="zurück Button (1)" onclick="history.back();">

<!-- zurück Button (2) -->
<button type="button" class="js-button" onclick="history.back();">zurück Button (2)</button>

<!-- Doppelklick zurück -->
<input type="button" class="js-button" value="Doppelklick zurück" onDblClick="history.back();">

<!-- 3 Seiten zurück -->
<input type="button" class="js-button" value="3 Seiten zurück" onclick="history.go(-3);">

Vorwärts:




Code für den <BODY> Bereich
<!-- vorwärts Button (1) -->
<input type="button" class="js-button" value="vorwärts Button (1)"
onclick="history.forward();">

<!-- vorwärts Button (2) -->
<button type="button" class="js-button" onclick="history.forward();"> vorwärts Button (2) </button>

<!-- Doppelklick vorwärts -->
<input type="button" class="js-button" value="Doppelklick vorwärts"
onDblClick="history.forward();">

<!-- 3 Seiten vorwärts -->
<input type="button" class="js-button" value="3 Seiten vorwärts" onclick="history.go(3);">

Verlinkung:







Code für den <BODY> Bereich
<!-- Link im gleichen Fenster (1) -->
<input type="button" class="js-button" value="Link im gleichen Fenster (1)"
onclick="location.href='wsX5Obj/Obj_FILE/demo-newsite.html';">

<!-- Link im gleichen Fenster (2) -->
<input type="button" class="js-button" value="Link im gleichen Fenster (2)"
onClick="window.location='wsX5Obj/Obj_FILE/demo-newsite.html'">

<!-- Link im neuen Fenster -->
<input type="button" class="js-button" value="Link im neuen Fenster"
onclick="window.open ('wsX5Obj/Obj_FILE/demo-newsite.html'); return false;">

<!-- Link im Popup Fenster (1) -->
<input type="button" class="js-button" value="Link im Popup Fenster (1)"
onClick="window.open (
'wsX5Obj/Obj_FILE/demo-popup.html',
'Titel PopUp',
'width=500,height=500,scrollbars'
);
return false">

<!-- Link im Popup Fenster (2) -->
<script>
var win=null;
function NewWindow(mypage,myname,w,h,pos,infocus) {
if(pos=="random") {
myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;
mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;
}
if(pos=="center") {
myleft=(screen.width)?(screen.width-w)/2:100;
mytop=(screen.height)?(screen.height-h)/2:100;
}
else if((pos!='center' && pos!="random") || pos==null) {
myleft=0;
mytop=20;
}
settings="width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ", scrollbars=yes, location=no, directories=no, status=no, menubar=no, toolbar=no, resizable=no";
win=window.open(mypage,myname,settings);
win.focus();
}
</script>
<input type="button" class="js-button" name="Popup"
value="Link im Popup Fenster (2)" onClick="NewWindow(
'wsX5Obj/Obj_FILE/demo-popup.html',
'popup',
'500',
'500',
'center',
'front'
);">

<!-- Lokaler Verweis: Feedback abgeben -->
<input type="button" class="js-button" value="Lokaler Verweis: Feedback abgeben"
onclick="location='#Obj77_Anker'">

<!-- Seiten-Link mit Bestätigung -->
<input type="button" class="js-button" value="Seiten-Link mit Bestätigung"
onclick="javascript:if (confirm('Willst Du wirklich in mein Gästebuch schreiben?')) {
location.href='wsx5sys06.php'
}">

Download:



Code für den <BODY> Bereich
<!-- Farbcode im gleichen Fenster -->
<input type="button" class="js-button" value="Farbcode im gleichen Fenster"
onclick="location.href='http://www.domain.tld/file.pdf'">

<!-- Farbcode im neuen Fenster -->
<input type="button" class="js-button" value="Farbcode im neuen Fenster"
onclick="window.open('http://www.domain.tld/file.pdf');">

<!-- Download Musik Mond-Melody -->
<input type="button" class="js-button" value="Download Musik Mond-Melody"
onclick="location.href='wsX5Obj/Obj_MED/demo-mond.mid'">

<!-- Download Video Big Bug Bunny -->
<input type="button" class="js-button" value="Download Video Big Bug Bunny"
onclick="location.href='wsX5Obj/Obj_MED/big_buck_bunny.avi'">

Drucken:



Code für den <BODY> Bereich
<!-- Seite drucken (1) -->
<input type="button" class="js-button" value="Seite drucken (1)" onClick="self.print()">

<!-- Seite drucken (2) -->
<script>
document.getElementById('print').onclick = function() {
window.print();
}
</script>
<button class="js-button" id="print">Seite drucken (2)</button>

<!-- Drucken mit Rückfrage -->
<script>
function printPage() {
focus();
if (window.print) {
jetztdrucken = confirm('Seite drucken ?');
if (jetztdrucken) window.print();
}
}
</script>
<button class="js-button" onClick="printPage()">Drucken mit Rückfrage</button>

Fenster öffnen:




Code für den <BODY> Bereich
<!-- Neues leeres Fenster öffnen -->
<button class="js-button" id="emptyWin">Neues leeres Fenster öffnen</button>
<script>
document.getElementById('emptyWin').onclick = function() {
window.open('','');
}
</script>

<!-- Dokument im Popup Fenster -->
<button class="js-button" id="popupWin">Dokument im Popup Fenster</button>
<script>
document.getElementById('popupWin').onclick = function() {
var winURL = 'wsX5Obj/Obj_FILE/demo-popup.html';
var winName = 'popupWin';
var winSize = 'width=500, height=500, scrollbars=no';
var ref = window.open(winURL, winName, winSize);
}
</script>

<!-- Dokument im ZOOM Fenster -->
<input class="js-button" type="button" value="Dokument im ZOOM Fenster"
onClick="Zoom()">
<script>
function Zoom(){
window.open("wsX5Obj/Obj_FILE/demo-zoom.html",
"fensterln", "width=100, height=100")
}
</script>
<!--Folgendes Script gehört in den BODY der ZOOM-Datei (hier: demo-zoom.html)-->
<script>
for(var i = 100; i < 500; i++)
self.resizeTo(i, 0)
for(var i= 100; i < 500; i++)
self.resizeTo(550, i)
</script>  

<!-- Fenster öffnen/schließen-->
<button class="js-button" id="openWin">Fenster öffnen/schließen</button>
<script>
var myWin = new Object;
myWin.prop = "width=500, height=300, scrollbars=no";
myWin.file = "wsX5Obj/Obj_FILE/demo-popup.html";
document.getElementById('openWin').onclick = function () {
if (this.innerHTML == "Fenster öffnen/schließen") {
myWin.ref = window.open(myWin.file, "", myWin.prop);
this.innerHTML = "Fenster schließen";
}
else if (this.innerHTML == "Fenster schließen") {
// alert('Fenster geschlossen ' + myWin.ref); // ggf. Meldung ausgeben
myWin.ref.close();
this.innerHTML = "Fenster öffnen/schließen";
}
}
</script>

Fenster schließen:





Code für den <BODY> Bereich
<!-- Aktuelles Fenster schließen (1) -->
<input type="button" class="js-button" value="Aktuelles Fenster schließen (1)"
onclick="self.close();">

<!-- Aktuelles Fenster schließen (2) -->
<input type="button" class="js-button" value="Aktuelles Fenster schließen (2)"
onclick="close();">

<!-- Aktuelle Fenster schließen (3) -->
<input type="button" class="js-button" value="Aktuelles Fenster schließen (3)"
onclick="window.close();">

<!-- Kind Fenster schließen -->
<input type="button" class="js-button" value="Kind Fenster schließen"
onclick="windowname.close();">

<!-- Eltern Fenster schließen -->
<input type="button" class="js-button" value="Eltern Fenster schließen"
onclick="window.opener.close();">

Wechsel-Button:









Ändert die Farbe beim Klick/DoppelKlick:



Ändert den Button-Text beim Klick:
Code für den <BODY> Bereich
<!-- Image wechseln (Image zurück Klick) -->
<input type="button" class="js-button"
value="Image wechseln (Image zurück Klick)"
onclick="document.images.change.src='wsX5Obj/Obj_IMG/car_02xs.jpg'">
<img id="change" src="wsX5Obj/Obj_IMG/car_01xs.jpg"
onclick="document.images.change.src='wsX5Obj/Obj_IMG/car_01xs.jpg';">

<!-- Image Anzeigen/Verstecken -->
<input type="button" class="js-button" value="Image Anzeigen/Verstecken"
onclick="if(document.getElementById('visit').style.visibility=='visible')
document.getElementById('visit').style.visibility='hidden';
else document.getElementById('visit').style.visibility='visible'"><br>
<span id="visit" style="visibility: hidden">
<img src="wsX5Obj/Obj_IMG/car_03xs.jpg">
</span>
<!-- visibility: visible = Anzeige, visibility: hidden = Nichtanzeige
display: block = Anzeige, display: none = Nichtanzeige -->

<!-- Ändert die Farbe beim Klick/DoppelKlick: -->
<input type="button" class="js-button" value="Klick-Doppelklick Button"
onClick="this.style.backgroundColor='#0000FF'"
onDblClick="this.style.backgroundColor='#FF0000'">

<!-- Ändert den Button-Text beim Klick: -->
<script>
var a=1;
function DKlick() {
if (a==1) {
document.Beschriftung.dblKlick.value="V I E L E N  D A N K";
a=0;
return;
}
if (a==0) {
document.Beschriftung.dblKlick.value="Klick MICH an";
a=1;
return;
}
}
</script>
<form name="Beschriftung">
<input type="button" class="js-button" value="Klick MICH an" name="dblKlick"
onClick="DKlick();">
</form>

Seite aktualisieren:


Code für den <BODY> Bereich
<!-- Aktualisieren der Seite (1) -->
<input type="button" class="js-button" value="Aktualisieren der Seite (1)"
onclick="history.go(0)">

<!-- Aktualisieren der Seite (2) -->
<input type="button" class="js-button" value="Aktualisieren der Seite (2)"
onclick="location.reload();">

Senden/Absenden:



Code für den <BODY> Bereich
<!-- Sendebutton mit Rückfrage -->
<input type="submit" class="js-button" value="Senden bestätigen"
onClick="return confirm('Sind Sie sicher?')">

<!-- Doppelte Versenden verhindern -->
<script>
function OneSend() {
document.all["OSend"].value="Formular gesendet";
document.all["OSend"].disabled="disabled";
return true;
}
</script>
<input type="button" class="js-button" value="Anfrage senden" id="OSend"
onClick="return OneSend();">

<!-- Senden mit Erfolg-Ausgabe -->
<script>
function OneKlick() {
document.all["OKlick"].outerHTML =
'<input type="button" value="Erfolgreich gesendet" disabled>'
}
</script>
<input type="button" class="js-button" id="OKlick" value="Jetzt absenden" onClick="OneKlick()">

E-Mail Funktionen:




Ihre E-Mail Adresse:
Code für den <BODY> Bereich
<!-- Einfache E-Mail schreiben -->
<input type="button" class="js-button" value="E-Mail schreiben"
onclick="location.href='mailto:kontakt@home-wiekau.de'">

<!-- E-Mail mit Textvorbelegung -->
<input type="button" class="js-button" value="E-Mail an einen Freund"
onclick="parent.location='mailto:kontakt@home-wiekau.de?Subject=Webseitenempfehlung&amp;Body=Hallo, ich habe eine tolle Seite mit vielen erstklassigen Scripts und vielen Tipps, Tricks und Informationen gefunden. Die URL lautet http://www.x5forum.home-wiekau.de. Schau doch mal dort vorbei. Es lohnt sich! Bis bald.'">

<!-- Prüft ob es eine richtige E-Mail-Adresse ist -->
<script>
function checkemail() {
var str=document.validation.emailcheck.value;
var filter=/^(\w+(?:\.\w+)*)@((?:\w+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (filter.test(str) ==true) {
alert("OK");
} else {
alert("Bitte eine gültige E-Mail-Adresse eingeben!")
}
}
</script>
<form name="validation">
<strong>Ihre E-Mail Adresse:</strong><br>
<input type="text" value="" size="25" name="emailcheck"
style="background-color: #EEF6E9; border: 1px solid #000; height: 20px; padding: 10px;">
<input type="button" class="js-button" value="E-Mail-Adresse prüfen" onClick="checkemail()">
</form>

Ausgaben/Meldungen:




Code für den <BODY> Bereich
<!-- Textmeldung ohne Formatierung -->
<input type="button" class="js-button" value="Textmeldung ohne Formatierung" onClick="alert(
'Die Meldung: Hier ein Text nur zur Demonstration. Diese Funktion ist deshalb eingeschränkt.'
)">

<!-- Textmeldung mit Formatierung -->
<input type="button" class="js-button" value="Textmeldung mit Formatierung" onClick="alert(
'\t Die Meldung: \n Hier ein Text, nur zur Demonstration. \n Diese Funktion ist deshalb eingeschränkt.'
)">

<!-- Text-Fenster mit Doppelklick öffnen -->
<input type="button" class="js-button" value="Text-Fenster mit Doppelklick öffnen" onDblClick="alert(
'Hier könnte jetzt ein Text von Dir stehen, \n auch Mehrzeilig.'
)">

<!-- Anfrage mit Antworttext -->
<script>
function Geschenk() {
if (confirm("Bitte, schenkst Du mir Dein Auto?")==true) {
alert("Das finde ich ja echt toll.");
} else {
alert("War mir klar, Du bist gemein.");
}
}
</script>
<input type="button" class="js-button" value="Bestätigung Auto-Geschenk" onClick='Geschenk();'>

Daten ermitteln:




























=

=

Farbeingabe: #
Code für den <BODY> Bereich
<!-- Fenstergröße ermitteln -->
<script>
function Check() {
alert("Die aktuelle Fenstergröße\n Breite: " +
document.body.offsetWidth+"  Höhe: "+
document.body.offsetHeight + " Pixel")
}
</script>
<input type="button" class="js-button" value="Fenstergröße ermitteln" onClick="Check()">

<!-- User Agent anzeigen -->
<input type="button" class="js-button" value="User Agent anzeigen"
onClick="alert(navigator.userAgent)">

<!-- Browser Name anzeigen -->
<input type="button" class="js-button" value="Browser Name anzeigen"
onClick="alert(navigator.appName)">

<!-- Browser Codename anzeigen -->
<input type="button" class="js-button" value="Browser Codename anzeigen"
onClick="alert(navigator.appCodeName)">

<!-- Browser Version anzeigen -->
<input type="button" class="js-button" value="Browser Version anzeigen"
onClick="alert(navigator.appVersion)">

<!-- Plattform anzeigen -->
<input type="button" class="js-button" value="Plattform anzeigen"
onClick="alert(navigator.platform)">

<!-- Language anzeigen -->
<input type="button" class="js-button" value="Language anzeigen"
onClick="alert(navigator.language)">

<!-- Location Hostname anzeigen -->
<input type="button" class="js-button" value="Location Hostname anzeigen"
onClick="alert(window.location.hostname)">

<!-- Location Host anzeigen -->
<input type="button" class="js-button" value="Location Host anzeigen"
onClick="alert(window.location.host)">

<!-- Location Href anzeigen -->
<input type="button" class="js-button" value="Location Href anzeigen"
onClick="alert(window.location.href)">

<!-- Location Pathname anzeigen -->
<input type="button" class="js-button" value="Location Pathname anzeigen"
onClick="alert(window.location.pathname)">

<!-- Location Protcol anzeigen -->
<input type="button" class="js-button" value="Location Protcol anzeigen"
onClick="alert(window.location.protocol)">

<!-- Screen Breite Total anzeigen (px) -->
<input type="button" class="js-button" value="Screen Breite Total anzeigen (px)"
onClick="alert(screen.width)">

<!-- Screen Höhe Total anzeigen (px) -->
<input type="button" class="js-button" value="Screen Höhe Total anzeigen (px)"
onClick="alert(screen.height)">

<!-- Nutzbare Screen Breite (px) -->
<input type="button" class="js-button" value="Nutzbare Screen Breite (px)"
onClick="alert(screen.availWidth)">

<!-- Nutzbare Screen Höhe (px) -->
<input type="button" class="js-button" value="Nutzbare Screen Höhe (px)"
onClick="alert(screen.availHeight)">

<!-- Pixeltiefe anzeigen (px) -->
<input type="button" class="js-button" value="Pixeltiefe anzeigen (px)"
onClick="alert(screen.pixelDepth)">

<!-- Farbtiefe anzeigen (px) -->
<input type="button" class="js-button" value="Farbtiefe anzeigen (px)"
onClick="alert(screen.colorDepth)">

<!-- Letzte Aktualisierung anzeigen -->
<input type="button" class="js-button" value="Letzte Aktualisierung anzeigen"
onClick="alert(document.lastModified)">

<!-- Anzahl Images anzeigen -->
<input type="button" class="js-button" value="Anzahl Images anzeigen"
onClick="alert(document.images.length)">

<!-- Anzahl Links anzeigen -->
<input type="button" class="js-button" value="Anzahl Links anzeigen"
onClick="alert(document.links.length)">

<!-- Anzahl Forms anzeigen -->
<input type="button" class="js-button" value="Anzahl Forms anzeigen"
onClick="alert(document.forms.length)">

<!-- Anzahl Verläufe anzeigen -->
<input type="button" class="js-button" value="Anzahl Verläufe anzeigen"
onClick="alert(window.history.length)">

<!-- Anzahl Frames anzeigen -->
<input type="button" class="js-button" value="Anzahl Frames anzeigen"
onClick="alert(window.frames.length)">

<!-- Referrer anzeigen -->
<input type="button" class="js-button" value="Referrer anzeigen"
onClick="alert(document.referrer)">

<!-- CSS Darstellungsmodus -->
<input type="button" class="js-button" value="CSS Darstellungsmodus"
onClick="alert(document.compatMode)">

<!-- Seitentitel anzeigen -->
<input type="button" class="js-button" value="Seitentitel anzeigen"
onClick="alert(document.title);">

<!-- Dokument Status ausgeben -->
<script>
function Source() {
if (window.location.protocol=="file:") {
document.dStat.anzeige.value="Lokal";
}
if (window.location.protocol=="http:") {
document.dStat.anzeige.value="Extern";
}
}
</script>
<form name="dStat">
<input type="button" class="js-button" value="Dokument Status" onClick="Source()"> =
<input type="text" value="" name="anzeige" size="7">
</form>

<!-- Browser Status ausgeben -->
<script>
function Status() {
if (navigator.onLine == true) {
document.bStat.anzeige.value="Online";
} else {
document.bStat.anzeige.value="Offline";
}
}
</script>
<form name="bStat">
<input type="button" class="js-button" value="Browser Status" onClick="Status()"> =
<input type="text" value="" name="anzeige" size="10">
</form>

<!-- Farbanzeiger -->
<script>
function farbanzeiger(A, B) {
if (B.length == 6) {
document.getElementById(A).style.backgroundColor="#" + B;
}
}
</script>
Farbeingabe: #
<input onKeyUp="farbanzeiger('farbe',this.value);" size="6" maxlength="6">
<input id="farbe" type="button" disabled="disabled" value="&nbsp;&nbsp;&nbsp;">

Diverse Sample:


Wähle den Button:


Gedrückten Button markieren:


So blinkt der Text.


Fortschrittsbalken in 5 Stufen
(erweiterbar)



Herzlich willkommen
auf unserer Homepage
der Website X5 - Helpsite
Code für den <BODY> Bereich
<!-- Zähler Button -->
<script>
var nn=0, pause=100;
function zaehler() {
document.count.Button.value=Math.floor(nn)+"%";
nn++;
if  (nn <= 99) {
setTimeout("zaehler()",pause);
} else {
document.count.Button.value="...fertig (Start)";
nn=0;
}
}
</script>
<form name="count">
<input type="button" class="js-button" value="Zähler Button" name="Button"
onclick="this.blur(); zaehler()">
</form>

<!-- Button ermitteln -->
<strong>Wähle den Button:</strong><br>
<script>
function Test(Name) {
alert("Sie haben Button " + Name + " gedrückt");
}
</script>
<input type="button" class="js-button" value="Btn 1" onClick="Test('EINS')">
<input type="button" class="js-button" value="Btn 2" onClick="Test('ZWEI')">
<input type="button" class="js-button" value="Btn 3" onClick="Test('DREI')">

<!-- Gedrückten Button markieren -->
<strong>Gedrückten Button markieren:</strong><br>
<script>
function taste(A,B) {
var item = A.toString();
if (document.getElementById(item).value == B) {
document.getElementById(item).value = A;
} else {
document.getElementById(item).value = B;
}
}
</script>
<input type=button class="js-button" id="Mann" value="Mann"
onClick="taste('Mann' , '&#187; Mann');">
<input type=button class="js-button" id="Kind" value="Kind"
onClick="taste('Kind' , '&#187; Kind &#171;');">
<input type=button class="js-button" id="Frau" value="Frau"
onClick="taste('Frau' , 'Frau &#171;');">

<!-- So blinkt der Text -->
<strong id="bText">So blinkt der Text.</strong>
<script>
var aktiv = false;
function blink() {
var h = "0" + Math.round (Math.random () * 15).toString (16);
h = "0" + Math.round (Math.random () * 255).toString (16) + h.substring (h.length - 2);
h = "0" + Math.round (Math.random () * 255).toString (16) + h.substring (h.length - 4);
document.getElementById("bText").style.color= '#' + h.substring (h.length - 6);
aktiv = window.setTimeout ("blink()", 600); // Blink-Geschwindigkeit
}
function blinkStop() {
if (aktiv) {
window.clearTimeout(aktiv);
}
}
</script><br>
<input type="button" class="js-button" value="Blink" onClick="blink();">
<input type="button" class="js-button" value="Stopp" onClick="blinkStop();">

<!-- Fortschrittsbalken in 5 Stufen -->
<strong>Fortschrittsbalken in 5 Stufen</strong><br>(erweiterbar)<br>
<progress max="5" value="" id="bar"></progress>
<script>
var progressBar = document.getElementById('bar');
function updateProgress(newValue) {
progressBar.value = newValue;
}
</script><br>
<input type="button" class="js-button" value="1" name="" onClick="updateProgress('1')">
<input type="button" class="js-button" value="2" name="" onClick="updateProgress('2')">
<input type="button" class="js-button" value="3" name="" onClick="updateProgress('3')">
<input type="button" class="js-button" value="4" name="" onClick="updateProgress('4')">
<input type="button" class="js-button" value="5" name="" onClick="updateProgress('5')">

<!-- CSS Farbwechsel -->
<style>
.all { font-size:14px; font-weight:bold; text-align:center; }
.rot { background-color:red;  color:#000;}
.yellow { background-color:yellow; color:#000;}
</style>
<script>
function farbwechselClass() {
var elementList = document.getElementsByClassName("all rot");
for (var i = 0; i < elementList.length; i++) {
elementList[i].className = 'all yellow';
}
}
</script>
<div class="all rot">Herzlich willkommen</div>
<div class="all rot">auf unserer Homepage</div>
<div class="all rot">der Website X5 - Helpsite</div>
<input type="button" class="js-button" value="CSS Farbe wechseln"
onClick="farbwechselClass();">

Image Button:


MouseOver Button:

X5 Demo-Image


Text Link Button:

Image Link Button:


zum Gästebuch


Zurück Button:


   zurück


Alle Imagedateien können mit der rechten Maustaste (Grafik speichern unter...) herunter geladen werden!

Code für den <BODY> Bereich
<!-- MouseOver Button -->
<a href="wsX5Obj/Obj_FILE/demo-return.html">
<img src="wsX5Sys/btn_demo-p.gif" alt="X5 Demo-Image"
onmouseover="this.src='wsX5Sys/btn_demo-a.gif'"
onmouseout="this.src='wsX5Sys/btn_demo-p.gif'">
</a>

<!-- Text Link Button -->
<button class="js-button" onClick="location='wsx5sys11.php';"> Newsletter anmelden </button>

<!-- Image Link Button -->
<input alt="X5 Demo-Image" type="image" src="wsX5Sys/arrow_right-grey.png"
onClick="location='wsx5sys06.php'; return false;"><br>
<a href="wsx5sys06.php"><b>zum Gästebuch</b></a>

<!-- Zurück Button -->
<input type="image" src="wsX5Sys/arrow_left-grey.png" onClick="history.back()"><br>
<b>&nbsp;&nbsp;&nbsp;zurück</b>
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