HTML and CSS making a image link with a hover over effect?
Question
I cut out a bunch of my code to get down to what I need help with, I have a image that when I hover over it it changes images, but how cna I add on that when I click on that image it brings you to lets say mywebsite.com ?? http://pastebin.com/h83yi3e3
Code:
<html>
<head>
<style>
#buttonOne {width:140px;height:60px;background-image:url(buttonOne.png);}
#buttonOne:hover {width:140px;height:60px;background-image:url(buttonOneH.png);}
#buttonTwo {width:140px;height:60px;background-image:url(buttonTwo.png);}
#buttonTwo:hover {width:140px;height:60px;background-image:url(buttonTwoH.png);}
#buttonThree {width:140px;height:60px;background-image:url(buttonThree.png);}
#buttonThree:hover {width:140px;height:60px;background-image:url(buttonThreeH.png);}
</style>
</head>
<body>
<div id="buttonOne">
</div>
<div id="buttonTwo">
</div>
<div id="buttonThree">
</div>
</body>
</html>
3 answers
solution1
3 2012-11-20 06:53:08
Make those div s into a tags instead. That's kind of what they are for. If you want an element that you can click to go to another url, you want an <a> tag.
<a id="buttonOne" href="http://letssaymywebsite.com/"></a>
<a id="buttonTwo" href="http://letssaymywebsite.com/"></a>
<a id="buttonThree" href="http://letssaymywebsite.com/"></a>
solution2
0 2012-11-20 06:55:07
Using anchor tags you can do like this-
<a id="buttonOne" href="mywebsite.com"></a>
...
and then you can use a:hover to change the images
In css-
#buttonOne a:hover
{
background-image:url(buttonOneH.png);
}
...
solution3
0 2012-11-20 16:40:14
Well i'm not sure what you guys were talkign abotu removign the divs, didn't work for me, What I did is inside those empty divs I had I added in a link-image that was invisible.
<div id="buttonOne">
<a href="mywebsite.com" target="_blank"><img src="inbut.png">
</a>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.