Search code examples
htmlcssimagerollover

Rollover image in a div?

I have a custom twitter share button that is in the bottom right of my page. Its an image inside a div that is meant to rollover, but it wont rollover. Is it even possible to add rollover images inside a div? so is there a workaround that will make the image rollover?

HTML:

<div id="twitter"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('twitter','','Images/twitterrollover_06.png',1)"><img src="Images/twitter_06.png" width="46" height="51" ></a></div>

CSS:

#twitter {
font-family: "Bebas Neue";
color: #000;
margin: 0 auto;
padding: 0;
right: 40px;
bottom: -12px;
position: fixed;
z-index: 100;
font-size: 30px;
}
Solution

  • If this is a simple image rollover don't use JS for this use CSS.

    a.twitter {
   display: block;
   cursor: default;
   width: 400px;
   height: 300px;
   background: url('images/twitter.png') top left;
}

a.twitter:hover {
   background-position: center left;
}

a.twitter:active {
   background-position: bottom left;
}

    Mark it up in HTML like so...

    <div class="twitter">
    <a href="javascript:void(0)" class="twitter"></a>
</div>