Hey everyone,<br />
<br />
Is it possible to use the blend trans function with background images ? so that your background image can continuously fade in to other images underneath your text ?<br />
<br />
The background image is in a cell and I want to nest tables etc. on top of that to position text wherever i like etc ...<br />
<br />
I have code that blends images together and works fine, but I'm not sure how to adapt it to work for a background image (if thats possible)<br />
<br />
I would really appreciate if any of you could take a look at the code and suggest what changes I should make so that It will work for background images in a table cell ...<br />
<br />
Thank you !<br />
<br />
the code I've been using is below:<br />
<br />
***********************************************<br />
<br />
<html><br />
<head><br />
<br />
<script language="JavaScript1.1"><br />
<br />
<!--<br />
//preload images<br />
var image1=new Image()<br />
image1.src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic1.jpg"<br />
var image2=new Image()<br />
image2.src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic2.jpg"<br />
var image3=new Image()<br />
image3.src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic3.jpg"<br />
var image4=new Image()<br />
image4.src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic4.jpg"<br />
//--><br />
</script><br />
<br />
<script><br />
<!--<br />
var step=1<br />
var whichimage=1<br />
function slideit()<br />
{<br />
if (!document.images)<br />
return<br />
//If the browser is IE 4.x<br />
if (document.all)<br />
slide.filters.blendTrans.apply()<br />
document.images.slide.src=http://www.webdeveloper.com/forum/archive/index.php/eval("image"+step+".src")<br />
//If the browser is IE 4.x<br />
if (document.all)<br />
slide.filters.blendTrans.play()<br />
whichimage=step<br />
if (step<4)<br />
step++<br />
else<br />
step=1<br />
setTimeout("slideit()",5000)<br />
}<br />
<br />
function slidelink()<br />
{<br />
if (whichimage==1)<br />
window.location="link1.htm"<br />
else if (whichimage==2)<br />
window.location="link2.htm"<br />
else if (whichimage==3)<br />
window.location="link3.htm"<br />
else if (whichimage==4)<br />
window.location="links4.htm"<br />
}<br />
//--><br />
</script><br />
</head><br />
<br />
<body onLoad="slideit()"><br />
<div align="center"><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:slidelink()"><br />
<table width="760" border="0"><br />
<tr><br />
<td><div align="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic1.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)"></div></td><br />
</tr><br />
</table><br />
<br />
</div><br />
</body><br />
</html><!--content-->although...i have a very odd solution...and if anyone reads this, theyd get pretty mad cuz its not too cross-browser supportive....what i do instead of using background images is just put your image in some div or something and change its z-index to something like -1000000 that way itll always show up underneath the other elements on the page which is a foolish backdoor to what youre trying to do.....but otherwise...i dont believe there is much you can do....<!--content-->
<br />
Is it possible to use the blend trans function with background images ? so that your background image can continuously fade in to other images underneath your text ?<br />
<br />
The background image is in a cell and I want to nest tables etc. on top of that to position text wherever i like etc ...<br />
<br />
I have code that blends images together and works fine, but I'm not sure how to adapt it to work for a background image (if thats possible)<br />
<br />
I would really appreciate if any of you could take a look at the code and suggest what changes I should make so that It will work for background images in a table cell ...<br />
<br />
Thank you !<br />
<br />
the code I've been using is below:<br />
<br />
***********************************************<br />
<br />
<html><br />
<head><br />
<br />
<script language="JavaScript1.1"><br />
<br />
<!--<br />
//preload images<br />
var image1=new Image()<br />
image1.src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic1.jpg"<br />
var image2=new Image()<br />
image2.src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic2.jpg"<br />
var image3=new Image()<br />
image3.src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic3.jpg"<br />
var image4=new Image()<br />
image4.src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic4.jpg"<br />
//--><br />
</script><br />
<br />
<script><br />
<!--<br />
var step=1<br />
var whichimage=1<br />
function slideit()<br />
{<br />
if (!document.images)<br />
return<br />
//If the browser is IE 4.x<br />
if (document.all)<br />
slide.filters.blendTrans.apply()<br />
document.images.slide.src=http://www.webdeveloper.com/forum/archive/index.php/eval("image"+step+".src")<br />
//If the browser is IE 4.x<br />
if (document.all)<br />
slide.filters.blendTrans.play()<br />
whichimage=step<br />
if (step<4)<br />
step++<br />
else<br />
step=1<br />
setTimeout("slideit()",5000)<br />
}<br />
<br />
function slidelink()<br />
{<br />
if (whichimage==1)<br />
window.location="link1.htm"<br />
else if (whichimage==2)<br />
window.location="link2.htm"<br />
else if (whichimage==3)<br />
window.location="link3.htm"<br />
else if (whichimage==4)<br />
window.location="links4.htm"<br />
}<br />
//--><br />
</script><br />
</head><br />
<br />
<body onLoad="slideit()"><br />
<div align="center"><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:slidelink()"><br />
<table width="760" border="0"><br />
<tr><br />
<td><div align="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/fadepic1.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)"></div></td><br />
</tr><br />
</table><br />
<br />
</div><br />
</body><br />
</html><!--content-->although...i have a very odd solution...and if anyone reads this, theyd get pretty mad cuz its not too cross-browser supportive....what i do instead of using background images is just put your image in some div or something and change its z-index to something like -1000000 that way itll always show up underneath the other elements on the page which is a foolish backdoor to what youre trying to do.....but otherwise...i dont believe there is much you can do....<!--content-->