Changing Link Image On Hover
my question today probably has an easy answer, however I have found a few working examples but can't seem to transfer it to my web page. I am trying to use an image for a link, and
Solution 1:
Please take a look at https://jsfiddle.net/avzfdc2j/3/
It has been done using css with background image and transition
div.smile {
background-image: url("http://images.clipartpanda.com/stupidity-clipart-1320682287266972230curius_face.svg.hi.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
cursor: pointer;
}
div.smile:hover {
background-image: url("http://images.clipartpanda.com/straight-face-clipart-black-and-white-smiley-face-hi.png");
transition: ease 0.5s;
}
<a href="http://google.com/"><div class="smile"></div></a>
Solution 2:
You should be changing the src
attribute instead:
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
But I don't think that the transition will work with this.
Solution 3:
Since it's an image, you need to change it's src
property, not it's CSS.
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
Post a Comment for "Changing Link Image On Hover"