HTML_CSS - Sparte JavaScript

springende Container

Eingetragen am 31.08.2006

Demos: springende Container JavaScript und CSS

Eine Kombination aus JavaScript und CSS!

In der CSS werden zwei Div`s mit Größe, Farbe und Position definiert. Das JavaScript steuert die Div`s.

Wenn gleich dies nur eine Spielerei ist, so überlege man die Möglichkeiten:
Legt man die Div`s übereinander, würde sich nur die Farbe ändern. Man könnte den Zeitraum erhöhen, oder in einem bestimmten Zeitraum unterschiedliche Inhalte anzeigen lassen!
Einsatz z.B. für Werbebanner, Bilder, Texte u.s.w.

Im Header muss folgendes stehen:

<script type="text/javascript">
<!--
var Blinker = window.setInterval("Blinken()",400);
function Blinken()
{
	if(document.getElementsByTagName("div")[0].style.display == "none")
	{
		document.getElementsByTagName("div")[0].style.display = "block";
		document.getElementsByTagName("div")[1].style.display = "none";
	}
	else
	{
		document.getElementsByTagName("div")[0].style.display = "none";
		document.getElementsByTagName("div")[1].style.display = "block";
	}
}
//-->
</script>
<style type="text/css">
<!--
#rot {
 background-color: #993333;
 height: 30px;
 width: 30px;
 position: absolute;
 top: 10px;
 left: 200px;
 display: block;
}

#gruen {
 background-color: #006666;
 height: 30px;
 width: 30px;
 position: absolute;
 top: 50px;
 left: 200px;
 display: none;
}
-->
</style>

Die Zahl gibt die Zeit des Wechseln in tausendstel Sekunden an.

Im Body setzt Ihr folgenden Code ein:

<div id="rot">&nbsp;</div>
<p>&nbsp;</p>
<div id="gruen">&nbsp;</div>

Bisherige Kommentare: Kommentar schreiben»