Creating Image Maps

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

01-Oct-02 00:00
This is a forum topic for discussing the article "Creating Image Maps":

http://www.elated.com/articles/creating-image-maps/

Learn how to build an HTML image map. Image maps allow users to click on a number of "hot spot" links within an image on the page.
16-Dec-09 06:06
Hi,
The tutorial on how to create an image map and find the coords are very simple and in-detail. Really nice one... Keep it up.

[Edited by nivix92 on 16-Dec-09 06:07]

--
Nivix
17-Dec-09 19:20
Thanks Nivix - glad you liked it.

--
Matt Doyle, Elated
19-Mar-10 22:47
I am workgin in dreamweaver and made an image map. I am trying to do osmethign opposite. I put am image of tv on my page and on teh tv screen(image map), I want to bring/show content liek vedio. pic content. Is it good to do it that way or do put borders seperate and show teh content in a table cel.

Basically it is not clear how to provide a hyperlink to a text and whow teh taget content on same page, wihtin an image map.(typically image amps are used fo takign you somewehe, I am bringing content to image map)
22-Mar-10 03:14
Hi Rajivverma1,

You need something other than an image map to do what you describe. An image map is only for defining different areas as links.

Off the top of my head I don't think there's an easy way to do what you're describing. You probably need to look at learning some javascript and using that to replace areas within the page (e.g. divs with id attributes so that you can reference them easily from the javascript).

Hope that helps!

Cat

--
http://web.soothed.com.au/
Web design for natural therapists
01-Apr-10 11:42
Hey, thanks for the tutorial.
I followed your instructions precisely (I thought), but nothing happened other than that this ugly blue box appeared around the entire image. Still no clickability in the image. Here's my code. Can you tell where I went wrong?



<img src="/img/header3.png" "width=1000" "height=70" "style=border: none;" usemap="header"/>
<map name="header">
<area shape="rect"
coords="140,5,275,65"
href="http://www.yemenpeaceproject.org"/>

<area shape="rect"
coords="385,15,475,30"
href="/about/"/>

<area shape="rect"
coords="485,15,545,30"
href="/news/" />

<area shape="rect"
coords="550,15,610,30"
href="/issues"/>

<area shape="rect"
coords="620,15,685,30"
href="/media"/>

<area shape="rect"
coords="380,35,520,50"
href="/communication"/>

<area shape="rect"
coords="530,35,585,50"
href="/links/links.php"/>

<area shape="rect"
coords="595,35,690,50"
href="/contact"/>

<area shape="rect"
coords="690,0,865,70"
href="/arabic"/>
</map>


[Edited by wedp on 01-Apr-10 11:57]
03-Apr-10 05:19
Hi wedp,

There are 2 problems that I can see:

1) In your IMG tag, you've put both the attribute names and values in quotes. Only the attribute values should be quoted.

