Blinkender Rahmen um Bild

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Blinkender Rahmen um Bild

Beitrag von Hape »

Hier das Script:

Code: Alles auswählen

<script type="text/javascript">
var imgList = [];

function createImgList() {
	// create an array of images to apply the border effect
	var imgs = document.body.getElementsByTagName("img");
	for (var i=0; i < imgs.length; i++) {
		if (imgs[i].className == "border0") {
			imgList.push(imgs[i]);
		}
	}
	borderchange(1);
}

function borderchange(n) {
	for (var i=0; i < imgList.length; i++) {
		imgList[i].className = "border" + n;
	}
	setTimeout(function () {borderchange(Math.abs(n-1));},1000);
}

window.onload = createImgList;
</script>
Hier der CSS-Teil:

Code: Alles auswählen

<style type="text/css">
.border1 {
	border: 4px solid red;
}
.border0 {
	border: 4px solid green;
}
</style>
Code zur Darstellung des Bildes:

Code: Alles auswählen

<img class="border0" src="URL zum Bild" />
Hier die Demoseite: http://hapes-javascript-demo-page.hpage ... men-2.html

Antworten