MikeFoster
msg:569753 | 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
msg:569754 | 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
msg:569755 | 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
msg:569756 | 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
msg:569757 | 3:20 pm on Sep 5, 2001 (gmt 0) |
Wow! Nice examples Marshall.
|
Marshall
msg:569758 | 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.
|
|
