PDA

View Full Version : Need final tweak for rotating/fading image!


likegluelikecrew
10-11-2005, 04:34 PM
Ok, I used Ranjan's script for the fade image, I tried tweaking it to have the image stay longer but was unsuccessful so I just used it as is. I used CSS to get rid of the the blue "image link" border around the images by creating a class called .noborder in my external style sheet and then selecting the image on the page and setting the class dropdown box in the properties inspector to noborder. Seemed to work fine.

Now I want to pull the fade image into my library as a library item, although someone told me to never have a library item with css applied to it. How do I get the border off if I can't use css on a library item (or can I?)

Also, how do I put alt text on each image?

Any help would be greatly appreciated, I'm finally almost done with this!

We Are 138

Here's the code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">
var Pic=new Array("images/withrequestnav/house.gif","images/withrequestnav/world.gif","images/withrequestnav/mp3.gif", "images/withrequestnav/dvd.gif")
var picUrl=new Array("lifestyles/anywherehouse.asp","lifestyles/anywhereworld.asp","lifestyles/ongo.asp","lifestyles/accessmovies.asp")
var slideShowSpeed = 5000;
var t;
var r;
var f;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
var globalOpacity = 0;
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
document.images.SlideShow.src = preLoad[j].src;
if(document.getElementById){
ael=document.getElementById('SlideURL');
ael.setAttribute('href',picUrl[j]);
}
setalpha(0,"SlideShow");
r=window.setTimeout("reveal('0')", 100);
j = j + 1;
if (j > (p - 1)) j = 0;
t = window.setTimeout('runSlideShow()', slideShowSpeed);
}
function reveal(opacity) {
if (opacity <= 100 ){
setalpha(opacity,"SlideShow");
opacity += 5;
globalOpacity = opacity;
r = window.setTimeout("reveal("+opacity+")", 100);
}
else {
f=window.setTimeout("fade('100')",1000);
}
}
function fade(opacity) {
if (opacity >= 0 ){
setalpha(opacity,"SlideShow");
opacity -= 5;
globalOpacity = opacity;
r = window.setTimeout("fade("+opacity+")", 50);
}
}
function setalpha(opacity,t) {
var target=document.getElementById(t);
if (document.getElementById ) {
if (target.style.MozOpacity!=null) {
target.style.MozOpacity = (opacity/100) - 0.001; //patrick h. lauke (http://www.splintered.co.uk/) workaround for Mozilla 'flash' bug - I _never_ would have caught that
} else if (target.style.opacity!=null) {
target.style.opacity = opacity/100;
} else if (target.style.filter!=null) {
target.style.filter = "alpha(opacity=" + opacity + ")";
} else if (target.style.KhtmlOpacity!=null) {
target.style.KhtmlOpacity = opacity/100;
}
}
}
window.onload = runSlideShow;
</script>
<link href="file:///C|/Inetpub/wwwroot/main.css" rel="stylesheet" type="text/css">
</head>

<body>
images/1.jpg (lifestyles/anywherehouse.asp)
</body>
</html>

likegluelikecrew
10-11-2005, 04:52 PM
Actually, I just tried pulling the image marker off the fading image page and into the library, but the only thing it copied was the image marker itself, not all the code with the fade, images, etc. Then I tried copying and pasting the whole code into the library item, and it still didn't work! How can I put this rotating image on many pages?

We Are 138