Hello everyone,
Please visit www.bbc.co.uk
There is a picture of a sleeping girl out there that's fading away and then a new image comes in. I looked into the code of the page and tried to copy the JS codes and modified them and tried to make it work for me.
here is the HTML codes that I have coded with the modified bbc codes.
HTML Code:
<html>
<head>
<script language="JavaScript">
<!--
var imgs = new Array("http://localhost/tutorials/screenshots/weblayout/content/step1.gif", "http://localhost/tutorials/screenshots/weblayout/content/step2.gif", "http://localhost/tutorials/screenshots/weblayout/content/step3.gif", "http://localhost/tutorials/screenshots/weblayout/content/step3.gif");
var alt = new Array("How to Sleep Better information (Image: sleeping girl)","How to Sleep Better information (Image: sleeping girl)","How to Sleep Better information (Image: sleeping girl)","How to Sleep Better information (Image: sleeping girl)");
var links = new Array("http://localhost/forum/","http://localhost/forum/","http://localhost/forum/","http://localhost/forum/");
var width = '275px'; var height = '185px'; var time = '7000';
if (document.images) {var cache = new Array(); for (i=0;i<imgs.length;i++) {cache[i] = new Image();cache[i].src = imgs[i];}}
var ie4 = document.all; var dom = document.getElementById;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1); var isOpera7 = (navigator.userAgent.indexOf("Opera 7.") != -1);
var ok = ((ie4||dom) && (!(isOpera && !isOpera7)))?true:false;
var current_canvas = "canvas0"; var current_index = 0; var next_index = 1;
function rotate() {
temp = ie4?eval("document.all."+current_canvas):document.getElementById(current_canvas);
temp.style.zIndex++;
current_opacity = 11;
interval = eval('setInterval("fade()",100)');
}
function fade() {
if (current_opacity<89) {
current_opacity+=11;
setOpacity(current_canvas,current_opacity);
}
else {
clearInterval(interval);
current_canvas = (current_canvas=="canvas0")?"canvas1":"canvas0";
next_canvas = (current_canvas=="canvas0")?"canvas0":"canvas1";
setOpacity(next_canvas,11);
next_canvas_obj = ie4?eval("document.all." + next_canvas):document.getElementById(next_canvas);
next_canvas_obj.innerHTML = '<a href="'+links[next_index]+'"><img src="'+imgs[next_index]+'" alt="'+alt[next_index]+'" border="0" width="'+width+'" height="'+height+'" /></a>';
next_index = (next_index<imgs.length-1)?next_index+1:0;
setTimeout("rotate()",time);
}
}
function setOpacity(which,num) {
var obj = ie4?eval("document.all."+which):document.getElementById(which);
if (obj.filters) {obj.filters.alpha.opacity=num;}
if (obj.style.MozOpacity) {obj.style.MozOpacity=num/100;}
if (obj.style.opacity) {obj.style.opacity=num/100;}
if (obj.style.setProperty ) {obj.style.setProperty('-khtml-opacity',num/100,null);}
}
// -->
</script>
</head><body>
<table width="275" height="185">
<script language="JavaScript">
<!-- //
if (ok) {document.write('<div style="margin:0;position:relative;width:'+width+';height:'+height+';overflow:hidden">
<div id="canvas0" style="margin:0;position:absolute;width:'+width+';height:'+height+';top:0;left:0;filter:alpha(opacity=11);-moz-opacity:.11;opacity:.11;-khtml-opacity:.11;"><a href="'+links[current_index]+'"><img src="'+imgs[current_index]+'" alt="'+alt[current_index]+'" border="0" width="'+width+'" height="'+height+'" /></a></div>
<div id="canvas1" style="margin:0;position:absolute;width:'+width+';height:'+height+';top:0;left:0;filter:alpha(opacity=11);-moz-opacity:.11;opacity:.11;-khtml-opacity:.11;"></div></div>');rotate();}
else {document.write('<a href="'+links[2]+'"><img name="defaultslide" src="'+imgs[2]+'" alt="'+alt[2]+'" border="0" width="'+width+'" height="'+height+'" /></a>');}
// -->
</script>
<noscript>
<a href="http://localhost/forum/">
<img src="http://localhost/forum/tutorials/screenshots/weblayout/content/step1.gif" width="275" height="185" alt="This the the alternative text for the image, its a must in XHTML" border="0"></a>
</noscript>
</table>
</body>
</html>
I think i have done everything right but I dunno why its not working. Can you please trace the problem out for me?
Thanks in advance.
P.S. I have directly copied and pasted some codes from BBC site and then modified them. Is it right to do so? I'm trying to learn:P |
