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

Eine zufällige Auswahl von „Bausteinen” aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Markierte Checkbox farbig hervorheben

PHP - Wort in einem Text markieren

JavaScript - Seite autom. jede Minute neu laden

MySQL - Datensatz Wert erhöhen