Skip to main content
M
mjohn551
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

    O
    osgood_
    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
    Jon FritzCommunity 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.

    M
    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.

    M
    mjohn551Author
    Known Participant
    November 15, 2017

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


    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices