Home : Forums : Authoring and Programming : Creating Image Maps

Creating Image Maps

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

01-Oct-02 00:00

Delete

Edit

Elated

Gold

Posts: 297

From: Brighton, UK

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

Delete

Edit

nivix92

No stars yet

Posts: 1

From: Coimbatore, Tamil Nadu, India

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

Thanks Nivix - glad you liked it.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

19-Mar-10 22:47

Delete

Edit

rajivverma1

No stars yet

Posts: 1

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

Delete

Edit

cat

Gold

Posts: 454

From: Australia

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

Delete

Edit

wedp

No stars yet

Posts: 1

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

23-May-10 12:05

Delete

Edit

rewsa2

No stars yet

Posts: 1

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@rewsa2: Nice, thanks for posting those tools.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

26-Jul-10 13:19

Delete

Edit

andym

No stars yet

Posts: 3

From: TX

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

27-Jul-10 12:47

Delete

Edit

andym

No stars yet

Posts: 3

From: TX

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

28-Jul-10 13:05

Delete

Edit

andym

No stars yet

Posts: 3

From: TX

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

No problem Andy - glad it helped

Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

25-Aug-10 19:30

Delete

Edit

moreeves

No stars yet

Posts: 2

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

25-Aug-10 20:14

Delete

Edit

moreeves

No stars yet

Posts: 2

Thanks for the quick reply, Matt - I will give that a try. Have a great day!
Mike R

26-Aug-10 20:30

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

No problem Mike

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

24-May-11 17:29

Delete

Edit

pamlynk

No stars yet

Posts: 1

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@pamlynk: You're welcome - glad it helped

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

15-Aug-11 16:17

Delete

Edit

kevyar

No stars yet

Posts: 1

From: Atlanta, GA

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@kevyar: No problem

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

26-Sep-11 01:04

Delete

Edit

preeti

No stars yet

Posts: 2

From: India

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

28-Sep-11 06:27

Delete

Edit

preeti

No stars yet

Posts: 2

From: India

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/