3 Replies Latest reply: Jul 24, 2012 1:10 PM by endurobob RSS

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

    endurobob

      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

        • 1. Re: How do I use hot spots in the most advanced style?
          MurraySummers ACP/MVPs

          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.

          • 2. Re: How do I use hot spots in the most advanced style?
            Rik Ramsay Community Member

            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.

            • 3. Re: How do I use hot spots in the most advanced style?
              endurobob Community Member

              Thank you! When I was first building the index page I had some title text and got rid of the text but not the html h1 tags. I am brand new to this but loving it. It is logical.