JavaScript / Tipps / Bausteine 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / Archiv

Senden Sie uns Ihren JavaScript-Baustein zu  
SiteMap - Alle 229 JavaScript Bausteine anzeigen

 

• Buttonwechsel bei MouseOver[IE|M|O]

<a href="#"
 onMouseOver="pic1.src='email2.gif';"
 onMouseout="pic1.src='email1.gif';">
 <img name="pic1" src="email1.gif" border=0>
</a>
Beispiel:  

 

• Tabellenzellen einfärben[IE|M|O]

Jede zweite Zeile in einer Tabelle bekommt eine andere Hintergrundfarbe. 
<table>
 <script type="text/javascript">
 // Tabellenzeilen einfärben
  i=1;
  while(i < 20) {
   color = (i % 2) ? "FF0000" : "0000FF";
   document.write( "<tr><td style=\"background-color: #" + color + "\"> Text </td></tr>");
   i++;
  }
 </script>
</table>
Beispiel anzeigen

 

• Fehlermeldung ausgeben[IE|O]

Eine Fehlermeldung ausgeben wenn zum Beispiel ein Bild nicht angezeigt werden kann. 
<img src="keinbild.jpg" onError="document.write('Das Bild kann nicht angezeigt werden!');">

 

• JS-Funktion anzeigen nur wenn JavaScript aktiviert ist[IE|M|O]

Die Lösung ist ganz einfach :-) 
<script type="text/javascript">
// JS-Funktion anzeigen nur wenn JavaScript aktiviert ist
 document.write('<a href="javascript: funktion();">Funktion</a>');
</script>

 

• Darstellungsmodus überprüfen[IE|M|O]

Darstellungsmodus der Webseite anzeigen. 
<a href="javascript:alert(document.compatMode);">Darstellungsmodus</a>
Beispiel: Darstellungsmodus

 

• Alternatives Bild anzeigen[IE]

<img src="keinbild.jpg" onError="pic1.src='alternatives_bild.gif';"  name="pic1">

 

• Suchen und Ersetzen [IE|M|O]

<script type="text/javascript">
// Suchen und Ersetzen
 var a = "Webmaster-Total.de";
 a = a.replace (/Webmaster/gi,"Homepage");
 alert (a);

// Ausgabe: Homepage-Total.de
</script>
  : (keine Angabe!) sucht bis zur ersten gefundenen Übereinstimmung
g: Globale Suche
i: Ignoriert Groß-und Kleinschreibung
gi: Kombination aus g und i

 

• Eingabefeld bei Fehleingabe farbig markieren [IE|M|O]

<script type="text/javascript">
// Eingabefeld bei Fehleingabe farbig markieren
function Test() {
 if (document.eingabe.Name.value == ""){
  document.getElementById("Name").style.backgroundColor="#FFFFB9";
  alert("Bitte geben Sie einen Namen ein!");
 }
 else {
  alert("Hallo "+document.eingabe.Name.value);
 }
}
</script>

<form name="eingabe">
 Name: <input type=text name="Name" id="Name"
 onFocus="this.style.backgroundColor='#FFFFFF';" style="border: solid 1px #000000;"> 
 <input type=button value="Test" onClick="Test();">
</form>
Beispiel         Name:

 

• Fenster mit Format öffnen (3) [IE|M|O]

<script type="text/javascript">
 // Fenster mit Format öffnen
 // Fenster ohne Scrolleisten und in der Größe nicht änderbar
 function f1(a,b,h){window.open(a,"x","width="+b+",height="+h)}
 
 // Fenster mit Scrolleisten und in der Größe änderbar
 function f2(a,b,h){window.open(a,"x","width="+b+",height="+h+",scrollbars,resizable")}
</script>

Aufruf der Funktion mit:
<a href="javascript:f1('seite.htm','800','600')">Seite</a>
oder mit:
<a href="javascript:f2('seite.htm','800','600')">Seite</a>

 

• Checkbox mit JavaScript aktivieren [IE|M|O]

Hier im Beispiel soll die zweite Checkbox beim anklicken der ersten Checkbox aktiviert werden. 
<form name=Form>
 <input type=checkbox name="box1"
  onClick="if (document.Form.box2.checked == false) 
 document.Form.box2.click()"> Auto
 <input type=checkbox name="box2"> Haus
</form>
Beispiel: Auto Haus

 

• Funktionsaufruf über einen Tastendruck [IE|M|O]

Dieses Beispiel startet eine JS-Funktion über einen Tastendruck.
Den "Tastencode" entnehmen Sie aus der Tabelle ASCII, Sonderzeichen, Unicode, ... 
<script type="text/javascript">
// Funktionsaufruf über einen Tastendruck
document.onkeydown = Tastendruck;

function Tastendruck (Evenement) {
  if (!Evenement)
    Evenement = window.event;
  if (Evenement.which) {
    Tastencode = Evenement.which;
  } else if (Evenement.keyCode) {
    Tastencode = Evenement.keyCode;
  }
 taste(Tastencode);
}

function taste(Tastencode){
 if (Tastencode == 65) { // Taste "A"
  alert("Hallo Welt!");
}
</script>

 

• Fenster bei Frameset aktualisieren [IE|M|O]

Aktualisiert ein bestimmtes Fenster in einem Frameset. 
<a href="javascript:onClick=parent.IhrFramename.location.reload();">
 Aktualisiert das Fenster
</a>

 

• Gedrückte Taste markieren [IE|M|O]

<script type="text/javascript">
// Gedrückte Taste markieren
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 id="Gurken" value="Gurken" onClick="taste('Gurken' , 'Gurken*');">  - 
<input type=button id="Paprika" value="Paprika" onClick="taste('Paprika' , '<Paprika>');"> - 
<input type=button id="Tomaten" value="Tomaten" onClick="taste('Tomaten' , '[Tomaten]');">
Beispiel: - -

 

• Funktion erst starten wenn das Bild geladen wurde[IE|O]

<script type="text/javascript">
// Funktion erst starten wenn das Bild geladen wurde
function Bild() {
 if (document.getElementById("image").complete == true) {
  alert("complete");
 }
}
</script>

<body onLoad="Bild();">

<img src="bild.gif" id="image">

 

• Bildlaufleisten mit JavaScript einfärben[IE|O|K]

<script type="text/javascript">
// Bildlaufleisten mit JavaScript einfärben
 document.getElementsByTagName("body")[0].style.scrollbarFaceColor="#C0C0FF";
 document.getElementsByTagName("body")[0].style.scrollbarTrackColor="#DEDEDE";
 document.getElementsByTagName("body")[0].style.scrollbarArrowColor="#FF0000";
 document.getElementsByTagName("body")[0].style.scrollbarHighlightColor="#FFFF00";
 document.getElementsByTagName("body")[0].style.scrollbarShadowColor="#5D61FF";
 document.getElementsByTagName("body")[0].style.scrollbar3dLightColor="#FFB62F";
 document.getElementsByTagName("body")[0].style.scrollbarDarkShadowColor="#000000";
</script>

 

• Fenstergröße und Fensterposition mit einem Link ändern[IE|M|O]

<a href="javascript:window.resizeTo(800,640);">800x640</a> - 
<a href="javascript:window.resizeTo(1024,768);">1024x768</a> - 
<a href="javascript:window.resizeTo(1280,1024);">1280x1024</a> | 

<a href="javascript:window.moveTo(0,0);">0*0</a> - 
<a href="javascript:window.moveTo(100,0);">100*0</a> - 
<a href="javascript:window.moveTo(100,50);">100*50</a>
Beispiel: 800x640 - 1024x768 - 1280x1024 | 0*0 - 100*0 - 100*50

Anmerkung: Wenn das Fenster die maximale Bildschirmgröße erreicht hat,
kann die Fensterposition nicht geändert werden.
Einschränkung: Das ändern der Fenstergröße kann in div. Browsern (z.B.: Firefox) deaktiviert werden.

 

• Bei der Eingabe eines Datums, Punkte automatisch hinzufügen[IE|M|O]

<script type="text/javascript">
// Bei der Eingabe eines Datums, Punkte automatisch hinzufügen
function punkte() {
 var zeichen = document.Form.eingabe.value.length;
 var text = document.Form.eingabe.value;
 if (zeichen == 2) {
  document.Form.eingabe.value = text+".";
 }
 if (zeichen == 5) {
  document.Form.eingabe.value = text+".";
 }
}
</script>

<form name="Form">
 Datum: <input type=text name="eingabe" size=10 onKeyUp="punkte();">
</form>
Beispiel:   Datum:

 

• Google Suche oder URL-Adresseingabe[IE|M|O]

<script type="text/javascript">
// Google Suche oder URL-Adresseingabe
function los() {
 if (document.Form.suche.value != "") {
  if (document.Form.suche.value.indexOf("www.",0) == -1) {
   location.href="http://www.google.de/search?hl=de&q=" + document.Form.suche.value;
  }
  else {
   location.href="http://"+document.Form.suche.value;
  }
 }
}
</script>

<form name="Form">
 Google-Suche oder Webadresse: <br>
 <input type=text name="suche" value="" size=35>
 <input type=button name="" value="Suche / Gehe zu ..." onClick="los()">
</form>

 

JavaScript Bausteine 9   [10]   JavaScript Bausteine 11

 

© 2000-2012 Homepage-Total.de         Kontakt — Impressum — Banner