---
title: "<map name=\"map\">"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/73596-map-name-map"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "mhedda"
published: "2003-04-09T07:49:51.000Z"
updated: "2003-04-10T07:15:57.000Z"
replies: 4
views: 172
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/73596-map-name-map"
---

# <map name="map">

## #1 — mhedda, 2003-04-09T07:49Z

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

Permalänk: https://www.webforum.nu/p/73596

## #2 — Peter S, 2003-04-09T08:45Z

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.

 :)

Bilagor:

- [temp2.gif](https://www.webforum.nu/a/1258.gif)

Permalänk: https://www.webforum.nu/p/1006730

## #3 — mhedda, 2003-04-09T11:33Z

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

Permalänk: https://www.webforum.nu/p/1006826

## #4 — Peter S, 2003-04-09T15:32Z

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>
```

 :)

Permalänk: https://www.webforum.nu/p/1007009

## #5 — mhedda, 2003-04-10T07:15Z

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

Permalänk: https://www.webforum.nu/p/1007575

---

Tråden på webben: https://www.webforum.nu/amne/javascript/73596-map-name-map