JavaScript - Eine Gruppe von Bildern markieren
-
<style>
div.bilder {
margin: 5px;
display: Inline-Block;
width: 160px;
height: 120px;
border: Solid Thick Black;
box-shadow: 1px 1px 6px 0px #C0C0C0;
}
div.markierung0 {
border: Inset Thick Royalblue;
}
div.markierung1 {
border: Inset Thick Gold;
}
</style>
<script>
function gruppeMarkieren(nr) {
var matches = document.getElementsByClassName("G" + nr);
for (var i = 0; i < matches.length; i++) {
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.
<blockquote> Block-Zitat
CSS - Aufzählungslisten einfärben
PHP - Datensätze in den Spalten einer Tabelle individuell ausgeben