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

Image change on rollover?


BaileyHood24
Go to solution Solved by chatala,

Question

  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

<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/albu

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
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

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!

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
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

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
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.

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!

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!

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

×
×
  • Create New...