OnMouseOver + MapArea -> keine gute Lösung

[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