Skip to main content
mjohn551
Known Participant
November 10, 2017
Answered

Linking layered graphics

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 is closed to new replies. Start a new post to keep the conversation going.
    Jon Fritz
    Jon FritzCorrect answer
    Community Expert
    November 10, 2017

    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.

    View reply

    24 replies

    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

    }

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

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

    Translate
    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    November 10, 2017

    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.

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