24 Replies Latest reply on Nov 15, 2017 2:57 PM by Nancy OShea

    Linking layered graphics

    themeister Level 1

      Is there any way I can place a small .jpg on a larger one and render the smaller image clickable (that is, linked to a third page?)  I was hoping I could link layers, but that is apparently not possible.

       

      Thanks.

       

      Mike

      ]

        • 1. Re: Linking layered graphics
          Jon Fritz II Adobe Community Professional & MVP

          Probably the easiest way, if you're not worried about responsive scaling for mobile devices, would be to just turn the two images into one in Photoshop, add it to the page, then use an Image Map hotspot from the Properties window to link the smaller inset image to wherever you like.

          • 2. Re: Linking layered graphics
            themeister Level 1

            thanks Jon,

             

            Sounds simple.  How do I use or create an Image hotspot?  Am using DWCS4.  Responsive format not an issue.

            • 3. Re: Linking layered graphics
              Jon Fritz II Adobe Community Professional & MVP

              1. Click the Image in Design View to select it

              2. In your Properties window (Window > Properties or Ctrl + F3 if it's not open), click the area hotspot tool you want to use (rectangle, circle or polygon)

              3. Click and drag the hotspot over the image where you want the link to appear.

              4. With the hotspot selected, add the location to the Link field in the Properties inspector.

               

              Yours won't be the same color, but the icons themselves haven't changed location or basic look since introduced...

               

               

              If you don't see the hotspot options, make sure you are in Design View, the image is selected, and that the Properties window isn't collapsed. I don't recall if CS4 had it, but later versions have a tiny triangle on the far right side of the Properties window that collapses/expands the Image Map tools.

              • 4. Re: Linking layered graphics
                themeister Level 1

                Very cool! I clicked the hotspot but was unable to drag and drop it over the image.  Must I do something else?

                • 5. Re: Linking layered graphics
                  osgood_ Level 8

                  themeister  wrote

                   

                  Is there any way I can place a small .jpg on a larger one and render the smaller image clickable (that is, linked to a third page?)  I was hoping I could link layers, but that is apparently not possible.

                   

                   

                   

                  Just for your reference you can put a <div> (youre calling it a layer) inside another <div> and have one <div> sit above the other using absolute/relative css positioning.

                   

                  <div class="large_image">

                   

                   

                  <div class="small_image">

                  <a href="#"><img src="small_image.jpg" alt=""></a>

                  </div>

                  <!-- end small_image -->

                   

                  <img src="large_image.jpg" alt="">

                   

                  </div>

                  <!-- end large_image -->

                   

                   

                  Css

                   

                  .large_image {

                  display: relative;

                  }

                   

                  .small_image {

                  width: 100px;

                  height: 100px;

                  display: absolute;

                  top: 30px; /* distance from top of large_image

                  left: 60px; /* distance from left of large_image

                  }

                  • 6. Re: Linking layered graphics
                    Jon Fritz II Adobe Community Professional & MVP

                    Sorry, looking back, I guess that wasn't quite as clear as it should have been.

                     

                    Clicking the tool selects the tool shape (rectangle, circle or polygon).

                     

                    Once selected, you then go back to the image in Design View to click and drag/draw the chosen shape.

                     

                    The Properties window should automatically change to the new shape so you can fill in the Link field.

                    1 person found this helpful
                    • 7. Re: Linking layered graphics
                      Nancy OShea Adobe Community Professional & MVP

                      Image maps don't work on Layers (aka absolutely positioned divs). 

                      1. Start with a new document. 
                      2. Insert an image.
                      3. Invoke the Map shape (see screenshot) by clicking and dragging a shape over your image.
                      4. Add URL to the Link field.

                      CS6-HotspotTools.jpg

                      1 person found this helpful
                      • 8. Re: Linking layered graphics
                        themeister Level 1

                        Jon,

                         

                        Below is screen shot of image I'm working with.  It's part of a map with

                        little gnomes placed strategically, each of which will be linked to an

                        .html page.

                         

                        Question is - after I mark a particular gnome with a shape - how do I

                        save/remove the shape that remains over the gnome?

                         

                        Mike

                        • 9. Re: Linking layered graphics
                          Nancy OShea Adobe Community Professional & MVP

                          These web forums do not support email attachments.  You need to post images directly in a web forum reply - see screenshot.

                           

                          The code is saved when you save your HTML page.

                           

                          The Hotspot shapes remain visible in Design View so you can see them.

                           

                          The shapes are not visible in Live View or when Previewed in browsers EXCEPT in  Internet Explorer which puts a distracting blue border around image map hotspots.  Try using a different browser.

                          • 10. Re: Linking layered graphics
                            themeister Level 1

                            Nancy,

                             

                            Think I answered my own question (graphic attached to keep me honest), but, the reason I originally asked was based on a new "anomaly".  Namely, While working on this page, the functionality of viewing the page live, via F12 or Preview in Browser > Firefox, suddenly stopped.  That is, I cannot preview files.  I saw this occurred with other users, but none of the answers seemed appropriate. 

                             

                            Thanks, Mike

                             

                            gn map.JPG

                            • 11. Re: Linking layered graphics
                              Nancy OShea Adobe Community Professional & MVP

                              Right-click on open tab and select Open in Browser.

                              CC-Preview-in-browser.jpg

                              • 12. Re: Linking layered graphics
                                themeister Level 1


                                When I right click the file, Compare with Remote is the last option shown.  There is no Open in Browser.

                                • 13. Re: Linking layered graphics
                                  themeister Level 1

                                  And, when I click File > Preview in Browser >, nothing happens regardless which selection I choose.

                                  • 14. Re: Linking layered graphics
                                    Nancy OShea Adobe Community Professional & MVP

                                    1) Did you create a local site folder for your project by going to Site > New Site?

                                    CC-localsite.jpg

                                    2) Have you saved your document (index.html)?  And do you see your site folder in the Files Panel (F8)?

                                    CC-StarterPageAssets.jpg

                                    • 15. Re: Linking layered graphics
                                      themeister Level 1

                                      Nancy,

                                       

                                      Yes to all.  And the F12 non-functionality applies to 5 different sites that I've been working with for years.  Like I said, an anomaly.  This has never happened before.  Am at a loss(:

                                      • 16. Re: Linking layered graphics
                                        Nancy OShea Adobe Community Professional & MVP

                                        F12 invokes Real-Time Preview which is different than ordinary Preview in Browsers as it connects to an Adobe server.  In my experience, RTP it is prone to failure which is why I use right-click > Open in Browser without the the F12 key.

                                         

                                        If you're not able to launch any browser to view your files, then something is wrong with your installation.

                                         

                                        Start with Restore Preferences.

                                        Unusual behavior in Dreamweaver? Try restoring preferences.

                                         

                                        If that doesn't work,  use the CC Cleaner Tool below followed by a software re-install.

                                        Use the Creative Cloud Cleaner Tool to solve installation problems

                                        • 17. Re: Linking layered graphics
                                          themeister Level 1

                                          I ran CC Cleaner with no change.  I didn't reset preferences because it seemed too big a deal to redo.  I did, however, copy the html files, etc., onto a laptop also running DW4 and everything worked perfectly, including viewing in browser.

                                           

                                          Only thing I can think of is that the problem began after updating iTunes on the subject desktop yesterday.  I subsequently uninstalled everything Apple from my desktop and now, when booting, receive a missing icudt55.dll file System Error (re: APSDaemon.exe).

                                           

                                          Might this mean anything to you?

                                          • 18. Re: Linking layered graphics
                                            Nancy OShea Adobe Community Professional & MVP

                                            See this Apple support article for details on uninstalling iTunes and its related software.

                                            Remove and reinstall iTunes and related software components for Windows 7 and later - Apple Support

                                            • 19. Re: Linking layered graphics
                                              themeister Level 1

                                              Thought about reinstalling iTunes, but then thought not.  Guess it can't hurt.  Will give it a try.  Thanks for the push.

                                              • 20. Re: Linking layered graphics
                                                themeister Level 1

                                                iTunes reinstalled but Preview - any way you do it - still doesn't work.  I did notice though, that the Windows key is disabled.  Curiouser and curiouser.

                                                • 21. Re: Linking layered graphics
                                                  themeister Level 1

                                                  Quick question if you're still around, is there a Preferences file i can replace on the non-working computer with one on another computer that I know works? Same folder names and directories.

                                                  • 22. Re: Linking layered graphics
                                                    Nancy OShea Adobe Community Professional & MVP

                                                    If you're using Creative Cloud, you can Sync settings to the Cloud and then import them from the Cloud.  See screenshot.

                                                    • 23. Re: Linking layered graphics
                                                      themeister Level 1

                                                      Hi Nancy,

                                                       

                                                      Am working on the .html page on a laptop and all is well with viewing in browsers, although the same problem persists with primary desktop.

                                                       

                                                      Since you w3re so helpful the other day, thought I might mention something that may be of interest to you.  If I activate CS4 and Open the "problem" .html page, I still cannot preview in browsers.  Then, subsequently and while in the same session, if I open another fiIe, I am unable to preview THAT or any other .html file in any of 4 other sites.  On the other hand, if I activate and then Open CS4 and click on a different .html page from a different site, I CAN preview in browsers.  Until and unless I then click on the problem .html.

                                                       

                                                      Have renamed and copied the .html file to myriad other names.  That's not the issue.  Have no idea what is, but thought I'd share this with you.

                                                      • 24. Re: Linking layered graphics
                                                        Nancy OShea Adobe Community Professional & MVP

                                                        I'm no expert with legacy CS4 as I never used it.   My guess is your problem file is corrupted or it contains so many critical code errors it's causing your software to choke.

                                                         

                                                        You might want to open it in a plain text editor like NotePad or Brackets and see if you can isolate the problems.

                                                         

                                                        If that can't be done.  Delete it and start over with a similar site page that doesn't have problems in it.

                                                         

                                                         

                                                        Nancy