Skip to main content
Known Participant
November 10, 2017
Answered

Linking layered graphics

  • November 10, 2017
  • 2 replies
  • 1571 views

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

]

    This topic has been closed for replies.
    Correct answer Jon Fritz

    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.

    2 replies

    Legend
    November 10, 2017

    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

    }

    Jon Fritz
    Community Expert
    Community Expert
    November 10, 2017

    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.

    mjohn551Author
    Known Participant
    November 10, 2017

    thanks Jon,

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

    Nancy OShea
    Community Expert
    Community Expert
    November 11, 2017

    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(:


    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

    Nancy O'Shea— Product User & Community Expert