OnMouseOver + MapArea -> keine gute Lösung

[Juan Saenz]

Hi!

folgendes Szenario: ich habe einen Bild-A, welches sich in Bild-B ändert, sobald man mit der Maus darüberfährt (OnMouseOver). Bild-A ist ein Foto, Bild-B ein MapArea mit 30 verschiedenen Anklick-Bereichen (nennen wir sie B1-B30). Beim Klicken auf B1 soll anstatt "Bild-A", "Bild-AB1" geladen werden, beim Klicken auf B2 soll "Bild-AB2" erscheinen, usw. Eine kurze Textpassage soll unter dem Bild ebenfalls geändert werden.

Ich habe es so gelöst, dass ich für jedes neues Bild eine neue HTML-Datei erstellt habe, die bis auf die Bildverknüpfung und den kurzen Text identisch sind - es funktioniert auch. Aber: es muss bestimmt eine bessere Möglichkeit geben, vielleicht mit PHP? Das, was ich gemacht habe, scheint mir eine sehr unsaubere Lösung zu sein.

Weiss jemand Rat?

Vielen Dank!
Saludos,
Juan Pablo

[Juan Saenz]

Kennt niemand eine Lösung? :-)

Saludos,
Juan-Pablo

[Thomas J.S.]

Hallo,

Kennt niemand eine Lösung? :-)

Das weiss ich nicht, ich jedenfalls habe nicht wirklich verstanden was du möchtest.

Grüße
Thomas

[Juan Saenz]

Hallo Thomas,

Das weiss ich nicht, ich jedenfalls habe nicht wirklich verstanden was du möchtest.

Du kannst Dur angucken, was ich meine, unter www.juansaenz.de/tmp/beispiel

Danke für die Mühe :-)

Grüße
Thomas

Saludos,
Juan Pablo

[Thomas J.S.]

Hallo,

Du kannst Dur angucken, was ich meine, unter www.juansaenz.de/tmp/beispiel

Danke für die Mühe :-)

Ich würde erstens die bilder in <div> stecken (da kannst unter das Bild auch den Text eintregen)
z.B:
.bilder { width:XXXpx; height:XXXpx; position:absolute; visibility:hidden; z-index:1;}
.startbild { width:XXXpx; height:XXXpx; position:absolute; z-index:3; }

<div class="startbild" id="startbild">
  <img src="startbild.gif" ...  usemap="#pres">
  <div class="text" bla bla </div>
</div>

<div class="bilder" id="anderesbild">
  <img src="anderesbild.gif" ...  usemap="#pres">
  <div class="text" blubb blubb </div>
</div>

dann drei Funktionen schreiben:

eine variable für das erste bild (dein Bild-A)
var alteDivID = "startbild";

function zeigebild(strID)
{
 if(document.layers)
  {
  document.layers[DivID].visibility = "show";
  document.layers[DivID].zIndex = "10";
  }
 if(document.all)
  {
  document.all[DivID].style.visibility ="visible";
  document.all[DivID].style.zIndex ="10";
  }
 if(document.getElementById)
  {
  document.getElementById(DivID).style.visibility ="visible";
  document.getElementById(DivID).style.zIndex ="10";
  }
}

function versteckebild(DivID)
{
  // hier das selbe wie oben nur mit "hide" bzw. "hidden" und z-index:0;
}

dann fürs klicken:

function klickbild(DivID)
{
 if(document.layers)
  {
  document.layers[DivID].visibility = "show";
  document.layers[DivID].zIndex = "5";
  }

if(document.all)
  {
  if(alteDivID == "startbild")
   {
   document.all[DivID].style.visibility ="visible";
   document.all[DivID].style.zIndex ="5";
   alteDivID = DivID;
   }
  if(DivID != alteDivID)
   {
   document.all[alteDivID].style.visibility ="hidden";
   document.all[alteDivID].style.zIndex ="1";
   document.all[DivID].style.visibility ="visible";
   document.all[DivID].style.zIndex ="5";
   alteDivID = DivID;
   }
  }

if(document.getElementById)
  {
   if(alteDivID == "startbild")
    {
    document.getElementById(DivID).style.visibility ="visible";
    document.getElementById(DivID).style.zIndex ="5";
    alteDivID = DivID;
    }
   if(DivID != alteDivID)
    {
    document.getElementById(alteDivID).style.visibility ="hidden";
    document.getElementById(alteDivID).style.zIndex ="1";
    document.getElementById(DivID).style.visibility ="visible";
    document.getElementById(DivID).style.zIndex ="5";
    alteDivID = DivID;
    }
  }
}

<area onmouseover="zeigebild('id-von-einem-div')" onmouseout="versteckebild('id-von-einem-div')" onclick="clickmap('id-von-einem-div')" .... >

das ist war jezt so ausgelegt, dass das bild beim mouseover über die area wechselt, aber das kannst du dann für dich anpassen, wenn du das nicht brauchst.

Grüße
Thomas

[Thomas J.S.]

<area  onclick="clickmap('id-von-einem-div')" .... >

sollte natürlich onclick="klickbild('id-von-einem-div')"  heissen.

Thomas

[Juan Saenz]

werde ich huete abend noch versuchen...

Saludos,
Juan Pablo