Jump to content

Image change on rollover?

Recommended Posts

  • 3 weeks later...
  • Replies 18
  • Created
  • Last Reply
  • 3 weeks later...

I don't know if the image sizes of the new images are too big, but there is a delay in the roll-over effect the first time the image loads. That's really poor form. If rowzi doesn't get back to you guys to help, post back here and I'll help you do this.

edit to add: Here's a solution I did for someone else. It had to be customised a bit due to the original image being an animated gif.http://answers.squarespace.com/questions/75445/changing-an-image-block-to-another-image-on-hover-or-rollover?page=1#76481

Link to comment

Hey Rowzi86

thanks for the PDF. Very generous of you. I’m assuming you put the HTML code into ‘</> code’ in the ’More’ section?

What I am after is to create an image rollover in a summary block. I’ve got a list of products that I have imported into a Summary Block. I need these images to have a rollover.

Would you have any ideas about how to do this?

Thanks

Link to comment
  • 3 weeks later...

<a href="YOUR-URL">
<img src="http://i1380.photobucket.com/albums/ah184/chatala1/Client%20Logos%20Grayscale/CocaCola_zpsdx4zkbyg.png" 
onmouseover="this.src='http://i1380.photobucket.com/albums/ah184/chatala1/Client%20Logos%20Color/cokecolor_zpsfktx21ux.png'"
onmouseout="this.src='http://i1380.photobucket.com/albums/ah184/chatala1/Client%20Logos%20Grayscale/CocaCola_zpsdx4zkbyg.png'"></a>

Paste that into a Code Block, switch out the links, be extremely careful not to change anything other than the URLs.If you don’t want the image to link to a “client” site, remove the anchor (<a>).

Cheers

Link to comment
  • 10 months later...
  • 6 months later...
  • 3 months later...
  • 2 months later...
  • 3 months later...

Hey Rowzi, Thank you so much for posting such a detailed breakdown of the steps and code needed! One question though.. I'm working on the Pacific template and am separating pages within the index with their own banner image... Long story short... I'd like to have each banner image change state/picture/something on rollover. Do you know if this code will work for that? Here's the site I'm working on to give you a better idea. Just click on the Projects tab to scroll down. www.quarryrockdevelopments.com

Cheers!

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.