slide show fails when i change 'name' tag to 'id' so it is validated

[jasonc]

I have checked the page via w3.org and it states that i need to change the 'name' tag to 'id' instead so I did but now my image slideshow does not work.

 

 

JS

/*	Script by FPMC at http://jsarchive.8m.com	Submitted to JavaScript Kit (http://javascriptkit.com)	For this and 400+ free scripts, visit http://javascriptkit.com	*/

src = ['../images/Intro1.jpg', '../images/Intro2.jpg', '../images/Intro3.jpg', '../images/Intro4.jpg', '../images/Intro5.jpg', '../images/Intro6.jpg', '../images/Intro7.jpg'];	//set image paths

// url = ['http://freewarejava.com', 'http://javascriptkit.com', 'http://dynamicdrive.com', 'http://www.geocities.com'];	//set corresponding urls

duration = 3;	//set duration for each image

//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document['Intro_Image'].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout('switchAd()',duration*1000);
}

 

the image tag

<img name="Intro_Image" src="images/Intro1.jpg" alt="Intro" style="float: right; height: 160px;">

 

What do I need to change in the JS so it works using the ID tag instead ?

[ManiacDan]

Just give it an ID as well as a name if it's that important to you that it validates 100%

[jasonc]

w3 states i need to remove the name tag and replace with id, so i did but then the images do not change as i think the JS is looking for the name tag.

 

what i can not see is where i change the JS code so it works for id instead of name tag

[ManiacDan]

document['Intro_Image']

 

That line finds by name.  You could just do:

document.getElementByI('Introl_Image')

[jasonc]

I used

document.getElementById['Intro_Image'].src = ads[ct=n].src;

 

But it does not change the image I did also change the name tag to id in the image

[ManiacDan]

That's not what I wrote.  Always copy and paste.

[jasonc]

That's not what I wrote.  Always copy and paste.

document['Intro_Image']

 

That line finds by name.  You could just do:

document.getElementByI('Introl_Image')

 

Sorry I did copy and paste and changed the code slightly as I thought maybe there was a typo...

 

But either way the image is not changing.

[jasonc]

/*	Script by FPMC at http://jsarchive.8m.com	Submitted to JavaScript Kit (http://javascriptkit.com)	For this and 400+ free scripts, visit http://javascriptkit.com	*/

src = ['../images/Intro1.jpg', '../images/Intro2.jpg', '../images/Intro3.jpg', '../images/Intro4.jpg', '../images/Intro5.jpg', '../images/Intro6.jpg', '../images/Intro7.jpg'];	//set image paths

duration = 3;	//set duration for each image

//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document.getElementByI['Introl_Image'] = ads[ct=n].src;
// document['Intro_Image'].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout('switchAd()',duration*1000);
}

 

 

<img id="Intro_Image" src="images/Intro1.jpg" alt="Intro" style="float: right; height: 160px;">

[ManiacDan]

I love how we keep changing the section marked "please do not change below."

 

Also, why is the "give it an ID and a name" solution not working?  That's valid markup.  Just because the validator said "change" doesn't mean that's the only solution.

[nogray]

change document.getElementByI['Introl_Image'] to document.getElementById('Introl_Image')

 

use parentheses not brackets and missing D in the Id

[jasonc]

I was just wanting to have the page validate.  But w3 says that the 'name' tag is deprecated and to use id' instead for the image.  But this causes the JavaScript to fail.

 

What would be the correct change in the JavaScript to allow it to work ?

 

I have tried all sorts with () and []  with ID and Id  none work.

 

Here is the code I have at the moment...

/*	Script by FPMC at http://jsarchive.8m.com	Submitted to JavaScript Kit (http://javascriptkit.com)	For this and 400+ free scripts, visit http://javascriptkit.com	*/

src = ['../images/Intro1.jpg', '../images/Intro2.jpg', '../images/Intro3.jpg', '../images/Intro4.jpg', '../images/Intro5.jpg', '../images/Intro6.jpg', '../images/Intro7.jpg'];	//set image paths

duration = 3;	//set duration for each image

//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document.getElementById('Intro_Image') = ads[ct=n].src;
// document['Intro_Image'].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout('switchAd()',duration*1000);
}

 

<img id="Intro_Image" src="images/Intro1.jpg" alt="Intro" style="float: right; height: 160px;">

 

In Firefox Error Console I get this error when page loads..

 

Warning: Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead.

 

[jasonc]

 

document.getElementById('Intro_Image').src = ads[ct=n].src;

 

 

ok I have got the images to change now but still get that error

 

Warning: Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead.