SELFHTML Forums-Auslese - JavaScript - Dynamische Images und Rollovers

SELFHTML Forums-Auslese JavaScript
	Forums-Auslese Dynamische Images und Rollovers
	Animierte Gifs mit verschiedenen Verweisen hinterlegen Dynamischer Austausch von Image Maps Zufälliges Einbinden von Grafiken Drei Zustände eines dynamisch grafischen Buttons

Animierte Gifs mit verschiedenen Verweisen hinterlegen

Basierend auf einem Forums-Beitrag vom 28.09.1998 von:
Andreas Bierhals, bierhals@stud.uni-hannover.de

Es ist nicht möglich, Teilbildern eines animierten Bildes einen eigenen Verweis zuzuweisen. Diesen Effekt können Sie jedoch über einen Umweg erreichen. Im Beispiel werden zwei Bilder image1.gif und image2.gif abwechselnd angezeigt. Der zum Bild gehörige Verweis wird jeweils mit gewechselt, so dass man beim Anklicken immer einen Verweis auf die aktuelle Grafik selbst erhält. Statt Verweise auf Grafiken können jedoch beliebige andere URL's als Sprungziel eingesetzt werden.

<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!--

  image1 = new Image();
  image1.src = "image1.gif";
  image2 = new Image();
  image2.src = "image2.gif";

function picture1()
{
  window.document.bild.src=image1.src;
  window.document.links[0].href="image1.gif";
  window.setTimeout('picture2()',5000);
}

function picture2()
{
  window.document.bild.src=image2.src;
  window.document.links[0].href="image2.gif";
  window.setTimeout('picture1()',5000);
}

//-->
</script>
</head>

<body onLoad="window.setTimeout('picture2()',5000)">

<div align="center">
<h1>Dies ist ein Test</h1>
<p>
<a href="image1.gif"><image name="bild" src="image1.gif" width="150" height="50" border="0" alt="Wechselbild"></a>
</p>
</div>

</body>
</html>

Hinweis:

Dieses JavaScript-Beispiel wird nur von Browsern interpretiert, die das Image-Objekt kennen (Netscape Navigator ab Version 3 und vom MS Internet Explorer ab Version 4).

Dynamischer Austausch von Image Maps

Basierend auf Forums-Beiträgen vom 29.03.1999 von:
Martin Mueller, moonraven@gmx.de
Antje Hofmann, ah@pc-anfaenger.de

Das dynamische Austauschen von Grafiken ist auch auf verweis-sensitive Grafiken (Image Maps) anwendbar. Sinnvoll ist es jedoch nur, wenn gleichzeitig auch die hinterlegten Links geändert werden. Dies können Sie durch Verwendung von Funktionen realisieren, die anstatt einen direkten Links aufgerufen werden.

Beispiel:

<html>
<head>
<title>Dynamische Image Map</title>
<script language="JavaScript">
<!--

var map=1;
if (document.images){
        Highlight0 = new Image();
        Highlight0.src = "bild1.gif";
        Highlight1 = new Image();
        Highlight1.src = "bild2.gif"; }

function Neumap(Bildnr,Bildobjekt,Mapart)
{
 if (Mapart=="1") map=1; else map=2;
 if (document.images) {window.document.images[Bildnr].src = Bildobjekt.src;}
}

function Maplink(Sektor)
{
 if (map==1)
  {if (Sektor=="1") location.href="seite1.htm";
   if (Sektor=="2") location.href="seite2.htm";}
 if (map==2)
  {if (Sektor=="1") location.href="seite3.htm";
   if (Sektor=="2") location.href="seite4.htm";}
}

//-->
</script>

</head>
<body>

<map name="bild">
<area shape="RECT" href="JavaScript:Maplink('1')" coords="1,1,125,60">
<area shape="RECT" href="JavaScript:Maplink('2')" coords="126,0,250,60">
</map>

<img src="bild1.gif" usemap="#bild" width="250" height="60" border="0">

<p>
<a href="JavaScript:if (document.images) Neumap(0,Highlight1,2);
else Neumap(0,1,2);">Neue Image Map</a><br>
<a href="JavaScript:if (document.images) Neumap(0,Highlight0,1);
else Neumap(0,0,1);">Alte Image Map</a>
</p>

