Log in

View Full Version : Table - changing background image on mouse over


john_lessells
08-04-2005, 09:37 AM
Hi,

I'm making a website and have a table as shown below:


<HTML>
<HEAD><TITLE>
Research</TITLE>

<!-- Navbar def -->
<script language="JavaScript" type="text/javascript">
<!-- Dummy comment to hide code from non-JavaScript browsers.

if (document.images) {
B1_off = new Image(); B1_off.src = "1995up.bmp"
B1_over = new Image(); B1_over.src = "1995dn.bmp"
B2_off = new Image(); B2_off.src = "1996up.bmp"
B2_over = new Image(); B2_over.src = "1996dn.bmp"
B3_off = new Image(); B3_off.src = "1997up.bmp"
B3_over = new Image(); B3_over.src = "1997dn.bmp"
B4_off = new Image(); B4_off.src = "1998up.bmp"
B4_over = new Image(); B4_over.src = "1998dn.bmp"
B5_off = new Image(); B5_off.src = "1999up.bmp"
B5_over = new Image(); B5_over.src = "1999dn.bmp"
B6_off = new Image(); B6_off.src = "2000up.bmp"
B6_over = new Image(); B6_over.src = "2000dn.bmp"
B7_off = new Image(); B7_off.src = "2001up.bmp"
B7_over = new Image(); B7_over.src = "2001dn.bmp"
B8_off = new Image(); B8_off.src = "2002up.bmp"
B8_over = new Image(); B8_over.src = "2002dn.bmp"
B9_off = new Image(); B9_off.src = "2003up.bmp"
B9_over = new Image(); B9_over.src = "2003dn.bmp"
B10_off = new Image(); B10_off.src = "2004up.bmp"
B10_over = new Image(); B10_over.src = "2004dn.bmp"
B11_off = new Image(); B11_off.src = "2005up.bmp"
B11_over = new Image(); B11_over.src = "2005dn.bmp"
B12_off = new Image(); B12_off.src = "2006up.bmp"
B12_over = new Image(); B12_over.src = "2006dn.bmp"
B13_off = new Image(); B13_off.src = "2007up.bmp"
B13_over = new Image(); B13_over.src = "2007dn.bmp"
B14_off = new Image(); B14_off.src = "2008up.bmp"
B14_over = new Image(); B14_over.src = "2008dn.bmp"
B15_off = new Image(); B15_off.src = "2009up.bmp"
B15_over = new Image(); B15_over.src = "2009dn.bmp"
B16_off = new Image(); B16_off.src = "2010up.bmp"
B16_over = new Image(); B16_over.src = "2010dn.bmp"
}

function turn_off(ImageName) {
if (document.images != null) {
document[ImageName].src = eval(ImageName + "_off.src");
}
}

function turn_over(ImageName) {
if (document.images != null) {
document[ImageName].src = eval(ImageName + "_over.src");
}
}

// End of dummy comment -->
</script>
<!-- Navbar def end -->



</HEAD>
<BODY BGCOLOR="#FFFFFF" link="#0000FF">

<!-- Start of NavBar definition -->
<TABLE border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="blue_top.bmp" alt="" width="183" height="18"></td></tr>
<tr><td><a href="publications.html#1995" onmouseout="turn_off('B1')" onmouseover="turn_over('B1')" target="mainframe"><img name="B1" src="1995up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#1996" onmouseout="turn_off('B2')" onmouseover="turn_over('B2')" target="mainframe"><img name="B2" src="1996up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#1997" onmouseout="turn_off('B3')" onmouseover="turn_over('B3')" target="mainframe"><img name="B3" src="1997up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#1998" onmouseout="turn_off('B4')" onmouseover="turn_over('B4')" target="mainframe"><img name="B4" src="1998up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#1999" onmouseout="turn_off('B5')" onmouseover="turn_over('B5')" target="mainframe"><img name="B5" src="1999up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2000" onmouseout="turn_off('B6')" onmouseover="turn_over('B6')" target="mainframe"><img name="B6" src="2000up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2001" onmouseout="turn_off('B7')" onmouseover="turn_over('B7')" target="mainframe"><img name="B7" src="2001up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2002" onmouseout="turn_off('B8')" onmouseover="turn_over('B8')" target="mainframe"><img name="B8" src="2002up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2003" onmouseout="turn_off('B9')" onmouseover="turn_over('B9')" target="mainframe"><img name="B9" src="2003up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2004" onmouseout="turn_off('B10')" onmouseover="turn_over('B10')" target="mainframe"><img name="B10" src="2004up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2005" onmouseout="turn_off('B11')" onmouseover="turn_over('B11')" target="mainframe"><img name="B11" src="2005up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2006" onmouseout="turn_off('B12')" onmouseover="turn_over('B12')" target="mainframe"><img name="B12" src="2006up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2007" onmouseout="turn_off('B13')" onmouseover="turn_over('B13')" target="mainframe"><img name="B13" src="2007up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2008" onmouseout="turn_off('B14')" onmouseover="turn_over('B14')" target="mainframe"><img name="B14" src="2008up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2009" onmouseout="turn_off('B15')" onmouseover="turn_over('B15')" target="mainframe"><img name="B15" src="2009up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>
<tr><td><a href="publications.html#2010" onmouseout="turn_off('B16')" onmouseover="turn_over('B16')" target="mainframe"><img name="B16" src="2010up.bmp" alt="" width="183" height="26" border="0"></a></td></tr>

<tr><td><img src="blue_bottom.bmp" alt="" width="183" height="18"></td></tr>
</TABLE>
<!-- End of NavBar definition -->



</BODY>
</HTML>

My menu works fine with the mouse over changing the image. The problem is I want to make it more flexible by using blank buttons and then adding the text over them in html, instead of having up and down images for every single button. I've searched for something to do this in forums and the web and there is lots for changing background colors of cells on mouse over but not for changing images with text over them! I've tried to put text over these images to avail and think I need to change the img to a background="butup.bmp" etc but not sure how to do the mouse over/out part.

Any help would be greatly appreciated.

Many thanks,
John
Twey
08-04-2005, 10:38 AM
Oh dear. Stick around, I'm typing...
Twey
08-04-2005, 11:13 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Research</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Navbar def --><!--language= is deprecated - only type is necessary.-->
<script type="text/javascript">
<!-- Dummy comment to hide code from non-JavaScript browsers.

if (document.images) {
buttonUp = new Image(); buttonUp.src = "buttonUp.png"; // Never use bitmaps for the web.
buttonDown = new Image(); buttonDown.src = "buttonDown.png";
}

function turn_off(cell) {
if (document.images != null) {
cell.style.backgroundImage = "url('" + buttonUp.src + "')";
}
}

function turn_on(cell) {
if (document.images != null) {
cell.style.backgroundImage = "url('" + buttonDown.src + "')";
}
}

// End of dummy comment -->
</script>
<!-- Navbar def end -->

<style type="text/css">
@media all {
html, body {
background-color: white;
}
.navbar {
border-style: none;
border-width: 0;
}
.navbar td {
text-align: center;
background-image: url('buttonUp.png');
}
.navbar td a {
font-size: 1.25em;
font-weight: bold;
color: black;
text-decoration: none;
}
.navbar td a:hover {
font-size: 1.5em;
font-weight: bold;
color: black;
text-decoration: underline;
}
a {
color: blue;
}
}
</style>

</head>
<body>

<!-- Start of NavBar definition -->
<table class="navbar" cellspacing="0" cellpadding="0">
<tr><td><img src="blue_top.png" alt="Navigation" style="width:183px;height:18px;"><!-- Don't use blank alts. There's that bitmap again... --></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#1995" target="mainframe">1995</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#1996" target="mainframe">1996</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#1997" target="mainframe">1997</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#1998" target="mainframe">1998</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#1999" target="mainframe">1999</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2000" target="mainframe">2000</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2001" target="mainframe">2001</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2002" target="mainframe">2002</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2003" target="mainframe">2003</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2004" target="mainframe">2004</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2005" target="mainframe">2005</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2006" target="mainframe">2006</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2007" target="mainframe">2007</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2008" target="mainframe">2008</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2009" target="mainframe">2009</a></td></tr>
<tr><td onmouseout="turn_off(this)" onmouseover="turn_on(this)"><a href="publications.html#2010" target="mainframe">2010</a></td></tr>

<tr><td><img src="blue_bottom.png" alt="End of Navigation" style="width:183px;height:18px;"></td></tr>
</table>
<!-- End of NavBar definition -->



</body>
</html>
This works and is valid (validator.w3.org).
Images: buttonUp.png (blank button in "up" position), buttonDown.png (blank button in "down" position), blue_top.png and blue_bottom.png - PNG equivalents of your blue_top.bmp and blue_bottom.bmp, because you should never use bitmaps for the web.
john_lessells
08-04-2005, 11:29 AM
Thank you so much twey!

Your the best, u've just saved me so much time!

Cheers,

John
Twey
08-04-2005, 11:34 AM
Just do your bit for a better web: keep it valid ;)