I currently have a rotating picture that I have on our website's main page.
This week we decided to add another set of pictures for users to view. The users can switch between the two different picture sets by a simple onclick where I change the picture sets.
I started to modify my existing code and ran into the problem where the img within a div is not loading in IE, it works fine in Mozilla but in IE I get the error 'document[...]'is null or not an object, line:48, char:4.
Here is a copy of my javascript
Expand|Select|Wrap|Line Numbers
- 3 //declares the cookie
- 4 var ImgCookie;
- 5
- 6 //declaressets the path
- 7 var image_dir = "img/revised/";
- 8
- 9 //declares array starting index
- 10 var imageNum = 0;
- 11
- 12 //declares an img array
- 13 imageArray = new Array();
- 14
- 15 //loops through all images and adds to the array
- 16 for (i=1; i<=26; i++) {
- 17 imageArray[imageNum++] = new imageItem(image_dir + i + ".png");
- 18 }
- 19
- 20 var time_interval = 5000;
- 21 var random_display = 0;//set to false so that the images are displayed in order
- 22
- 23
- 24 function choose_id() {
- 25 $('weather_pic').style.display = 'none';
- 26 $('optical_pic').style.display = 'none';
- 27
- 28 ImgCookie = getCookie('pic_type');
- 29
- 30 if (ImgCookie) {
- 31 switchImage(ImgCookie);
- 32 } else {
- 33 cook('weather_pic');
- 34 }
- 35 //switchImage('weather_pic');
- 36 }
- 37
- 38 function switchImage(place) {
- 39 if (place == "weather_pic") {
- 40 $('weather_pic').style.display = 'inline';
- 41 }
- 42 if (place == 'optical_pic') {
- 43 $('weather_pic').style.display = 'inline';
- 44 }
- 45
- 46 var new_image = getNextImage();
- 47 document[place].src = new_image;
- 48 var recur_call = "switchImage('"+place+"')";
- 49 timerID = setTimeout(recur_call, time_interval);
- 50 }
- 51
- 52 function cook(pictype) {
- 53 var type = pictype;
- 54 deleteCookie("pic_type");
- 55 setCookie("pic_type", type, 30);
- 56
- 57 choose_id();
- 58 }
- 60 function getNextImage() {
- 61 if (random_display) {
- 62 imageNum = randNum(0, totalImages-1);
- 63 } else {
- 64 imageNum = (imageNum+1) % totalImages;
- 65 }
- 66
- 67 var new_image = get_ImageItemLocation(imageArray[imageNum]);
- 68 return(new_image);
- 69 }
- 70 var totalImages = imageArray.length;
- 71
- 72 function imageItem(image_location) {
- 73 this.image_item = new Image();
- 74 this.image_item.src = image_location;
- 75 }
- 76
- 77 function get_ImageItemLocation(imageObj) {
- 78 return(imageObj.image_item.src)
- 79 }
- 80
- 81 function randNum(x, y) {
- 82 var range = y - x + 1;
- 83 return Math.floor(Math.random() * range) + x;
- 84 }
- 85
- 86
- 87 function getPrevImage() {
- 88 imageNum = (imageNum-1) % totalImages;
- 89 var new_image = get_ImageItemLocation(imageArray[imageNum]);
- 90 return(new_image);
- 91 }
- 92
- 93 function prevImage(place) {
- 94 var new_image = getPrevImage();
- 95 document[place].src = new_image;
- 96 }
here is the html
Expand|Select|Wrap|Line Numbers
- <!-- Start right Column box -->
- <div id="righcolbox">
- <div>
- <img height="385px" width="385px" align="right" id="weather_pic" border="3" src="img/revised/1.png" alt="Weather Images" />
- <img height="385px" width="385px" align="right" id="optical_pic" border="3" src="img/Optical/1.png" alt="Optical Images" />
- </div>
- <!-- End right Column box -->
- </div>
thanks again