html - How do I give a border around the <area coords>? -
i want border around active link part of image defined coordinates. have implemented extent when user clicks, outline visible using: outline-color, href. need border around coordinates specified default. not experienced in css, guidance appreciated. if need mark @ respective intervals. use of javascript practice?
<!doctype html> <html> <style> img[usemap], map area[shape]{ outline-color: #f00; } </style> <body> <img src="unnamed.png" usemap="#mark"> <map name="mark"> <area shape="rect" coords="10,10,50,50" href="#"> </map>
well can see not using anchor tag area tag, presuming method choosing on using anchor tag. follow this:
<style> area:link, area:hover, area:active, area:focus { border: 5px #f00 solid; } </style> <body> <img src="unnamed.png" usemap="#mark"> <map name="mark"> <area shape="rect" coords="10,10,50,50" href="#"> </map> or if want actual anchor tag maybe
<style> a:link, a:hover, a:active, a:focus { border: 5px #f00 solid; } </style> <body> <img src="unnamed.png" usemap="#mark"> <map name="mark"> <a shape="rect" coords="10,10,50,50" href="#"></a> </map>
Comments
Post a Comment