...

View Full Version : image map



mag wa
01-31-2005, 08:08 PM
I would like to create an image map in a certain frame "a" with 3 buttons, Presents, Contact, Checkout...
by selecting these button a frame "b" contents would change
I don't know how to create an image map without having the image, should I create the image with paint brush of something and than make the image map..
Help please!!!!

Badman3k
01-31-2005, 08:39 PM
Okay well before you can have an image map, you will need the image to make a map of.

However it's faily simple to create an image map. It normally follows the following:



<img src="someimage.gif" width="259" height="32" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="21,7,61,24" href="#">
<area shape="circle" coords="105,14,10" href="#">
<area shape="poly" coords="155,9,170,22,187,14,180,4,212,15,166,6,199,21" href="#">
</map>


If you use shape="rect" you have to define the coordinates of the top-left and bottom-right corners of the area.
If you use shape="circle" you have to define the coordinates of the origin and the radius (i believe) of the circle.
If you use shape="poly" you have to define the coordinates of all the points that make up your polygon.

Once you've done that you can add the links, and if you add 'target="b"' to the href tag it should open the link in the b frame.
This is an extension to the above, with the target code too ;)



<img src="someimage.gif" width="259" height="32" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="21,7,61,24" href="#" target="b">
<area shape="circle" coords="105,14,10" href="#" target="b">
<area shape="poly" coords="155,9,170,22,187,14,180,4,212,15,166,6,199,21" href="#" target="b">
</map>


BTW: This should really be in the HTML/CSS forum as it's not a javascript problem :)

Hope this helps :thumbsup:

GB Joe
02-01-2005, 10:12 AM
You know, as I've been discovering here recently, you may not even need to use an image map... but you may find it useful to have access to something just a little more sophisticated than MS Paint to manipulate your graphics!

Are you picking up someone else's design here?

If you can slice your image into three bits (using whatever graphical software you can get hold of - chances are you'll need to make three copies of the image and just crop them each down, but make sure you get the pixel count right) then you can use CSS, or even a table, to place them on the page all next to each other. They'll appear like a single image if you get it right, but then you can click and rollover the individual images to get the functionality you need.

As Badman suggested, if you PM one of the JS moderators they'll be able to move this thread to HTML/CSS for you, should be able to sort it out there.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum