Jump to content

CLICKABLE COVER IMAGE

Recommended Posts

Posted

Hi, im trying for a long time to find a solution to this but I can't.

Im wondering how I can make a full screen photography in the COVER page clickable to direct to my website.

I don't want to use buttons. Simply click any part of the image in order to access to the web.

Thanks in advance!

  • Replies 6
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 years later...
Posted

Hi, 

I would like the cover page of my site www.delmialvarez.com clickcable without any action button. I was trying to follow your steps but i can´t get it.

My idea is have a clean cover image, with my logo on top and only the image should be linked when click over to a page. As you can see in the ttachemdn there is an ACTIOn buttonn called ENTER. I would like hide the button and just made the image clickcable in the whole space to a page.

Thank you for any idea, help or support.

 

Best

delmi

Captura de pantalla 2022-06-22 a las 10.25.37.jpg

Posted
23 hours ago, delmi said:

Hi, 

I would like the cover page of my site www.delmialvarez.com clickcable without any action button. I was trying to follow your steps but i can´t get it.

My idea is have a clean cover image, with my logo on top and only the image should be linked when click over to a page. As you can see in the ttachemdn there is an ACTIOn buttonn called ENTER. I would like hide the button and just made the image clickcable in the whole space to a page.

Thank you for any idea, help or support.

 

Best

delmi

Captura de pantalla 2022-06-22 a las 10.25.37.jpg

Add to Your Cover Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	$('.sqs-slide-wrapper[data-slide-type="cover-page"] .sqs-slide').click(function() {
  window.location = $(this).find("ul li a").attr("href"); 
  return false;
});
});
</script>
<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] .sqs-slide {
    cursor: pointer;
}
  ul {opacity: 0 !important;}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
5 hours ago, tuanphan said:

Add to Your Cover Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	$('.sqs-slide-wrapper[data-slide-type="cover-page"] .sqs-slide').click(function() {
  window.location = $(this).find("ul li a").attr("href"); 
  return false;
});
});
</script>
<style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] .sqs-slide {
    cursor: pointer;
}
  ul {opacity: 0 !important;}
</style>

 

Hi, thank you for your reply.

I can´t see how to do that in sqs. My plan is basic and I don´t have code injection.

 

Posted
On 6/23/2022 at 9:03 PM, delmi said:

Hi, thank you for your reply.

I can´t see how to do that in sqs. My plan is basic and I don´t have code injection.

See this new answer

https://forum.squarespace.com/topic/152750-how-to-add-clickthrough-url-to-custom-css-image/?do=findComment&comment=557884

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.