JavaScript - Eine Gruppe von Bildern markieren

-


<style>

div.bilder {
 
margin5px;
 
displayInline-Block;
 
width160px;
 
height120px;
 
borderSolid Thick Black;
 
box-shadow1px 1px 6px 0px #C0C0C0;
}

div.markierung0 {
 
borderInset Thick Royalblue;
}

div.markierung1 {
 
borderInset Thick Gold;
}
</
style>

<
script>
function 
gruppeMarkieren(nr) {
 var 
matches document.getElementsByClassName("G" nr);
 for (var 
0matches.lengthi++) {
  
matches[i].classList.toggle("markierung" nr);
 }
}
</
script>

 </
head>
<
body>

<
p><input type="button" value="Gruppe 1" onClick="gruppeMarkieren('0')"> - 
<
input type="button" value="Gruppe 2" onClick="gruppeMarkieren('1')"></p>

<
div class="bilder G0"><img src="01.jpg"></div>
<
div class="bilder G1"><img src="09.jpg"></div>
<
div class="bilder G0"><img src="02.jpg"></div>
<
div class="bilder G0"><img src="03.jpg"></div>
<
div class="bilder G0"><img src="04.jpg"></div>
<
div class="bilder G1"><img src="06.jpg"></div>
<
div class="bilder G1"><img src="07.jpg"></div>
<
div class="bilder G0"><img src="05.jpg"></div>
<
div class="bilder G1"><img src="08.jpg"></div>
<
div class="bilder G0"><img src="10.jpg"></div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<map> Verweis-sensitive Grafik

CSS - Vertikale Schrift

PHP - Verzeichnis und alle Dateien darin löschen

JavaScript - Zeit-Differenz ermitteln

MySQL - Zeichenkette ersetzen mit REPLACE

Plug-ins nötig
Man muss schon einen guten Grund haben, um ein Plug-ins (Browser-Erweiterung) zu rechtfertigen. Denn oft haben die Besucher das entsprechende Plug-in nicht und wollen es auch nicht runterladen, abgesehen davon, dass viele Besucher gar nicht wissen, was ein PlugIn ist. Wenn man trotzdem nicht auf Plug-in verzichten möchte, sollte man zumindest eine Alternative anbieten, sonst bekommen viele potenzielle Besucher die Seite nicht zu sehen.