Visible Area tag?

by

jQuery Plugin, MapHilight:

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/

HTML/CSS Alternative

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="https://stackoverflow.com/questions/1906734/page1.html" class="apples"><span>Apples</span></a></li>
    <li><a href="page2.html" class="taters"><span>Taters</span></a></li>
  </ul>
</div>

More Related Contents:

  1. Can't remove text decoration
  2. Bootstrap height
  3. Which way to implement this picture in HTML CSS code and bootstrap
  4. What are the implications of using “!important” in CSS? [duplicate]
  5. Can I have an onclick effect in CSS?
  6. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  7. How to remove the arrow from a select element in Firefox
  8. How to save CSS changes of Styles panel of Chrome Developer Tools?
  9. Why is vertical-align: middle not working on my span or div?
  10. Maintain image aspect ratio when changing height
  11. Change cursor type on input type=”file” [duplicate]
  12. Why are button’s discouraged from navigation?
  13. Using display inline-block columns move down
  14. Line break (like ) using only css
  15. How to disable the resize grabber of ? [duplicate]
  16. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  17. How to get a background image to print using css?
  18. Make flex items overlap
  19. HTML class attribute with spaces, it is a W3C valid class?
  20. Aligning elements left and center with flexbox
  21. How do I give a CSS class priority over an id?
  22. Padding the top and the bottom of inline element
  23. Title with bottom border smaller than width
  24. How to run the CSS3 animation to the end if the selector is not matching anymore?
  25. how to remove the dotted line around the clicked a element in html
  26. Is it possible to achieve a -like effect without using the tag?
  27. Why aren’t my bootstrap 4 columns the same height?
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment