Jump to content

Can I use images as anchor links?

Recommended Posts

I want to use images on the top of my page and link them to different sections of the same page. I know I can use anchor links, but the guide only explains how to use the text links. I want to use images as the links.

Is it possible?

Link to comment
  • Replies 1
  • Views 6.3k
  • Created
  • Last Reply

Yes, you can use images as anchor links. The trick here is to use Code blocks to display the images. The Code Blocks allow you to add the anchor link information, and display the images. These are the steps:

1) Add a Code Block to your page and add this code:


<a href = "#anchor"><img src="image1.jpg" style="width:800px, height:200px"></img></a>

The 'a' tag will contain the information about the id where the link is targeted.The 'img' tag will contain the source of the image (src) and a some size variables for the image

2) Add another block within the content of the page with the target code:


<img src="image2.jpg"style="width:800px, height:200px" id="anchor"></img>

The 'img' tag contains the source (src) of a different image (it could be the same image too), size variables and the 'id' variable from the anchor link on the first Code Block.

Some tips:

a) You could upload the images to your site, on a Not Linked page, using Image blocks; and use then use the URL for each image. Here's a great article about finding the URL link of your images:

http://answers.squarespace.com/questions/2073/where-do-i-find-the-url-of-uploaded-images

b) You can add a Back to top button on each section. Here's another great article:

http://answers.squarespace.com/questions/24751/montauk-how-to-create-a-back-to-top-link

Here's how it looks on my site:

alt text

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.