Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding hyperlink to image swap code block


emrod

Question

Site URL: https://deer-lizard-lrrj.squarespace.com/

Hi so I have a code block on this site that contains this code:

<div class="image-swap">
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpg">
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpg">
</div>

So that when I hover the image changes colour to mimic a live hyperlink.

I now want to be able to also click on this image and follow a link to another website. What code do I need?

Currently it's html.

Thanks.

Screenshot 2021-03-01 at 18.25.58.png

Screenshot 2021-03-01 at 18.26.03.png

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0

Hi,

2 options

Option 1. Use this guide to create image hover effect. You can achieve click easier.

Option 2. Edit code to this then let me know. I will give some CSS to enable clickable. Replace beaverhero with new url.

<div class="image-swap">
  <a href="https://beaverhero.com"></a>
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpg">
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpg">
</div>

 

Link to post
  • 0

Hi! So I tried the option 1 but I can't seem to get the second image to appear?

I'd like to give the second option a go as I think this makes more sense.

My issues NOW is that whatever code block is last on that page - anything underneath that code block takes that html property...

Might you know how to fix?

Link to post
  • 0
On 3/10/2021 at 12:36 AM, emrod said:

Hi! So I tried the option 1 but I can't seem to get the second image to appear?

I'd like to give the second option a go as I think this makes more sense.

My issues NOW is that whatever code block is last on that page - anything underneath that code block takes that html property...

Might you know how to fix?

Hi. Edit code to this

<div class="image-swap">
  <a href="https://beaverhero.com"></a>
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpg">
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpg">
</div>
<style>
  div.image-swap {position: relative;}
  div.image-swap a {
  	position: absolute;
    top:0
      left: 0;
    width: 100%;
    height: 100%;
  	}
</style>

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...