Rollover image in a div? - html

Question

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"><img src="Images/twitter_06.png" width="46" height="51" ></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;
}

Answer 1

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">
</div>

Answer 2

You can do that with javascript.
<div class="twitter"><img src="1.png"/></div>
<script type="text/javascript">
var t = document.getElementsByClassName("twitter")[0];//i only have one element with that tag so...
//if you are going to put more you can loop through them
prepareRollOver(t);//call the function to prepare the rollover
function prepareRollOver(target){
target.onmouseover = function (){
img = this.getElementsByTagName("img")[0];//only one img expected, so take the first of the array
img.src="src1.png"
}
target.onmouseout = function (){
img = this.getElementsByTagName("img")[0];//only one img expected, so take the first of the array
img.src="src2.png"
}
}
</script>
You can also do this with css like this
.twitter{
background:url("1.png");
}
.twitter:hover{
background:url("10.png");
}
But remove the img tag inside the div, you don't need it if you are going to use css
Change src1.png and src2.png to match your file names.