Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
BaileyHood24

Image change on rollover?

Question

18 answers to this question

Recommended Posts

  • 5

<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

Edited by chatala

Share this post


Link to post
  • 3

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

Edited by rowzi86

Graphic designer / Art director in Seattle, WA

Share this post


Link to post
  • 2

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


Graphic designer / Art director in Seattle, WA

Share this post


Link to post
  • 1

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!

Share this post


Link to post
  • 0

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.


Graphic designer / Art director in Seattle, WA

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Edited by Bernard West

Share this post


Link to post
  • 0

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?


Graphic designer / Art director in Seattle, WA

Share this post


Link to post
  • 0

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

Edited by BlackWidow

Share this post


Link to post
  • 0

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


London based Motion Designer.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...