<map name="map">

Hej!
Jag har en liten fundering?
Hur hur ordnar man så ett markerat klickbart fält på en bild blir markerat med tex en liten röd punkt. Hoppas ni förstår min lilla fundering. Koden nu är

<img src="img/europa.jpg" width="648" height="576" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="29,12,47,28" href="#">
<area shape="rect" coords="330,289,343,304" href="#">
<area shape="rect" coords="548,268,565,283" href="#">
</map>

Tack på förhand
Hedda

Exempel:

<script type="text/javascript">
<!--

function mark( o ){
	var
		foo = document.getElementById( "foo" ),
		elm = document.getElementById( "bar" ),
		temp = o.coords.split( "," ),
		coords = [],
		i = temp.length,
		left = 0,
		top = 0;

	while( -1<--i )
		coords.push( parseInt( temp[ i ] ) );

	left = foo.offsetLeft + coords[ 3 ] + ( ( ( coords[ 1 ] - coords[ 3 ] ) - elm.offsetWidth ) / 2 );
	top = foo.offsetTop + coords[ 2 ] + ( ( ( coords[ 0 ] - coords[ 2 ] ) - elm.offsetHeight ) / 2 );

	elm.style.left = left  + "px";
	elm.style.top = top + "px";
	elm.style.visibility = "visible";
};

//-->
</script>

...

<img src="img/europa.gif" height="576" width="648" usemap="#foo" id="foo" border="0">

<map name="foo">
<area shape="rect" href="javascript:void(0)" onclick="mark(this)" coords="29,12,47,28"></area>
<area shape="rect" href="javascript:void(0)" onclick="mark(this)" coords="330,289,343,304"></area>
<area shape="rect" href="javascript:void(0)" onclick="mark(this)" coords="548,268,565,283"></area>
</map>

<div id="bar" style="position:absolute;visibility:hidden"><img src="temp2.gif" height="5" width="5" border="0"></div>

Notera att jag använder mig av en bild ( temp2.gif ) vars höjd respektive bredd är 5 pixlar.

Bifogar den.

:)

Jätte tack.
En liten fråga till bara om jag vill att positionerna skall vara markerade direkt när man kommer in på sidan så att man vet var på kartan man ska klicka hur gör man då?
Har försökt med onload

<map name="foo">
<area shape="rect" href="java script:void(0)" onload="mark(this)" coords="29,12,47,28"></area>
<area shape="rect" href="java script:void(0)" onload="mark(this)" coords="330,289,343,304"></area>
<area shape="rect" href="java script:void(0)" onload="mark(this)" coords="548,268,565,283"></area>
</map>

men det funkar inte även i bodytaggen men då har ju inte coord något värde än.
Hur göra?

Tackar för mig hedda

Usch vad fult det blev, men ok:

<script type="text/javascript">
<!--

function positionImg( l, t, r, b, id ){
	var
		left = parseInt( l + ( ( r - l - 5 ) / 2 ) ),
		top = parseInt(  t + ( ( b - t - 5 ) / 2 ) );

	document.write( "<div id=\""+id+"\" style=\"position:absolute;left:"+left+"px;top:"+top+"px\"><img src=\"temp2.gif\" height=\"5\" width=\"5\" border=\"0\"></div>" );
	return id;
};

function getElm( id ){
	return document.getElementById( id );
};

var n1 = positionImg( 29,12,47,28, "n1" );
var n2 = positionImg( 330,289,343,304, "n2" );
var n3 = positionImg( 548,268,565,283, "n3" );

window.onload = function(){
	var img = getElm( "foo" );

	getElm( "n1" ).style.left = ( parseInt( getElm( "n1" ).style.left ) + img.offsetLeft ) + "px";
	getElm( "n2" ).style.left = ( parseInt( getElm( "n2" ).style.left ) + img.offsetLeft ) + "px";
	getElm( "n3" ).style.left = ( parseInt( getElm( "n3" ).style.left ) + img.offsetLeft ) + "px";
	getElm( "n1" ).style.top = ( parseInt( getElm( "n1" ).style.top ) + img.offsetTop ) + "px";
	getElm( "n2" ).style.top = ( parseInt( getElm( "n2" ).style.top ) + img.offsetTop ) + "px";
	getElm( "n3" ).style.top = ( parseInt( getElm( "n3" ).style.top ) + img.offsetTop ) + "px";
};

//-->
</script>

...

<img src="mytec.jpg" height="576" width="648" usemap="#foo" id="foo" border="0">

<map name="foo">
<area shape="rect" href="javascript:void(0)" coords="29,12,47,28"></area>
<area shape="rect" href="javascript:void(0)" coords="330,289,343,304"></area>
<area shape="rect" href="javascript:void(0)" coords="548,268,565,283"></area>
</map>

:)

Tackar så jätte mycket nu funkar det bra.
ByByMhedda