✔ Hiiiiiiiilfe

morphi79 · 25. Januar 2005

Hallo,

ich habe folgendes vor:

Ich will ein ein HTML-Dokument, das in einer Reihe nebeneinander zehnmal ein Bild enthält, das jeweils eine quadratische blaue Fläche darstellt. Jedes dieser Bilder soll beim Überfahren mit der Maus durch ein rotes Bild gleicher Größe und Form ausgetauscht werden. Wenn die Maus den Bereich des Bildes wieder verlässt, soll der Tausch rückgängig gemacht werden.

Zusätzlich soll das Dokument einen Button enthalten, der die Bedeutung der Farben vertauscht. Nach einem Klick auf diesen Button sollen also alle Bilder zunächst rot sein, das Bild, über dem sich die Maus befindet, soll blau erscheinen. Ein weiterer Klick auf den Button soll den ursprünglichen Zustand wiederherstellen.

Beim Laden des Dokuments soll eine Dialogbox mit einer kurzen Erläuterung angezeigt werden.

Ich habe mir ausgedacht, dass ich es in zwei Funktionen schreibe. Eine Funktion soll dazu dienen, den Zustand eines Bildes zu ändern. Diese Funktion soll zwei Argumente haben, nämlich eines, das das Bild identifiziert, und einen booleschen Wert, der angibt, ob der Mauszeiger gerade über dieses Bild oder von ihm weg bewegt wurde. Die zweite Funktion soll die Bedeutung der Farben vertauschen und den Zustand aller Bilder entsprechend.

Ok, soweit so gut.

document.images[0].src="farben/rot.gif";
document.images[1].src="farben/blau.gif";

function changebg(zahl)
{
document.images[zahl].src="farben/rot.gif";
}

</script>

</head>
<body>

So, jetzt ändern sich schon mal die Farben.

Mein Problem ist der boolesche Wert sowie die Änderung aller Kästchen auf eine andere Farbe. Kann mir jemand einen Tipp geben, wie ich das lösen kann?

Bin totaler Anfänger, sorry

Quaese · 25. Januar 2005

Hi,

ich würde folgendermassen vorgehen:

Zunächst würde ich mir ein assoziatives Array erstellen. Der ersten Komponente (startImg) würde
ich das Ausgangsbild zuweisen, der zweiten (highlightImg) das Highlightbild.

Wird der Button zum Umschalten betätigt, lasse ich das Array neu sortieren, dh. ich tausche
Ausgangs- und Highlightbild. Anschliessend zeige ich das neue Ausgangsbild in den zehn Images
an.

Die 10 Bilder lasse ich mit Hilfe von JavaScript ins Dokument schreiben. Jedes IMG erhält eine
ID, über die ich die Ausgangsbilder beeinflussen kann.

Weiterhin kann über eine Variable (intAnzahl) die Anzahl der nebeneinander angezeigten Bilder
angegeben werden.

Folgender Code sollte das Gewünschte leisten:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="author" content="Quaese" />
<script type="text/javascript">
  <!--

// Array für die Bilder
var arrPics = new Array();
arrPics['startImg']     = "farben/blau.gif";   // Ausgangsbild
arrPics['highlightImg'] = "farben/rot.gif";   // Highlightbild

// ID-Präfix für Bilder
var strPreID = "imgID_";

// Anzahl der Bilder nebeneinander
var intAnzahl = 10;

function changebg(objImg, boolOver){
  // Falls ein Mouseover stattgefunden hat
  if(boolOver == 0){
  	objImg.src = arrPics['highlightImg'];
  }else{
  	objImg.src = arrPics['startImg'];
  }
}

function changeImg(){
  var varHelp = arrPics['startImg'];
  arrPics['startImg'] = arrPics['highlightImg'];
  arrPics['highlightImg'] = varHelp;

  // Neuer Ausgangsbilder anzeigen
  for(var i=0; i<intAnzahl; i++){
    document.getElementById(strPreID+i).src = arrPics['startImg'];
  }
}
  -->
</script>
</head>
<body>

<script type="text/javascript">
<!--
  for(var i=0; i<intAnzahl; i++){
    document.write("<img id=\""+strPreID+i+"\" onmouseover=\"changebg(this, 0);\" onmouseout=\"changebg(this, 1);\" src=\"farben/blau.gif\" width=\"30\" border=\"0\" alt=\"\">");
  }
//-->
</script>
<div><button onclick="changeImg();">Bildwechsel</button></div>

</body>
</html>

Ich hoffe, das bringt dich weiter

Ciao
Quaese

✔ Hiiiiiiiilfe

morphi79

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge