imagemap + mouseover?

[robman]

hi
ich hab n kleines prob.
ich möchte gern in ne page ne image map machen

code:
--------------------------------------------------------------------------------

<img src="alles.jpg" width="567" height="183" border="0" usemap="#alles" style="border-style:none">
    <map name="alles">
      <area shape="rect" coords="0,3,146,78" href="#">
      <area shape="rect" coords="148,2,283,84" href="#">
      <area shape="rect" coords="285,5,424,87" href="#">
      <area shape="rect" coords="147,86,282,164" href="#">
      <area shape="rect" coords="285,87,423,168" href="#">
      <area shape="rect" coords="436,96,555,169" href="#">
    </map>

--------------------------------------------------------------------------------

nun möchte ich gern aber noch nen mouseover effekt...

d.h. wenn ich über ein teil des immage fahre, zb, auf den button

area shape="rect" coords="0,3,146,78" href="#">

soll n rollover button der stelle diese buttons angezeigt werden
( also n anders klienes bild)
wär supi wenn mir wer helfen könnte
danke schomal

ciao

[Didito]

http://www.fortunecity.de/kraftwerk/rem/188/web3/mouseover2.htm

guck ma ob dir das weiter hilft.

bin aber nich sicher obs so funktioniert.

[ptr]

hi robman,
wie siehts denn aus mit javascript-kenntnissen bei dir ?
noch nicht so dolle ?
dann mußte dann halt weiterfragen, wennde mit dem folgenden nicht klarkommst:

1.
du kannst in nem <area> eventhandler notieren z.B.:
<area shape="rect" coords="0,3,146,78" href="#" onmouseover="bildwechsel();">

2.
position des bildes, das erscheinen soll:

wenn du dem bild, auf dem die imagemap liegt, eine id zuweist,
**********************************
<img src="alles.jpg" width="567" height="183" border="0" usemap="#alles" style="border-style:none" id="mapPosition">
**********************************
kannst du mit:
**********************************
var xPos=document.getElementById('mapPosition').offsetLeft;
var yPos=document.getElementById('mapPosition').offsetTop;
**********************************
die position deiner imagemap auf der seite ermitteln.

die koordinaten deines <area> kannst du folgendermaßen auslesen:
am besten übergibst du deiner bildwechsel-funktion eine referenz auf das objekt(<area>), auf dem das mouseover-ereignis eintritt:
**********************************
<area shape="rect" coords="0,3,146,78" href="#" onmouseover="bildwechsel(this);">
**********************************
dann kannst du in deiner funktion die koordinaten des aktuellen <area> abfragen:
**********************************
function bildwechsel(objekt)
{
var koordinaten=objekt.coords;
}
**********************************
in der variablen koordinaten ist nun folgender string gespeichert:
**********************************
0,3,146,78
**********************************
den kann man dann mit:
**********************************
var einzelKoordinaten=koordinaten.split(',');
**********************************
in nen array umwandeln, der die einzelnen koordinaten enthält.
die x- und y-koordinaten innerhalb der imagemap sind dann:
**********************************
var xKoordinate=einzelKoordinaten[0];
var yKoordinate=einzelKoordinaten[1];
**********************************
da man damit rechnen will, kann man die strings gleich mal in ganze zahlen umwandeln:
**********************************
var xKoordinate=parseInt(einzelKoordinaten[0]);
var yKoordinate=parseInt(einzelKoordinaten[1)];
**********************************
die position, an der du das bild erscheinen läßt, wäre dann:
**********************************
var bildPosX=xPos+xKoordinate;
var bildPosY=yPos+yKoordinate;
**********************************

3.
dann mußt du nur noch ein image-objekt erzeugen und dem den stil mit position:absolute und für left und top die errechneten werte zuweisen und dieses image dann ins dokument einfügen.

gruß
ptr