6 replies to this topic

[RunawayMuse]

I am building a website that features image map navigation. I figured out how to write the code for the image map by scratch--now all I need to make it effective are the coordinates. Here is an example of what I have:

<img src="/images/header.jpg" width="964" height="571" alt="Navigation" usemap="#navigation" />

<map name="navigation">
	<area shape="rect" coords="?,?,?,?" href="link.php" alt="Link" />
</map>

I am using Photoshop CS5 to grab my coordinates. I used the image slicer tool to draw a rectangular box around my clickable area. When I click on this box, I find the following information:

X: 468
Y: 528
W: 86
H: 23

My question is: are these the coordinates I need to plug into my code? If so, then in what order should I write them?

[porkchops]

I am building a website that features image map navigation...

Hahahah... That's a sentence I thought I'd never hear again.

You should post an image of what you're trying to do. I'd venture that there is almost no instance where an image map should be used. Especially for navigation, you need to use an element that is semantic... screen readers would explode trying to navigate with an image map.

We can probably suggest a semantic and likely easier way to code whatever it is you are doing.

Edited by porkchops, 24 February 2012 - 01:21 AM.

[mrchristoph]

When I've had to use image maps (not out of choice) I used this rather old school, but very useful online tool:

http://www.image-maps.com

...which does the hard work for you

[RunawayMuse]

We can probably suggest a semantic and likely easier way to code whatever it is you are doing.

That would be fantastic. I admit that there is a lot I need to catch up on in the design world--I am self-taught and rather rusty at that!

Here is a a rough sketch of what the website will look like: http://piordie.runaway-muse.net. What would you suggest for navigation in lieu of an image map?

[Wickham]

You can use position: absolute divs layered over a position: relative image and this should be better for screen readers because the links are in order.
See http://www.wickham43.net/imagemaps.php item 1 is an image map but items 2a and 2b use position: absolute divs with links in p tags but the links could be inside a list.

[porkchops]

I bet you could do this even simpler:

Put your links into an unordered list (or ordered if the order is important). Then you put a transparent PNG of the PI with a dropshadow over it using z-index. If you apply text-align: right to each of the LIs you can just play around with the padding on the right of individual LIs to get the alignment correct, but that would probably make more sense then trying to absolutely position each one.

Might not be the best way to accomplish this, but it should give you a good start. This is a great case of thinking through what's possible with CSS and trying a couple different things until you find the simplest (and most cross-browser compliant) way of doing this. A little trial and error would be a great learning opportunity.

EDIT: I think it's prudent to mention that the menu you have there would probably be pretty difficult for the user to use, especially since it doesn't have a lot of visual prominence and is in a weird location and configuration. It's probably a decent heuristic that if a menu requires this much coding effort to piece together, it's not the most effective solution for the user. Simplicity is beautiful and easy to comprehend.

Edited by porkchops, 24 February 2012 - 02:00 PM.

[bobbyndd]

The Attribute Values are as follows


x1,y1,x2,y2 >>>Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape="rect")
x,y,radius >>>Specifies the coordinates of the circle center and the radius (for shape="circle")
x1,y1,x2,y2,..,xn,yn >>>Specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon (for shape="poly")

For your initial question, yes those are the coordinates you need to add in the html code.


Hope this helps,

Bobby.

Edited by bobbyndd, 08 March 2012 - 01:44 AM.