CODEWITHSUNDEEP
htmlcssimagehyperlink
user1836262
user1836262

Reputation: 143

HTML and CSS making a image link with a hover over effect?

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>

Upvotes: 0

Views: 3232

Answers (3)

user1836262
user1836262

Reputation: 143

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>

Upvotes: 0

Shiridish
Shiridish

Reputation: 4962

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

Upvotes: 0

Alex Wayne
Alex Wayne

Reputation: 187004

Make those divs 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>

Upvotes: 3

Related Questions