Skip navigation
endurobob
Currently Being Moderated

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

Jul 24, 2012 12:21 PM

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.ht ml#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

 
Replies
  • Currently Being Moderated
    Jul 24, 2012 12:45 PM   in reply to endurobob

    Have you considered asking these questions of Matt Stow?

     

    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">

     

    and see what happens to your space between those two divs.

     

    To add some informatory text, use the title attribute on the hotspot, e.g.,

     

    on this page (http://www.gws-sandbox.com/test-hotspot.html), I have added a title attribute with the value of "Her lips" to a hotspot placed around her lips. Mouse over it to see.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 1:01 PM   in reply to MurraySummers

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points