mouseover imagemap werkt nog niet 100%

[crz_06]

zit met een klein probleempje, zijnde: Ik maak dankbaar gebruik van deze "'Mouseovermap" voorbeeld (http://kristof.f2o.org/test/mouseoverMap/), er is echter iets waar ik niet uit kom. De rollover image wordt gevonden door

<area href="rect.html" alt="rect" title="rect"
    shape="rect" coords="15,15, 95,95">

waarbij dit verwijst naar rect.png. Dit werkt perfect als de png image naast de html pagina staat, en als de image en html beide dezelfde naam hebben. Echter wat moet ik nu aanpassen als ik deze koppeling niet wil. Dus een andere naam voor de html link en een costum image naam, welke ook nog eens een andere folder lokatie heeft.

_______
hele code volgt hieronder om het makkelijk te houden:

function initRolloverMaps(){
  if(!document.getElementById && !document.all)return;
  /* opera 6 has issues with the useMap property of images */
  if(window.opera
  && parseInt(/opera.(\d+)/i.exec(window.navigator.userAgent)[1])<7)return;
  var i, j, regImgUseMap, regAreaHref, img, map, area;
  regImgUseMap=new RegExp("#([^#]+)$");
  regAreaHref =new RegExp("([^\/\.]+)\.[^\.]+$");
  for(i=0; i<document.images.length; i++){
    img=document.images[i];
    if(img.useMap){
      img.oldsrc=img.src;
      img.style.backgroundImage='url("'+img.src+'")';
      regImgUseMap.exec(img.useMap);
      if(document.getElementById){
        map=document.getElementById(RegExp.$1);
      }
      else if(document.all){
        map=document.all[RegExp.$1];
      }
      for(j=0; j<map.areas.length; j++){
        area=map.areas[j];
        if(area.href){
          area.img=img;
          area.overimg=new Image();
          regAreaHref.exec(area.href);
          area.overimg.src=RegExp.$1+".png";
          area.onfocus=area.onmouseover=function(){
            this.img.src=this.overimg.src;
          };
          area.onblur =area.onmouseout =function(){
            this.img.src=this.img.oldsrc;
          };
} } } } }

<img src="shapes.png" alt="shapes"
  width="300" height="150" usemap="#shapes">
<map name="shapes" id="shapes">
  <area href="rect.html" alt="rect" title="rect"
    shape="rect" coords="15,15, 95,95">
  <area href="circle.html" alt="circle" title="circle"
    shape="circle" coords="254,61, 33">
  <area href="poly.html" alt="poly" title="poly"
    shape="poly" coords="102,134, 120,75, 197,84, 208,129, 164,143">
</map>

 

[peter vazed]

Denk dat dat niet lukt, tenzij dat je het script herschrijft.

Dit werkt wel

<area href="fiets.html" alt="helpmij" title="helptmij-title" shape="fiets" coords="15,15, 95,95">

dan moet je dus je plaatje hernoemen, de shape en de link.
Echter lukt hiermee niet wat je wenst.

Het script is leuk voor een simpele site met een paar pagina's, doch zoals het nu geschreven is niet bruikbaar voor een grotere site, waarbij plaatjes in een image dir zitten..............................

Bovendien mis je een stukje code.
Kijk in de bron voor originele code.
dit mis ik in je code
window.onload=function(){
initRolloverMaps();
}

 

[crz_06]

ok, duidelijk. Iemand een link naar een voorbeeld wat 'professioneler' is, heb nl niet veel anders kunnen achterhalen op het www. Zoek dus specifiek naar een mouseover imagemap (dus als je over een hotspot hovered moet er een rollover image verschijnen)

thx