Jump to content

syntax error when adding image hover to image which already clicks thro' to a second page

Recommended Posts

My image is in an image block (not a code block) and clicks through to second page successfully. But I would like original image to hover on to second image as well as clicking thro' to second page. This is code I have entered but it brings up syntax error referencing <img line. Any help would be much appreciated. Thank you.

<img src="https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd953e537667a78e5a6bb/1640880473238/Katy+Hepburn_1SSBend1.png"
onmouseover="this.src=https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd97310a48011dfc6d8f4/1640880518189/KH+Bend+One+shine+image+1.png"
onmouseout="this.src=https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd953e537667a78e5a6bb/1640880473238/Katy+Hepburn_1SSBend1.png"
>

syntax error line 6.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

6 minutes ago, Dominique_48 said:

My image is in an image block (not a code block) and clicks through to second page successfully. But I would like original image to hover on to second image as well as clicking thro' to second page. This is code I have entered but it brings up syntax error referencing <img line. Any help would be much appreciated. Thank you.

<img src="https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd953e537667a78e5a6bb/1640880473238/Katy+Hepburn_1SSBend1.png"
onmouseover="this.src=https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd97310a48011dfc6d8f4/1640880518189/KH+Bend+One+shine+image+1.png"
onmouseout="this.src=https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd953e537667a78e5a6bb/1640880473238/Katy+Hepburn_1SSBend1.png"
>

syntax error line 6.png

You put in it Home > Design > Custom Css, didn't you? The Custom Css can not read the element tag like in the code block

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Thank you very much. Yes, previously I created code in code block which worked with image hover but then I did not know how to add click through to second page. 

I found similar question in a forum where answer suggested no code block was required, see below -

_ _ _

I want to have an image on my website that changes when you hover over it and you can click which sends you to another page on the website.

I haven't been able to find this anywhere, maybe I'm just not asking the right question?

Here is the code I have so far which works for the hover image change, but I can't figure out how to make it clickable and redirect.

"<img src="Original-Image.pmg" onmouseover="this.src='second-image.png'" onmouseout="this.src='Original-Image.png'">"

Thanks for your help!

 

Tuanphan reply – 7 Jan 2020

No need to use Code Block.

First add Image Block

Next, upload image

Next, add link

Next, use CSS to change image on hover

_ _ _ _ _ _ _ _

Should I revert to code block which works for image hover but then how do I make it possible to click on image and be taken to a second page on the website?

Thanks again.

Link to comment
10 hours ago, Dominique_48 said:

Thank you very much. Yes, previously I created code in code block which worked with image hover but then I did not know how to add click through to second page. 

I found similar question in a forum where answer suggested no code block was required, see below -

_ _ _

I want to have an image on my website that changes when you hover over it and you can click which sends you to another page on the website.

I haven't been able to find this anywhere, maybe I'm just not asking the right question?

Here is the code I have so far which works for the hover image change, but I can't figure out how to make it clickable and redirect.

"<img src="Original-Image.pmg" onmouseover="this.src='second-image.png'" onmouseout="this.src='Original-Image.png'">"

Thanks for your help!

 

Tuanphan reply – 7 Jan 2020

No need to use Code Block.

First add Image Block

Next, upload image

Next, add link

Next, use CSS to change image on hover

_ _ _ _ _ _ _ _

Should I revert to code block which works for image hover but then how do I make it possible to click on image and be taken to a second page on the website?

Thanks again.

You can add Image Block, add a link. Then share link to page where you added image, we will give the code to add hover effect

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.