7 Replies Latest reply on Feb 23, 2014 6:13 PM by Nancy OShea

    Can't Select IMG Or Make Hotspots

    JeffreyMGeorge

      I'm actually having 2 situations in the same file.

       

      I've created a DIV and inserted an IMG inside the DIV. However, when I open Dreamweaver CS6 to work on the file I can't select the IMG. The Properties panel will only show that I have the DIV selected. But if I do an edit and place another DIV or P around the IMG then suddenly I can get to the image and see the Properties. I plan on creating an image map of this image so I gave it a name in the Map box. But when I try to create hotspots all it does is start dragging the image around. The tool doesn't turn into a selector to allow me to choose a hotspot.

       

      What is going on with the file? Admittedly, it's been almost at least 6 months since I've used Dreamweaver, probably, but I've never had these problems before.

        • 1. Re: Can't Select IMG Or Make Hotspots
          Nancy OShea Adobe Community Professional & MVP

          Sounds like you're using an absolutely positioned div (APDiv) which won't work for image maps.

          Take the image out of the positioned div.  Or better still, don't use positioning.  It's totally unnecessary for basic layouts.  

           

           

          Nancy O.

          • 2. Re: Can't Select IMG Or Make Hotspots
            JeffreyMGeorge Level 1

            You're right: the DIV is AP. I was using the DIV as an overall content wrapper. The page is one large image that is going to be an image map. Should I just remove the Position property completely for the DIV or is there another setting I should use?

            • 3. Re: Can't Select IMG Or Make Hotspots
              Nancy OShea Adobe Community Professional & MVP

              Remove all positioning.

              The page is one large image that is going to be an image map.

              That's not a very wise decision for a lot of reasons.  What if images are disabled by the end user to save bandwidth?  Don't laugh, many mobile users do it to save data minutes.  What about search engines, translators and screen readers that can't see images?  If your site contains no real text in headings and paragraphs, it doesn't exist.  And since it can neither be seen nor indexed, nobody will ever find your site on web searches.  Please rethink this approach.

               

              See Creating your first web site in DW - (5-part tutorial)

              http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

               

               

              Good luck!

               

              Nancy O.

              1 person found this helpful
              • 4. Re: Can't Select IMG Or Make Hotspots
                JeffreyMGeorge Level 1

                Those are all good points you make. But before I consider alternatives in the page design I want to mention that even after removing the absolute positioning I still can't get to the properties of the image. Here's what I threw together as my starting pointe on this:

                 

                <body>

                <div id="wrapper">

                <img src="assets/sandersinc.jpg" alt="sanders" width="1918" height="1001" usemap="#main" />

                </div>

                </body>

                 

                The CSS for #wrapper is this:

                 

                {

                    width: 100%;

                    left: 64px;

                    min-height: 100%;

                    min-width: 980px;

                    height: auto !important;

                    overflow: hidden;

                    top: 21px;

                    bottom: 0px;

                    margin-top: 0;

                    margin-right: auto;

                    margin-bottom: 0;

                    margin-left: auto;

                    z-index: 0;

                    visibility: visible;

                    text-align: left;

                        }

                 

                Yet when I'm editing I can only go as low as <body><div#wrapper> for editing purposes, i.e. I cannot get to the IMG tag properties. So nothing really seemed to change by removing the absolute positioning.

                 

                As far as not using the image as the page, my source material is a Photoshop document that was provided. I was trying to make my job as easy as possible by just taking the Photoshop file, which as you can see is 1918x1001 and use that as an image map, since the navbar and everything is already on this image. What would be a viable alternative? Am I stuck having to redo all the work that was already done in Photoshop?

                 

                Thanks for your helpful information.

                • 5. Re: Can't Select IMG Or Make Hotspots
                  Nancy OShea Adobe Community Professional & MVP

                  A Photoshop design comp is a just that.  A design comp that needs to be sliced and diced into individual images for navigation, backgrounds, content areas, etc...  Do not let Photoshop generate your HTML code.  It's much too rigid and unstable for use in real sites.  Yyou need to re-create your layout with CSS and HTML in DW.  The insert your individual images into your layout or CSS backgrounds.

                   

                  You have a lot of unnecessary CSS code.  Try making these changes.

                   

                  #wrapper {

                    width: 100%;

                     left: 64px;

                      min-height: 100%;

                      min-width: 980px;

                      height: auto !important;

                      overflow: hidden;

                      top: 21px;

                      bottom: 0px;

                      margin-top: 0;

                      margin-right: auto;

                      margin-bottom: 0;

                      margin-left: auto;

                      z-index: 0;

                      visibility: visible;

                      text-align: left;

                       width: 1918px;

                       margin:0 auto;

                  }

                   

                  Or, to save time, use one of the pre-built CSS Layouts that comes with DW.  Go to File > New > Blank page > HTML.  Choose a layout from the 3rd panel.  Hit Create.

                   

                   

                   

                  Nancy O.

                  1 person found this helpful
                  • 6. Re: Can't Select IMG Or Make Hotspots
                    JeffreyMGeorge Level 1

                    You can't blame a guy for trying to take the easy way out! I figured I could just take the Photoshop jpg and plop it into Dreamweaver and carve it up into an image map like a Thanksgiving day turkey.

                     

                    I still don't understand, though, why I couldn't select the IMG for editing even after removing all positioning of the DIV.

                    • 7. Re: Can't Select IMG Or Make Hotspots
                      Nancy OShea Adobe Community Professional & MVP

                      Caused by overflow:hidden and the other unnecessary code that relates only to positioned elements.

                      1 person found this helpful