Jump to content

Changing an image block to another image on hover or rollover?

Recommended Posts

After some trial and error I figured it out. You'll need to copy and paste the script for as many images you want the mouseover effect for. In each script you'll also need to define the target image space as something unique from the others. For example, for the first image you use "targetIMG". For the second image differentiate it from the first by calling it something like "targetIMG2". You can call it whatever you want. If you don't do this you'll only change the rollover image for the first defined mouseover space. Hope this helps!

Link to comment
  • Replies 30
  • Created
  • Last Reply
  • 4 weeks later...

Hi Bernard,

I have the same question jlnelson. I'm trying to get a hover from one image to another so I can do a before and after affect with my retouching. I found this html script pasted below, but I can't seem to get it to work. I end up with this result: http://www.elopro.com/before-and-after-rollover/

Perhaps you have a CSS solution that might work?

html code: https://static1.squarespace.com/static/521bb1e2e4b0b9fc4088a091/t/554128a3e4b0dfaffe62609c/1430333603172/Rollovers_SquarespaceHack.pdf

Not sure why it didn't work, but I am all ears to suggestions.

Thank you!

Link to comment
  • 3 months later...

Hi Bernard, Is there a code that exist for images only? i am referring to your mention of a "CSS hover selector".I am using the Jasper template and would like to swap the image for another one on rollover on my homepage, keeping the title (and changing it to white) — but one step at a time — the image swap on rollover first would make me very happy!Thank you!

Link to comment
  • 1 month later...
  • 1 year later...

Archived

This topic is now archived and is 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.