d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Change Image On Hover
Add Reply New Topic New Poll
Member
Posts: 6,121
Joined: Mar 22 2016
Gold: 992.66
Trader: Trusted
Feb 3 2018 02:04pm
Hey guys!

I'm trying to figure out a way to change an image (in img tags) on mouse hover, to an other image.

I don't want to alter the source code, I just want to do this with javascript or css.

The img has an id! (its a logo)

If anybody could help me out a bit, I would appreciate it :) Have tried to google, but most of the stuff I find is taken out of context, and I can't really solve my simple problem with it.

<header id="main-header" data-height-onload="110">
<div class="container clearfix et_menu_container">
<div class="logo_container">
<span class="logo_helper"></span>
<a href="/">
<img src="/wp-content/uploads/logo.png" id="logo" data-height-percentage="90" />
</a>
</div>

This post was edited by ium on Feb 3 2018 02:08pm
Member
Posts: 36,123
Joined: Jul 18 2008
Gold: 2,407.00
Member
Posts: 6,121
Joined: Mar 22 2016
Gold: 992.66
Trader: Trusted
Feb 4 2018 10:49am
Nuvo adviced me with a smooth solution: #logo:hover { content:url("foo.png"); }

:)

Problem: solved!

This post was edited by ium on Feb 4 2018 10:49am
Member
Posts: 6,121
Joined: Mar 22 2016
Gold: 992.66
Trader: Trusted
Feb 7 2018 05:09am
With a closer look it seems like that smooth solution only work for "webkit" browsers :cry:

Would need it to work with firefox (which isn't a webkit browser) also!

The link you posted, Mastersam93 would force me to alter the wordpress header code, I really don't want to do that as I want to keep everything smooth and simple :) I appreciate the input tho!
Member
Posts: 36,123
Joined: Jul 18 2008
Gold: 2,407.00
Feb 8 2018 07:04am
Quote (ium @ Feb 7 2018 06:09am)
With a closer look it seems like that smooth solution only work for "webkit" browsers :cry:

Would need it to work with firefox (which isn't a webkit browser) also!

The link you posted, Mastersam93 would force me to alter the wordpress header code, I really don't want to do that as I want to keep everything smooth and simple :) I appreciate the input tho!



You don't need to edit the header. You can edit the HTML tag like
Code
<div style="CSS goes here">stuff</div>
Member
Posts: 29,723
Joined: Jun 11 2007
Gold: 279.52
Feb 17 2018 03:12pm
you can also easily do it with javascript

html:

<div id="swapMe"><img onmouseover="swapImage()" onmouseout="swapBack()" src="firstimage.jpg"/></div>

js:

<script>

function(swapImage){
document.getElemenetbyId("swapMe").innerhtml = "<img src="secondimage.jpg"/>";
}

function(swapBack){
document.getElemenetbyId("swapMe").innerhtml = "<img src="firstimage.jpg"/>";
}

</script>

something like that, i didnt test it but i think you get the idea
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll