How to Change a Background Image on Rollover
HTML lets you set a page or element's background image. CSS, however, offers more flexibility, creating separate styles, each with its own background image. Your elements can then apply these separate styles to change the background image from the default. One way to set these styles to become active and inactive is to start the page with a function in JavaScript.
Other People Are Reading
Instructions
-
-
1
Enter the following code between the head and body tags:
<SCRIPT language="JavaScript">
function changeBG(action) {
if(action == "mouseON") {
document.getElementById(objectID).className="mouseON";
}
else {
document.getElementById(objectID).className="mouseOFF";
}
}
</SCRIPT>
-
2
Add the following code between the page's style tags:
<STYLE>
.mouseON{
background-image: url(changedImage.jpg);
}
.mouseOFF{
}
</STYLE>
-
-
3
Replace "changedImage.jpg" with the url of the new image you want to appear.
-
4
Insert the following text within the page's body:
<TABLE>
<TR id="firstElement">
<TD class="over" OnMouseOver="changeBG('mouseON', 'firstElement')" OnMouseOut="changeBG('mouseOFF', 'firstElement')">Content</TD>
</TR>
</TABLE>
-
5
Replace "content" with the text you want to change the background image for.
-
1
