Welcome to WebmasterWorld Guest from 54.242.206.44

Forum Moderators: incrediBILL

Message Too Old, No Replies

change background image for a table cell

     

manjumurthy

12:10 pm on Sep 3, 2001 (gmt 0)

Inactive Member
Account Expired

 
 


Dear all,
I have an <a href> tag as the detail of a particulat cell in a table. I also have a background image for each cell. I want to change this image onClick of <a href>. How can i do that using javascript. please help me.
thanx
manjumurthy
5:33 pm on Sept 3, 2001 (gmt 0)

Junior Member

10+ Year Member

joined:July 20, 2001
posts:137
votes: 0


Hi manjumurthy,

The following should work with IE5+ and NS6. I tested with IE6.0 and NS6.01. Would probably work with IE4 by using document.all[] instead of document.getElementById(). If you want to support Opera and NN4.xx then it will be much more involved, but can be done.

<html>
<head>
<script type='text/javascript'><!--
function cellImg(idCell, imgName) {
document.getElementById(idCell).style.background = "url(" + imgName + ")";
}
//--></script>
</head>
<body>
<table width="50%" height="50%" border="1">
<tr>
<td id='c1'>
<a href="javascript:cellImg('c1','img1.gif')">c1</a>
</td>
<td id='c2'>
<a href="javascript:cellImg('c2','img2.gif')">c2</a>
</td>
</tr>
</table>
</body>
</html>

6:12 am on Sept 4, 2001 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2155
votes: 7


Mike,

Couldn't this be done using CSS and a a:hover or a:active pseudo-class? Instead of using {background-color: #whatever;}. use {background-image: url(image.gif);}? I'm writing this without checking W3C CSS guidelines. As long as the images are the same width and height, I don't think there should be a problem. I'll try it and let you know in the next day or two.

FOLLOW UP - I tried the CSS idea and it worked to a limited degree. The image displayed only behind the text and did not fill the entire cell. It's probably simpler, and more universal, to use a script.

3:15 pm on Sept 4, 2001 (gmt 0)

Junior Member

10+ Year Member

joined:July 20, 2001
posts:137
votes: 0


Hi Marshall, Great idea!

I'm testing with IE5.0 right now - and it works! I don't have access to NS6 now but it should work there as well.

Here's my test:

<html>
<head>
<style type='text/css'><!--
body { background:#ffffff; margin:0; padding:0; }
a:link, a:visited, a:active {
font-family:sans-serif;font-size:12px; color:#000000;
background:transparent url("img1.gif");
width:100%;height:100%;
}
a:hover {
font-family:sans-serif;font-size:12px; color:#000000;
background:transparent url("img2.gif");
width:100%;height:100%;
}
--></style>
</head>
<body>
<table width="50%" height="50%" border="1">
<tr>
<td><a href="#">c1</a></td>
<td><a href="#">c2</a></td>
</tr>
</table>
</body>
</html>

7:14 pm on Sept 4, 2001 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2155
votes: 7


Mike (& Manjumurthy),

I was having trouble with the width and height. Didn't think to add the 100% size. Hey - it was the middle of the night for me and I was sleepy.

Anyway, I did come up with something that works in IE, Netscape and Opera versions 4+. It utilizes an image swapping script (any reliable one will do), two tables and absolute positions. There are two examples at www.cenlyt.com/test. The first one simply swaps the image "OnMouseDown", the second swaps "OnMouseOver" and "OnMouseDown". And since the images are in the bottom table (layer wise) you can't just right-click to copy them. This is a nice little deterrent for protecting images too. But go check it out. Feel free to copy what you need. And I added a CSS hover too for a little extra punch :-)

3:20 pm on Sept 5, 2001 (gmt 0)

Junior Member

10+ Year Member

joined:July 20, 2001
posts:137
votes: 0


Wow!

Nice examples Marshall.

4:02 pm on Sept 5, 2001 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2155
votes: 7


Thanks Mike,

I have to admit, the idea is a variation of a design trick I've used to insert a third image on MouseOver (my web site [see profile] has this on the home page). The only problem is whether or not the images will appear - if the page isn't set to preload the images and the file size is large, the image may not swap on MouseDown. Obviously in my example, I used simple colors which download fast. However, a complex or large graphic may not download in time to be useful. Just something to think about.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members