Forum Moderators: open
var ns6=document.getElementById&&!document.all
function changeItem(){
if(document.layers){
document.layer1.document.write(item[current])
document.layer1.document.close()
}
if(ns6)document.getElementById("div1").innerHTML=item[current]
{
if(document.all){
div1.innerHTML=item[current]
}
}
if (current==5) current=0
else current++
setTimeout("changeItem()",2000)
}
window.onload=changeItem
I'm open to anything, even changing the way I do it. Thanks,
I was wondering if there is a way to load all of the pictures initially and then just change them?
Javascript image preloaders not working for you?
I've found these work sometimes, sometimes don't, and have tried every angle of approach to image preloaders I could find. You could also load the images into a hidden div, which caches them, in combination with the change to window.onload below.
Couple suggestions that have nothing to do with preloading: "layers" is old NN 3.0 object detection, you don't need it. But you **should** test for an ID'ed element first. Like
function changeItem(){
if(document.getElementById('div1')){
document.getElementById("div1").innerHTML=item[current];
}
// A little optimization here
current = (current==5)?0:current++;
setTimeout("changeItem()",2000)
}
Second, window.onload works best like so, I don't know how you're getting it to start like that:
window.onload=function() { changeItem(); };
not
window.onload=changeItem
Last, swap out your font tags for something you can control via CSS
item[3]='<span class="some-class">Text without a Link!</span>';
dummy1 = new Image;
dummy1.src = 'image1.jpg';
dummy2 = new Image;
dummy2.src = 'image2.jpg';
etc.
It's a trade-off making slower initial page loading instead of some interruptions during the image change effects you're creating. If you're crafty, you can insert a variation of this code within your changeItem function so that the next image is preloaded while the current image is displayed and the timer is running.
window.onload = function () {
// Your array of image src's that will be preloaded
var imgs = ['image1.jpg',
'image2.jpg',
'image3.jpg'
];
var i, n, img;
for (i = 0, n = imgs.length; i < n; i++) {
img = new Image();
img.src = imgs[i];
}
};
The example above will load the images when the window.onload event has fired (in other words, the browser is done loading everything else).
HTML
<a class = "info" href = "#" >You hover text <img src = "yourImage.jpg"></a>
CSS
a.info {
position: relative;
color: white;
font-family: cursive;
border: none;
display: inline;
}
a.info:hover {
text-decoration: none;
/*************************/
/*you have to do this line for*/
/*IE other wise it won't work*/
/*don't ask me why just do it*/
/*************************/
/*and save yourself a huge headache*/
background: url("fileDoesNotExist.jpg");
z-index: 6;
display: inline;
}
a.info img {
border: none;
margin-left: 10px; /*adjusting this will control the space betwwen the image and the text */
position: absolute;
left: -9999px; /* hide the "popup" offscreen*/
display: inline;
}
a.info:hover img {
left: auto; /* bring it back on on hover */
top: -16em;
display: inline;
}
All of your text hovers for this example are masked in link tags because I had links that display an image when you hover over them, but you don't necessarily have to embed them within link tags. You could just put the tags in a span of some kind. It's easiest to do it that way if you can though. I will try your guys's suggestions tomorrow.
<script language="JavaScript1.2">
/*
Rotating image or text(You can use for changing banners)
Author: Narayan Chand Thakur
Source: [ncthakur.itgo.com...]
This may be used freely as long as this message is intact.
*/
<!--
//you may add your image file or text below
var item=new Array();item.push("<a href='#'><img src='Rotate/HospitalB.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/CRCClinicC.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/GrantPark.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/HospitalA.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/WestWaterfall.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/Petunia.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/Pansy.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/AssistedLiving.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/firstImage.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/WestGarden.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/CRCClinicA.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/CornHarvest.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/GrantClinic.jpg' width='412' height='275' border='0'></a>");item.push("<a href='#'><img src='Rotate/news.tif' width='412' height='275' border='0'></a>");var current=0;
var ns6=document.getElementById&&!document.all;
function changeItem(){
if(document.layers){
document.layer1.document.write(item[current]);
document.layer1.document.close();
}
if(ns6)document.getElementById("rotatingImage").innerHTML=item[current]
{
if(document.all){
document.image1.src=item[current];
}
}
if (current==5) current=0
else current++;
setTimeout("changeItem()",8000);
}
window.onload=function() { changeItem(); };
//-->
</script>
Thanks
<script language="JavaScript1.2">
Tells you how old this really is.
Second, you have 14 images there, and the current is reset at 5. Note how I changed that to get the array length instead so you don't have to mess with it. Also added rotateSpeed instead of a hard coded value.
I did have one error, sorry. current++ didn't work in the short circuit evaluation, I changed it to current+1.
Last, I think, note this for "document.all" (IE only)
document.image1.src=item[current];
as opposed to this for . . well, not IE.
document.getElementById("rotatingImage").innerHTML=item[current]
In one you're setting the source of img, in another you're resetting the innerHTML value. Either will work, but your array is composed of full image elements (<img src=..) and none of those have names or ID's so evidently your HTML must have an element
<img src="whatever.jpg" name="image1" id="image1">
And possibly don't have an element ID'ed "rotatingImage". It doesn't make a whole lot of sense, because if it works for IE what you're doing is putting an image src inside an image src. For the first array item,
<img src="<a href='#'><img src='Rotate/HospitalB.jpg' width='412' height='275' border='0'></a>" name="image1" id="image1">
Maybe IE can just make sense of it, and maybe FF recognizes the old-school document.all, in which case this would fail:
var ns6=document.getElementById&&!document.all;
None of that really matters if you use modern DOM methods, which is why I didn't pursue it.
I don't have 14 images handy, so I removed your <img src=..> from the array and replaced it with plain text. Swap it back out, see if this works (tested, know it does), then proceed with adding a preloader.
Also add border="0" to your images in the array so you don't get the blue line from the anchor.
You don't have to keep the copyright intact. Wait, there isn't one . . . :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line, I know you like to use XHTML
doctypes so this should be fine, too. -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
var current=0;
var rotateSpeed = 2000; // in ms, 2000=2 sec
var item=new Array(
'<a href="#">Image 1</a>',
'<a href="#">Image 2</a>',
'<a href="#">Image 3</a>',
'<a href="#">Image 4</a>',
'<a href="#">Image 5</a>',
'<a href="#">Image 6</a>',
'<a href="#">Image 7</a>',
'<a href="#">Image 8</a>',
'<a href="#">Image 9</a>',
'<a href="#">Image 10</a>',
'<a href="#">Image 11</a>',
'<a href="#">Image 12</a>',
'<a href="#">Image 13</a>',
'<a href="#">Image 14</a>'
);
function changeItem(){
if(document.getElementById('rotatingImage')){
document.getElementById("rotatingImage").innerHTML=item[current];
}
current = (current >= item.length-1)?0:current+1;
setTimeout("changeItem()",rotateSpeed);
}
window.onload=function() { changeItem(); };
</script>
</head>
<body>
<h1>Rotating image sample</h1>
<p>In the JS array, replace the text with the image paths:</p>
<p>'Item 1' = '<img src="image1.jpg" border="0">'</p>
<p id="rotatingImage">Loading First Image ...</p>
</body>
</html>
