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

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

Question

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

Edited by sorvaziri

Share this post


Link to post

Recommended Posts

  • 2

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

I had a quick look. I was hoping to be able to do this with a css trick. I can't find a way to do it with CSS, so it's going to have to be done with javascript. Apologies again, but I'm too tired to write the javascript at the moment. I'll get back to this tomorrow.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Edited by Bernard West

Share this post


Link to post
  • 0

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:

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

I e­­­arn 2­­­5 do­­­llars e­­­very 3­­­0 mi­­­nut­­­es. Wo­­­rk f­­­or just fe­­­w ho­­­urs a­­­nd ha­­­ve l­­­ong­­­er ti­­­me wi­­­th fr­­­iend­­­s an­­­d f­­­ami­­­ly. ­­­for more details check the link below

www.pay-buzz.com

Share this post


Link to post
  • 0

Hi Bernard, I am looking for the answer to the exact same question as sildog. I'm traviscraw.com and looking for the same roll over effect in on gallery images using css. Would really appreciate the help.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

After some trial and error I figured it out. You'll need to copy and paste the script for as many images you want the mouseover effect for. In each script you'll also need to define the target image space as something unique from the others. For example, for the first image you use "targetIMG". For the second image differentiate it from the first by calling it something like "targetIMG2". You can call it whatever you want. If you don't do this you'll only change the rollover image for the first defined mouseover space. Hope this helps!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...