image-Maps

[Raphael Wullschleger]

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

[Joachim]

hi,

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

wenn Du damit meinst, dass Du den jeweiligen "hot-spot" des maps austauschen moechtest, das geht nicht.
Entweder musst Du die gesamte Grafik tauschen, oder Du zerschneidest sie in einem Grafikprogramm, und setzt sie mit Hilfe von Tabellen wieder zusammen. Dann kannst Du natuerlich die Grafikteile einzeln wechseln.

Wie so ein Bildwechsel funktioniert, findest Du im Tutorial selfhtml aktuell.

Gruss  Joachim

[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