homepage Welcome to WebmasterWorld Guest from 54.196.63.93
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
change background image for a table cell
manjumurthy

10+ Year Member



 
Msg#: 1003 posted 12:10 pm on Sep 3, 2001 (gmt 0)

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

 

MikeFoster

10+ Year Member



 
Msg#: 1003 posted 5:33 pm on Sep 3, 2001 (gmt 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>

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1003 posted 6:12 am on Sep 4, 2001 (gmt 0)

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.

MikeFoster

10+ Year Member



 
Msg#: 1003 posted 3:15 pm on Sep 4, 2001 (gmt 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>

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1003 posted 7:14 pm on Sep 4, 2001 (gmt 0)

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 :-)

MikeFoster

10+ Year Member



 
Msg#: 1003 posted 3:20 pm on Sep 5, 2001 (gmt 0)

Wow!

Nice examples Marshall.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1003 posted 4:02 pm on Sep 5, 2001 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved