Forum Moderators: open
i have been searching for a javascript piece that will enable me to rollover background images in table cells for a long time, being a background cell image meaning <td background='swapme'> and NOT <img src='swapme'> this will allow the content to be highlighted as im working on a very versatile website so i dont want normal image rollovers where id have to change or make new pics everytime i changed my sites theme. i thought i had found the right piece once but it constantly loaded the images over and over whenever the moueover events were true and caused the site to be laggy and use quite some bandwidth, i need the script to use some kind of a function where i call it in the <td> and make the javascript use a ImagePreloader. I dont have any knowledge of Javascript so i may not be able to tell you much more.
thnx in advance Cyberjunky.
try this preload and swap script...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Preload and Image Swap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><style type="text/css">
/*<![CDATA[*/#tbl {
border:solid 1px #000000;
}#one {
width:132px;
height:318px;
border:solid 1px #000000;
background:url(image_1.jpg);
}#two {
width:132px;
height:318px;
border:solid 1px #000000;
background:url(image_3.jpg);
}/*//]]>*/
</style><script type="text/javascript">
//<![CDATA[var preloads=[];
function preload(){
for(var i = 0; i < arguments.length; i ++) {
preloads[preloads.length] = new Image();
preloads[preloads.length - 1].src = arguments[i];
}
}function swapMe(obj,over,out) {
obj.style.background = "url("+over+")";
obj.onmouseout = function() {
obj.style.background = "url("+out+")";
}
}
preload('image_1.jpg','image_2.jpg','image_3.jpg','image_4.jpg');//]]>
</script></head>
<body><table id="tbl"><tr>
<td id="one" onmouseover="swapMe(this,'image_2.jpg','image_1.jpg')">cell one</td>
<td id="two" onmouseover="swapMe(this,'image_4.jpg','image_3.jpg')">cell two</td>
</tr></table></body>
</html>
birdbrain
thnx a bunch Cyberjunky
' I need the preloader to keep the graphics in memory (if you know what I mean) so that
they dont download each time there is a mouseover,'
Sorry, but I am afraid, I do not know what you mean. :o
The images are preloaded into your 'cache' or 'Temporary Internet Files'.
But what do I know I am only a...
birdbrain ;)
I have a sneaky feeling that you are using I.E. so to check the preloader...
C:\Documents and Settings\~Your Name ~\Local Settings\Temporary Internet Files
...and if the preloader is working correctly you will find all the image files there ;)
birdbrain
thnx in advance, Cyberjunky.
It sounds as though you have problems server side.
The script that I supplied works OK, so it might be prudent
to ask further questions in PHP Server Side Scripting [webmasterworld.com]
birdbrain
<style type='text/css'>
/*<![CDATA[*/
#tbl {
border:solid 1px #000000;
}
#one {
background:url(chimage.php?image=Button.JPG);
}
#two {
background:url(chimage.php?image=Button.JPG);
}
/*//]]>*/
</style>
<script type='text/javascript'>
//<![CDATA[
var preloads=[];
function preload(){
for(var i = 0; i < arguments.length; i ++) {
preloads[preloads.length] = new Image();
preloads[preloads.length - 1].src = arguments[i];
}
}
function swapMe(obj,over,out) {
obj.style.background = "url("+over+")";
obj.onmouseout = function() {
obj.style.background = "url("+out+")";
}
}
preload('chimage.php?image=Button.JPG','chimage.php?image=Button_hit.JPG','chimage.php?image=Button_hit.JPG','chimage.php?image=Button_hit.JPG');
//]]>
</script>
and where the table is i see, which all looks normal to me:
<td class='link' id='one' onmouseover="swapMe(this,'chimage.php?image=Button_hit.JPG','chimage.php?image=Button.JPG')">
what do you think, is it all correct...?
Sorry, but I know nothing of php, so all you can do, is hope that someone else
comes along here with a suggestion or take it to the PHP Server Side Scripting forum.
birdbrain
thnx for your help so far, much appreciated
