Menu
How do I make an html < area /> visible at all times, not just on focus?
Seems it should be as simple as this:
html:
<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>
css:
area {border: 1px solid red}
No matter what I do, it seems I cannot affect the styling of an area at all, it genuinely appears immune to css. Any ideas? Also, any other examples of un-style-able tags?
815
The <area> tag defines an area inside an image map (an image map is an image with clickable areas). <area> elements are always nested inside a <map> tag.
The HTML <area> tag defines a clickable area (or hotspot) inside of an image map. You can associate a hyperlink with this clickable area. This tag must be within a <map> tag. This tag is also commonly referred to as the <area> element.
The coords attribute specifies the coordinates of an area in an image map. The coords attribute is used together with the shape attribute to specify the size, shape, and placement of an area.
shape: The shape to be mapped on the image, can be a “rect”, a “circle” or a “poly”. coords: The coordinates of the shape. href: The href is the link where the user will be directed to after clicking the mapped portion of the image. alt: Alternative text for a clickable area in an image map.
You might find the jQuery plugin MapHilight (dead link!!!) to be of interest here.
New link: https://github.com/kemayo/maphilight
New demo: https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/
I would suggest using a div, with absolute links within. The reason being, this will degrade very nicely and show all of the options as a list of links. Image maps won't be so friendly. Furthermore, this alternative will deliver the same results, with cleaner and more modern practices.
#myImage {
position:relative; width:640px; height:100px;
background-image:url("bkg.jpg");
}
a.apples {
display:block; position:absolute;
top:0; left:0; width:100px; height:100px;
border:1px solid red;
}
a.taters {
display:block; position:absolute;
top:0; left:200px; width:25px; height:25px;
border:1px dotted orange;
}
#myImage a span {
display:none;
}
--
<div id="myImage">
<ul>
<li><a href="page1.html" class="apples"><span>Apples</span></a></li>
<li><a href="page2.html" class="taters"><span>Taters</span></a></li>
</ul>
</div>
The area tag just defines space in which the user can click, there is no visual representation of it so you can't really use CSS to style it. I like where you're headed but unfortunately you will probably need to use javascript to overlay a transparent image over the top of your image map to accomplish what you're trying to do.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
