How do I use hot spots in the most advanced style?

Question

My first attempt at Dreamweaver web design.http://www.deer-harbor-stewardship-project.org  . I will be resampling my images and doing a ton of other appropriate modifications but here are some initial questions. How do I use this "plug in" http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#blossom feature for my fluid grid responsive image map. How can I make my hot spots turn up little boxes with a photo, an illustration, or informatory text? How do I get ride of the spaces between divs? Sorry if I have asked too many questions. I better read the forum user rules if you have them. thanks for reading this. endurobob

Answer 1

Murray *ACP* wrote:
Anyhow, it makes no sense to put image tags within container tags meant to convey semantic meaning to their contents since an image has no semantic meaning.  So try changing this -
<div id="header">
      <h1><img src="_images/title_scan.jpg" alt="newtitle"></h1>
to this -
<div id="header">
      <img src="_images/title_scan.jpg" alt="newtitle">
I completely agree with this. However, if having an image as a heading was important (if you styled it in a way you can not with CSS) you could always code the image into the heading through CSS.
Something like:
<h1 class="heading">This is a heading</h1>
h1.heading {
margin:0;
width:??;
height:??;
background: #000 url(ImageURLHere) no-repeat;
text-indent:-9999px; /* This will move the text of the heading off-screen */
The 0 margin on the style should clear up the gap as well.