Jump to content

CSS change image, cant copy Image URL.

minibois

I made a website for myself so I can have some reaction images and gifs easily to copy and paste and made a small system for GIFs. A GIF is just a still .png and when you hover I change the image to the .gif (How I did that is included below). Now when I hover over an image it starts to play, but when I press the copy image URL button it just copies the image of the still .png image, instead of the gif.

When I inspect image it also shows the .png in the HTML section and the .gif in the CSS section.

Is there any way I can make this work?

 

Or better yet, have it so when I click on a picture it copies the link to the clipboard? 

Thanks.

 

 

HTML:

<img src="StillPicture.png" border="0" height="150" width="auto" id="CustomID"></a>
CSS:

#CustomID:hover{	content: url("MovingImage.gif");}

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards workhttps://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites

Link to post
Share on other sites

What code do you have for our copy image url button?

Just the regular rick click -> Copy Image URL in Google Chrome. No code for that.

gallery_73344_3516_39959.png

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards workhttps://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites

Link to post
Share on other sites

Right ok, it looks like this CSS only works in Chrome.

 

Your problem is you aren't actually replacing the image fully. Try using Javascript to change the src of the image tag on hover. That should work for you.

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×