image-Maps

[Marcus]

Guten Tag
Wie kann ich in einer Image-Map einen Onmouseover-Event darstellen? Über Onmouseover sollte ein anderes Bild angezeigt werden!
Gruss
Raphael Wullschleger

Hi Raphael,
es funktioniert schon aber es ist kompliziert zu erklären, aber ich versuchs mal...

... Du kannst einen mouseover effekt mit hilfe von
einer clipping funktion darstellen.
Also Du legst das Bild ,wo die Map dazugehört, mit Hilfe von DHTML in einen Layer und legst ein zweites Bild in einem Layer darüber und machst das Bild dann mit Hilfe der clipping function unsichtbar und sagst per javascript dem mouseover das es einen definierten
Bereich sichtbar machen soll.

Hier das Script, dazu viel spaß !!

1. Datei Head...

function Init(){
  
    ns = (document.layers) ? 1 : 0;
    ie = (document.all) ? 1 : 0;
    Dummy = new Ebene("dummy","Dummy");    // Dummy fuer leeres Objekt
Bus0 = new Ebene("bus0","Bus0");           //passiv    
Bus1 = new Ebene("bus1","Bus1");           //aktiv
    }

function EClipNach(oben,rechts,unten,links) {
    if(ns) {
      this.e.clip.top = oben;
      this.e.clip.right = rechts;
      this.e.clip.bottom = unten;
      this.e.clip.left = links;
    }
    else this.e.clip = "rect("+oben+"px "+rechts+"px "+unten+"px "+links+"px)";
}

function EClipUm(oben,rechts,unten,links) {
    this.clipNach(this.clipWert('oben')+oben,this.clipWert('rechts')+rechts,this.clipWert('unten')+unten,this.clipWert('links')+links);
}

function EClipWert(w) {
  if(ie) var clipw = this.e.clip.split("rect(")[1].split(")")[0].split("px");
  if(w=="oben") return (ns) ? this.e.clip.top : Number(clipw[0]);
  if(w=="rechts") return (ns) ? this.e.clip.right : Number(clipw[1]);
  if(w=="unten") return (ns) ? this.e.clip.bottom : Number(clipw[2]);
  if(w=="links") return (ns) ? this.e.clip.left : Number(clipw[3]);
}

2. Datei Body...

<div id="bus0" style="position:absolute;z-index:3;top:100px;left:146px;width:146;height:248;visibility:hidden;"><img src="../images/c_busi_b1_m.gif" width="172" height="248" border="0" usemap="#busmap"></div>
<div id="bus1" style="position:absolute;z-index:4;top:100px;left:146px;width:146;height:248;clip:rect(0,172,0,0);visibility:hidden;"><img src="../images/c_busi_b1_m_hi.gif" width="172" height="248" border="0" usemap="#busmap"></div>

//    
<map name="busmap">
  <area shape="rect" coords="64,165,170,179" href="#" onMouseOver="Bus1.clipNach(167,172,181,0);" onMouseOut="Bus1.clipNach(0,172,0,0);">
  <area shape="rect" coords="17,181,171,194" href="#" onMouseOver="Bus1.clipNach(183,172,197,0);" onMouseOut="Bus1.clipNach(0,172,0,0);">
  <area shape="rect" coords="99,196,170,210" href="#" onMouseOver="Bus1.clipNach(199,172,213,0);" onMouseOut="Bus1.clipNach(0,172,0,0);">
  <area shape="rect" coords="73,212,171,226" href="#" onMouseOver="Bus1.clipNach(215,172,229,0);" onMouseOut="Bus1.clipNach(0,172,0,0);">
  <area shape="rect" coords="46,229,171,244" href="#" onMouseOver="Bus1.clipNach(231,172,245,0);" onMouseOut="Bus1.clipNach(0,172,0,0);">
</map>

... ich hoffe du kannst damit ein bissichen was anfangen.

cu marcus