Image change on rollover?

Does anyone know how to have an image change on the rollover?

I do! you can inject code, and have the images link to a hidden disabled page. Here is the example of how I used it:

http://www.rauzidesign.com/

Let me know if this looks like what you are looking for, and I can help you with the code.

Rowzi,

I've been looking for the same solution -- only using an animated .gif in the hover state. Would you mind sharing your injected code?

Thanks!

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

Bernard West- Is the delay you are referring to on mine? I haven't had any issues on this end with loading. Are you seeing the same problem on my "graphic design" as well, or just the home page?

For the life of me can't get the code on here to show up, but only as what is coded, there is surely a magic button I am missing haha. So I just made a PDF of how I did it. See below. Hope this helps. I haven't tried it with a gif before so let me know if it works for you!

https://rauzidesign.squarespace.com/squarespacehack

Thanks for the fancy PDF doc. I appreciate you taking the time to break it down!

No problem! It took me forever to get it figured out, so I hope it can help you guys save some time and headaches.

It's only the first time, as after that the images are cached. But first time visitors to your site will not see a very professional effect.

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

<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

How to create a rollover/hover image title?

Thank you @rowzi86 !! This is exactly what I have been looking for. Except it doesn't seem to be working on my site! AGH! Any chance you could help?? You can see the little ? box where the image and rollover should be working on this page:

http://www.brydonholsey.com

PLEASE let me know if you are able to figure it out!! THANK YOU!

@dl33ds, did you ever get this figured out for rollover gifs? Let me know!

@dl33ds, did you find a solution to this? Please let me know!

@chatala, thanks!This code worked at first for me, but I need it to work on mobile, too! Can you help me with that?

Thanks again.

Hi,

I'm trying to do this but for several Thumbnail pages...Is there a way to make this? Would it work by adding this code to each Page under the Custom CSS?

Thanks in advance,Pedro

Does anyone know what the specific code is to do this in a thumbnail box on the index page instead of a typical image block? And would you insert it into the footer in the code injection spot? Thanks!

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!