Jump to content

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

Recommended Posts

Hello,

I would like to change the thumbnails of my portfolio to a completely different image on the hover. It will link out to a site within my website, and I do not want any transitions. I don't know how to write the CSS (and exactly what/how I should label the thing I am changing).. I know I have to change each individual element and that is fine with me, but I also want the hover image to retain the size of the the image it's replacing.

my website: https://sorina-vaziri-vhqm.squarespace.com/

image I would like the rotating jersey gif to change to: http://i58.tinypic.com/2vnqq1g.jpg

If anyone could help me with this I would very much appreciate it :) I can't seem to find the solution for my specific problem

Link to comment
  • Replies 30
  • Created
  • Last Reply

I couldn't help myself so I had a go at it. ;) Logically the javascript I wrote works fine, but there's a problem with the mouse hover interacting with the animated gif. As the gif cycles through, the "hover" deactivates until you move the mouse again. I'm not sure that the hover will be able to work with the gif. And the gif effects the hover of all it's parent elements too, so targeting one of the container elements of the image doesn't work either. I'm at a bit of a loss as to what to try next.

Link to comment

Ok, I've worked out a javascript solution. It still needs a little tweaking to get the formatting of the new image right, but it's late and I'll have to get back to that tomorrow. Instead of using a CSS "hover" selector, it uses a javascript "onmouseover" and "onmouseout" instead. That overcomes the problem with the hover selector not interacting with the animated gif properly.

So, you need to stick this code into the header of that specific page (page settings->advanced->page header code injection). From past experience, it might not work in the header. If it doesn't we'll need to stick it in the site wide footer injection point. To find that go to "settings" in the left hand edit menu, "advanced", "code injection" and then stick it in the "footer" section. Here's the code:


<script>
   (function() {
 var imgs = document.getElementsByTagName('img');

 for (var i = 0, n = imgs.length; i < n; i++)
 {
   if (imgs[i].getAttribute("data-image-id") == "5502fcb0e4b03593df0d8ed2")
   {
     imgs[i].setAttribute("id", "targetIMG");
     imgs[i].addEventListener("mouseover", newImage);
     imgs[i].addEventListener("mouseout", oldImage);
     break;
   }
 }

})();

function newImage() {
 var img = document.getElementById("targetIMG");  
 img.getAttributeNode("src").value = "http://oi58.tinypic.com/2vnqq1g.jpg";
}

function oldImage() {
 var img = document.getElementById("targetIMG");  
 img.getAttributeNode("src").value = "https://static1.squarespace.com/static/54f25f11e4b02d9040dcf4b4/t/5502fcb0e4b03593df0d8ed2/1426259135697/BlackTie?format=1000w";
}
</script>

Note, if you change any of these images, you'll need to directly change this code to match the new image details.

Let me know how that goes.

Link to comment

Hi Bernard,

first of all THANK YOU SO MUCH :) I really really appreciate it! It worked when I injected it in the footer, not the header but it stretched (horizontally) my hover image. Is there anyway I could retain the size of the image?

best and have a great weekend,

Sorina

Link to comment

Yeah, I'll have a look at the formatting now. Not sure if you realise, but the original animated gif is too big for the container. In the real image his hands aren't cut off, but on your site they are. Both images are being height matched to the height set in your design and that's causing the replacement image to stretch horizontally. In other words, the ratio of the image container on your site doesn't match the ratio of the images being put in there. Anyway, I'll have a look and see what I can do.

Link to comment

Ok, I changed the aspect ratio of the replacement image to match the aspect ratio of the original gif, and it works fine. Of course, the original gif is still being cropped, so if you want to fix that you'll have to add some white space around the top and bottom of it to make it's aspect ratio match that of the img container on your website. At which point we'll need to change the aspect ratio of the replacement image again. :)

cont. below:

Link to comment

cont from above:

Anyway, try replacing

'http://oi58.tinypic.com/2vnqq1g.jpg' in the code above with 'https://www.dropbox.com/s/dw6q5m6sj8urzh8/2vnqq1g.jpg?raw=1'

and you can see the result. That's a link to the resized file on my dropbox. I'll leave that link live for a day or two, but after that I will delete it. You can either steal that image from my dropbox, or create your own so that it matches the image ratio of 700:709 (width:height).

Link to comment
  • 2 weeks later...
  • 3 weeks later...

Hi Bernard,First of all, thanks so much. Your script works GREAT. Is there a way to use this for a series of images? Like for a portfolio? The page I'm working on is: https://jeanette-illidge-design.squarespace.com/config#/pages|/portfolio. I got it to work on the first image but when I tried for the second... nope. LOL. My website is a MESS right now, I'm in the process of transferring all my info over from one template to another, re-formatting, etc., so please forgive the craziness. Any help you could lend would be much appreciated!

Hi! I'm an Atlanta based Graphic Designer and Photographer.

Link to comment

Hi Bernard,First of all, thanks so much. Your script works GREAT. Is there a way to use this for a series of images? Like for a portfolio? The page I'm working on is: https://jeanette-illidge-design.squarespace.com/config#/pages|/portfolio. I got it to work on the first image but when I tried for the second... nope. LOL. My website is a MESS right now, I'm in the process of transferring all my info over from one template to another, re-formatting, etc., so please forgive the craziness. Any help you could lend would be much appreciated!

Hi! I'm an Atlanta based Graphic Designer and Photographer.

Link to comment

I'm not 100% sure of what your question is. You can change any image you want with a hover/rollover effect. You just need to target each image. If you want each image to have the exact same hover effect, then you could probably write a javascript routine to do that.

One thing to remember about my answer above... It uses javascript because the orginal image to be replaced for the OP was an animated gif. If you just have a static image, then it's best to use CSS for the hover effect. I, and others, can help you with that too. It's much easier with CSS than with javascript.

Link to comment
  • 1 month later...

Bernard, you are a true boss. This is great! I have only made it work for the first GIF on my site, but people like you make fiddling around with code that much easier! Thank you!

Link to comment

Bernard, you are a true boss. This is great! I have only made it work for the first GIF on my site, but people like you make fiddling around with code that much easier! Thank you!

Link to comment

Hi Bernard! You're awesome. I'm trying to do what you describe above: have my grid gallery images change to new images on hover with CSS. Could you please share this easier method you mentioned? It's for www.killinit.in/copywriting. Going to have the images change from b&w to color images of the exact same size.

I'm also new to this, so am a bit confused about how to store the images. Should I put them up somewhere like dropbox, or is it better to host them on my site with an unlisted gallery?

Thanks so much!

Link to comment
  • 7 months later...

Hi Bernard,

I've got two static images I'd like to use the rollover feature with. I know you said its better (and easier) to use CSS for the hover effect. Can you talk me through doing it that way?

Link to comment
  • 2 months later...
  • 2 weeks later...

Hi, At first thank you for the information and sorry for my english.

I want to change all the thumbnails in the covers of my galleries. I want change from image to gif on mouse over.

I need some help because i dont know where put the link of my image and the link of my gif. And i dont know where copy your code to change the thumbnails.

Thank you so much.

Link to comment

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.