2) You need to put the hash (#) symbol before the map name in the "usemap" attribute.

So the following IMG tag should work OK:


<img src="/img/header3.png" width="1000" height="70" style="border: none;" usemap="#header" />


Hope that helps!
Matt

--
Matt Doyle, Elated
23-May-10 12:05
Here are some tools helping to determine areas coordinates more exactly.

http://dhost.info/eleomap/
http://www.image-maps.com/
24-May-10 02:56
@rewsa2: Nice, thanks for posting those tools.

--
Matt Doyle, Elated
26-Jul-10 13:19
Question: can you create separate coordinates for noncontiguous polys in the same line for an area?

Let's say, for example, I've got a map of the USA and California & Hawaii are grouped in the same category. I'd like to hover over California and also make a box around Hawaii show as highlighted, along with California.

It seems like you can only do continuous polygon for one area at a time. Or is there a symbol used to separate noncontiguous (separated) polygons? I know the semicolon is the same as the comma.

i.e. <area shape="poly" coords="[polygon 1 coordinates]....[SPECIAL SYMBOL?????]...[polygon 2 coordinates]........">
27-Jul-10 04:47
@andym: "I'd like to hover over California and also make a box around Hawaii show as highlighted, along with California" - How are you doing your highlighting? If you're using JavaScript then you could attach your JavaScript onmouseover handler to both poly areas, so that both are highlighted when either is rolled over.

--
Matt Doyle, Elated
27-Jul-10 12:47
Thanks Matt,

I was actually trying to use a custom jquery script ("highlightmap") created by someone, but I didn't know how to apply the onmouseover action to both areas simultaneously. But if someone has a normal javascript example of what you're talking about, I'd greaty appreciate it.
I just haven't found any help out there for this exact scenario.

Thanks!
28-Jul-10 04:30
@andym: You mean this? http://plugins.jquery.com/project/maphilight

It has a groupBy() option that you can use to group area elements by a given attribute (e.g. 'rel'). Then when you mouseover 1 area, the other one highlights too: http://davidlynch.org/js/maphilight/docs/

Example: http://davidlynch.org/js/maphilight/docs/demo_features.html

Pertinent code from the demo:


<map name="features">
<area id="star" rel="group" shape="poly" coords="78,83,70,100,52,104,64,115,61,133,78,124,94,133,91,116,104,102,87,101,79,88" href="#" alt="star" class="{strokeColor:'0000ff',strokeWidth:5,fillColor:'ff0000',fillOpacity:0.6}"></area>
<area id="square2" shape="poly" coords="151,249,175,225,182,222,167,193,136,221,153,250" href="#" alt="another square" rel="group" class="{groupBy:'rel'}"></area>
</map>


--
Matt Doyle, Elated
28-Jul-10 13:05
Matt, thanks for helping me. I agree, this is all I needed, and wish I had discovered it myself before asking.

I guess I assumed the solution had to be more on the "coords=" attribute side, but this will work for sure.

You're awesome. Best regards,
Andy
29-Jul-10 03:50
No problem Andy - glad it helped
Matt

--
Matt Doyle, Elated
25-Aug-10 19:30
I have a question similar to that posed by Rajivverma1 back in March of this year . . . he was working in DreamWeaver, I am working with FP 2003 using hotspots to define sections of a football stadium. What I want to do is link TO the hotspot area on the stadium map FROM a text link... ie - if I click on a hyperlink "E-U4-AA" , i want it to bring up that hotspot on the map. Is this possible? Thank you.
Mike
25-Aug-10 19:55
@moreeves: You could use the jQuery plugin I posted above to highlight the relevant area of the map:

http://plugins.jquery.com/project/maphilight
http://davidlynch.org/js/maphilight/docs/demo_features.html

Cheers,
Matt

--
Matt Doyle, Elated
25-Aug-10 20:14
Thanks for the quick reply, Matt - I will give that a try. Have a great day!
Mike R
26-Aug-10 20:30
No problem Mike

--
Matt Doyle, Elated
24-May-11 17:29
Great article! Just what I needed to know about image maps, especially the part about viewing the coordinates in the browser status bar.
thanks!
27-May-11 03:50
@pamlynk: You're welcome - glad it helped

--
Matt Doyle, Elated
15-Aug-11 16:17
Matt!! thanks so much man, I have been trying to find out how to learn how to create image maps for a little while (I didn't even know exactly what the name of what I wanted to do was!), and your tutorial was perfect! Thanks again for the help getting me set up with the image maps

--
New to web designing but enjoying teaching myself how to make sweet sites. here are the few I have made so far www.selacrosse.com www.ugalacrossealumni.com www.callsuperior.com
check them out if you like, I love feedback!
23-Aug-11 02:31
@kevyar: No problem

--
Matt Doyle, Elated
26-Sep-11 01:04
Hi Matt,

I am trying to use server side image map logic, but it does not work for me. When I click my image, it asks to download my cgi file rather than opening a html link. I am stuck here from last couple of days. Can you urgently help please.

My html page code -
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<a href="txt.cgi" >
<img src="wteeBU.gif" ismap="ismap" />
</a>
</body>
</html>


Code of cgi file -
rect C:\NewFolder\red.html 105,206,170,246

Code of my red.html -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body bgcolor="red" >
</body>
</html>
28-Sep-11 04:50
@preeti: I don't understand what you're trying to do here. If you want to create a server-side image map (generally a bad idea these days) then your server-side CGI script needs to read the x and y values of the clicked point passed in the query string, and process the values accordingly:

script.cgi?x,y

--
Matt Doyle, Elated
28-Sep-11 06:27
Hi Matt,

I completely agree that using server side image map is not a good thing to do.

I have built a slide show using fadein-fadeout mechanism (jquery). I want that when my last slide appears it shud have 4 links. Now to build this mechanism I am only left with server side image map. (Please suggest in case I can do it with some other method)

I have created a cgi file which has information of only one link as of now. co-ordinates - 105,206,170,246 ; shape- rectangle.

I want that when user clicks on my page with image

<body>
<a href="txt.cgi" >
<img src="wteeBU.gif" ismap="ismap" />
</a>
</body>

within mentioned co-ordinates it should redirect to red.html page.

Can you please guide me how can I do that.

Thanks in advance!!
29-Sep-11 04:53
@preeti: As I say, your CGI script needs to execute, read the x,y values of the clicked point, and do something with them. You can't just write "rect C:\NewFolder\red.html 105,206,170,246". You need to write some code (PHP, Perl, etc) to do the redirect.

Personally I would use JavaScript/jQuery to detect when the last slide is displayed, then reveal a div containing your 4 links that's overlaid on top of the image using position: absolute and z-index: 999. No need to write server-side scripts.

--
Matt Doyle, Elated

 
New posts
Old posts

Follow Elated