Link to home
Start Free TrialLog in
Avatar of bluesky134
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.
Avatar of paogiver
paogiver

Hi bluesky134,

-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)
ASKER CERTIFIED SOLUTION
Avatar of bluesky134
bluesky134

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of bluesky134

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.
You can check this solution, highlights areas using javascript, better performance.
http://msd-bml.blogspot.com/2008/09/dynamic-image-map.html