</body>
</html>

Erläuterung:

Der Austausch und das Preload der Grafiken erfolgt analog dem Austausch von dynamisch grafischen Buttons. Im Beispiel wurde lediglich der Parameter Mapart hinzugefügt.
Mittels Mapart wird das Image Map ausgewählt und in der globalen Variablen map gespeichert.

Beim Aktivieren eines Sektors der Image Map wird die Funktion Maplink aufgerufen und der entsprechende Sektor übergeben. Innerhalb der Funktion wird dann in Abhängigkeit von der Variablen map die gewünschte Seitenadresse aufgerufen.

Hinweis:

Dieses Beispiel können Sie ab den MS Internet Explorer 4.0 und dem Netscape Navigator 3.0 verwenden. Im MS Internet Explorer 3.0 erfolgt kein Austausch der Grafik, sondern nur ein Austausch der der Grafik unterlegten Links.

Zufälliges Einbinden von Grafiken

Basierend auf einem Forums-Beitrag vom 01.02.1999 von:
Leonhard Kronast, Leonhard.Kronast@gmx.de

Sie können Grafiken, z.B. Logos, nach dem Zufallsprinzip einbinden. Dazu erstellen Sie Grafiken gleicher Höhe und Breite und benennen diese mit 0.gif, 1.gif usw. Als Platzhalter fungiert eine leere 1x1-Pixel-Grafik. Mittels der Methoden Math.random() und Math.round() des Math-Objektes können Sie die Grafik zufällig bestimmen und unter Nutzung der Methoden des Image-Objektes einfügen.

Beispiel:

<html>
<head><title>zufällige Grafiken</title></head>
<body>

<img name="logo" src="blank.gif" width="100" height="100">

<script language="JavaScript">
<!--

var a=Math.random()*3;
a=Math.round(a);

if (document.images)
{
  Bild=new Image();
  Bild.src=a+".gif";
  window.document.logo.src=Bild.src;
}

//-->
</script>

</body>
</html>

Erläuterung:

Mittels Math.random() wird eine zufällige Zahl zwischen 0 und 1 ausgewählt. Diese wird mit der Anzahl der zur Auswahl stehenden Bilder minus 1 multipliziert und anschließend auf eine ganze Zahl gerundet.
Aus dieser Zahl wird dann in Bild.src=a+".gif" die zugehörige Bildbezeichnung gebildet. Anschließend wird die 1x1-Pixel-Grafik blank.gif gegen das ausgewählte Bild ausgetauscht.

Hinweis:

Dieses Beispiel können Sie ab den MS Internet Explorer 4.0 und dem Netscape Navigator 3.0 verwenden. Im MS Internet Explorer 3.0 wird bei Verwendung dieses Beispieles kein Logo angezeigt.

Drei Zustände eines dynamisch grafischen Buttons

Basierend auf einem Forums-Beitrag vom 17.05.1999 von:
Antje Hofmann, ah@pc-anfaenger.de

Das in SELFHTML vorgestellte Beispiel Dynamische grafische Buttons erfasst zwei Zustände eines Buttons. Besonders in Frames ist es jedoch oft erwünscht, der aktiven Seite einen weiteren Button als Kennzeichnung zuzuordnen. Dieser Button reagiert nicht auf die Event-Handler onMouseOver und onMouseOut, sondern wird bis zum Anklicken eines anderen Buttons dauerhaft angezeigt.

Sie erreichen dies durch die Verwendung einer Variablen die den inaktiven Button speichert.

Beispiel:

<html><head>
<title>Drei Button</title>

<script language="JavaScript">

var inaktiv="bild1";

function Wechsel(bildname,zustand)
{
if (inaktiv!=bildname)
  {
  if (zustand==1) document[bildname].src =bildname+"over.gif"; /*Zustand beim OnMouseOver*/

  if (zustand==2) document[bildname].src =bildname+"out.gif";  /*Zustand nach OnMouseOut*/
  if (zustand==3) {
     document[inaktiv].src =inaktiv+"out.gif";      /*Zustand nach OnClick*/
     document[bildname].src = bildname+"click.gif";
     inaktiv=bildname; }
  }
 return true; }

</script>

