bluesky134
asked on
show the outline of image map "area" tag
How can I show the outlines and chose a color of an image map "area" tag when image it is loaded?
<body>
<img src="../pics/map.jpg" width="1280" height="867" border="1" usemap="#Map" >
<map name="Map">
<area shape="circle" coords="113,102,19" href="#" alt="object1">
<area shape="circle" coords="465,789,10" href="#" alt="object2">
<area shape="poly" coords="194,110,248,72,266 ,106" href="#" alt="object3">
</map>
</body>
Thanks. Paul.
<body>
<img src="../pics/map.jpg" width="1280" height="867" border="1" usemap="#Map" >
<map name="Map">
<area shape="circle" coords="113,102,19" href="#" alt="object1">
<area shape="circle" coords="465,789,10" href="#" alt="object2">
<area shape="poly" coords="194,110,248,72,266
</map>
</body>
Thanks. Paul.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sorry for the delay. In case my late feedback is still reasonable, here it is:
1) Yes. I want to show the outline of each <area shape> on the image map, on image first loaded (without having to hover to make the outline appear).
2) Yes. Square can make somehow useful, but i'm planning to collect the data for the shapes dinamically from the DB. The quantity of shapes will be drawn looping throu the recordset. The shapes may have more than 4 coordinates on the db so I guess "poly" would do some of the tricks. I could also add a field indicating if circle, poly or rect should be drawn.
3) I liked the effect on the site mentioned and would like that code to work according 1) and 2) but modify the included script "annimg.js" is out of my possibilities.
Thanks.
1) Yes. I want to show the outline of each <area shape> on the image map, on image first loaded (without having to hover to make the outline appear).
2) Yes. Square can make somehow useful, but i'm planning to collect the data for the shapes dinamically from the DB. The quantity of shapes will be drawn looping throu the recordset. The shapes may have more than 4 coordinates on the db so I guess "poly" would do some of the tricks. I could also add a field indicating if circle, poly or rect should be drawn.
3) I liked the effect on the site mentioned and would like that code to work according 1) and 2) but modify the included script "annimg.js" is out of my possibilities.
Thanks.
You can check this solution, highlights areas using javascript, better performance.
http://msd-bml.blogspot.com/2008/09/dynamic-image-map.html
http://msd-bml.blogspot.com/2008/09/dynamic-image-map.html
-my solution-
Using HTML to create Roll over and need to cut slice by slice in photoshop for 2 type of images, normal and highlighted.
-the image on the first load and...
-the image when mouse over
If you want something more advance, can use flash to do it very easily, the tutorials are here.
http://www.google.com.my/search?hl=en&q=create+flash+buttons&meta=
Check this sample out made by flash.
http://www.coralcondoms.com/ (under the get it section)