Link to home
Start Free TrialLog in
Avatar of radomirthegreat
radomirthegreat

asked on

onclick change td background image

Hello.  I have the following:

<body onload="MM_preloadimages('..images/sitebody/button_0.png')">

Is that perfectly fine?  I would like to have the following modified to have the background of the td change when a link in the td is pressed:

<td background="images/sitebody/button_.png">
<a href="">a link</a>
</td>

I would either like to have that answered or get a new code that provides me with a button that changes onclick.  That would be great.

Thanks.
Avatar of rangasuman
rangasuman

You can achieve this using simple css.

css file:

table.changebg td a:hover, table.changebg td a:active {background-image: url('../images/sitebody/button_0.png');}

html file:

<td class="changebg"><a href="alink">Link</a></td>

The code you have provided was coded using Frontpage. You must have a lot more code than that to achieve it. Hope that it helps.
I managed this using the following...

<td id="btn1" background="button0.gif">
<a href="" onMouseDown="document.getElementById('btn1').style.backgroundImage='url(button1.gif)';"> link</a>
</td>

Just need a seperate id for each td being used as a button.  E.g. btn1, btn2 etc.

Hope it helps.
Avatar of radomirthegreat

ASKER

That's awesome.  Thanks.  I just tried out my onload script, and I keep getting errors.  What's another onload script I could use to preload the other image?

Thanks a lot.
It should just be a matter of...

MM_preloadimages('..images/sitebody/button_0.png', '..images/sitebody/button_1.png')
There's an error when I put that in the body tag.  It's the standard code error that IE shows up, and the message varies with browsers.
In IE, when you double-click the error on the status bar, what is the description.
Actually, I don't get the error anymore.  That's awkward.  I just reformatted, so nothing could be wrong.  I must have typed it out strangely.
I'm having a severe problem getting either of the background changing codes in that they do not work.  What am I missing if I'm just using standard HTML?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ASKER CERTIFIED SOLUTION
Avatar of EECDML
EECDML

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That completely works.  Absolutely no problems at all.
As a reference for Googlers looking for this solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

<script language="javascript">
function changeBackground(elmntId,imgsrc){document.getElementById(elmntId).style.backgroundImage='url('+imgsrc+')';}
</script>

<table width="132">
 <tr>
  <td id="btn1" background="1.gif" height="32" align="center">
   <a href="?" onMouseDown="changeBackground('btn1', '2.gif');" onMouseUp="changeBackground('btn1', '1.gif')">Link</a>
  </td>
 </tr>
</table>
</body>
</html>