</head><body>
<a href="datei1.htm" target="main" onMouseOver="Wechsel('bild1',1);" onMouseOut="Wechsel('bild1',2);" onClick="Wechsel('bild1',3)">
<img src="bild1out.gif" name="bild1" border="0" width="60" height="30" alt="Datei1"></a>

<a href="datei2.htm" target="main" onMouseOver="Wechsel('bild2',1);" onMouseOut="Wechsel('bild2',2);" onClick="Wechsel('bild2',3)">
<img src="bild2out.gif" name="bild2" border="0" width="60" height="30" alt="Datei2"></a>

<a href="datei3.htm" target="main" onMouseOver="Wechsel('bild3',1);" onMouseOut="Wechsel('bild3',2);" onClick="Wechsel('bild3',3)">
<img src="bild3out.gif" name="bild3" border="0" width="60" height="30" alt="Datei3"></a>

</body></html>

Voraussetzungen:

Sie benötigen für jeden Verweis drei verschiedene gleichgroße Buttons. Diese Buttons erhalten je Verweis die gleiche Anfangsbezeichnung und enden mit *over, *out bzw. *click z.B. bild1over.gif, bild1out.gif und bild1click.gif.
Die Anfangsbezeichnung z.B. bild1 ist gleichzeitig der Name des Bildes. Lesen Sie dazu auch den SELFHTML - Abschnitt Namen für Grafiken.

Fügen Sie in jedem Verweis die Event-Handler onMouseOver="Wechsel('Bildbezeichnung',1)", onMouseOut="Wechsel('Bildname',2)" und onClick="Wechsel('Bildname',3)" ein. Geben sie anstelle von Bildbezeichnung Ihren festgelegten Bildnamen.

Erläuterung:

Mit dem Laden der Seite wird der Variablen inaktiv als Initialwert der Bildname des inaktiven Buttons zugewiesen. Im Beispiel handelt es sich um den ersten Verweis. Dessen Button ist von vornherein als inaktiver Button definiert (hier durch bild1click.gif).

Gleitet der Mauszeiger über einen der Verweise, ruft der Event-Handler onMouseOver die Funktion Wechsel() auf. Diese erhält als Parameter die Bezeichnung des Bildes und die Zahl 1.
In der Funktion wird anhand des Wertes der Variablen inaktiv geprüft, ob es sich nicht um den inaktiven Button handelt. Ist dies zutreffend, wird die Grafik des Bildes je nach übergebendem Zustand ersetzt. Der Dateiname des ausgewählten Bildes wird mittels Zeichenkettenverknüpfung aus den übergebenden Parametern gebildet.
Analog wirkt die Funktion nach Aufruf durch den Event-Handler onMouseOut. Hier wird das Bild erneut gewechselt.

Wird die Funktion durch den Event-Handler onClick aufgerufen, so wird zuerst das bislang inaktive Bild ausgetauscht. Der dazu erforderliche Bildname ist in der Variablen inaktiv enthalten. Anschließend wird der Button des angeklickten Verweises durch den inaktiven Button ersetzt. Zuletzt wird der Variablen der Bildname der inaktiven Bildes zugewiesen.

Hinweis:

Befinden sich Ihre Buttons in absolut positionierten Bereichen, so werden im Netscape Navigator ab der Version 4 die Bilder mit document.Layername.document.Bildname angesprochen. Lesen Sie hierzu auch den SELFHTML-Abschnitt layers - document und die Forum-Auslesebeiträge Positionierung von dynamischen grafischen Buttons und Referenzierung von Bildern in <div>-Umgebungen, Netscape vs. IE.


weiter:	Listen und Formulare
zurück:	JavaScript-Kernobjekte

SELFHTML Forums-Auslese JavaScript

Forums-AusleseDynamische Images und Rollovers

Animierte Gifs mit verschiedenen Verweisen hinterlegen

Hinweis:

Dynamischer Austausch von Image Maps

Beispiel:

Erläuterung:

Hinweis:

Zufälliges Einbinden von Grafiken

Beispiel:

Erläuterung:

Hinweis:

Drei Zustände eines dynamisch grafischen Buttons

Beispiel:

Voraussetzungen:

Erläuterung:

Hinweis:

Forums-Auslese
Dynamische Images und Rollovers