emrod 1 Share Posted March 1 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. Link to post
0 tuanphan 9,575 Share Posted March 6 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> Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 emrod 1 Author Share Posted March 9 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 tuanphan 9,575 Share Posted March 20 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> Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
emrod 1
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.
Link to post
Top Posters For This Question
2
2
Popular Days
Mar 1
1
Mar 6
1
Mar 9
1
Mar 20
1
Top Posters For This Question
emrod 2 posts
tuanphan 2 posts
Popular Days
Mar 1 2021
1 post
Mar 6 2021
1 post
Mar 9 2021
1 post
Mar 20 2021
1 post
Posted Images
3 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment