identifying image links inside div

[marilynn.fowler]

Here's the code I'm currently using:

if (document.images[i].parentNode.tagName == "A")

How do I write this line to only target image links inside the "nav" div?

[Arty Effem]

Here's the code I'm currently using:

if (document.images[i].parentNode.tagName == "A")

How do I write this line to only target image links inside the "nav" div?
Perhaps:var imgParent;
..........

if ( (imgParent=document.images[i].parentNode).tagName == "A" && imgParent.parentNode.id=='nav')

[marilynn.fowler]

ooh, that makes so much sense! Thank you very much.

[Basscyst]

var nav_links=document.getElementById('nav').getElementsByTagName('a');
var len=nav.length;
for(var i=0;i<len;i++){
if(nav_links[i].getElementsByTagName('img')[0]){
var trg=nav_links[i].getElementsByTagName('img')[0];
//Do some stuff
}
}


This is more direct in my opinion.

[marilynn.fowler]

Basscyst, I tried to implement it but it didn't work, no doubt because I'm implementing it incorrectly. What did I do wrong?

window.onload = rolloverInit;

function rolloverInit() {
var nav_links=document.getElementById('slideshow').getElementsByTagName('a');
var len=nav.length;
for(var i=0;i<len;i++){
if(nav_links[i].getElementsByTagName('img')[0]){
var trg=nav_links[i].getElementsByTagName('img')[0];
setupRollover(nav_links[i])
}
}
}

function setupRollover(thisImage) {
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;

thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
thisImage.onmouseover = rollOver;
}

function rollOut() {
this.src = this.outImage.src;
}
function rollOver() {
this.src = this.overImage.src;
}

[marilynn.fowler]

Arty effen, I also tried your approach, which doesn't work. Again, I don't know where I went wrong.

window.onload = rolloverInit;

function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (var imgParent=document.images[i].parentNode).tagName == "A" && imgParent.parentNode.id=='slideshow') {
setupRollover(document.getElementById('slideshow').images[i]);
}
}
}

function setupRollover(thisImage) {
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;

thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
thisImage.onmouseover = rollOver;
}

function rollOut() {
this.src = this.outImage.src;
}
function rollOver() {
this.src = this.overImage.src;
}

[Arty Effem]

Arty effen, I also tried your approach, which doesn't work. Again, I don't know where I went wrong.

window.onload = rolloverInit;

function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (var imgParent=document.images[i].parentNode).tagName == "A" && imgParent.parentNode.id=='slideshow') {
setupRollover(document.getElementById('slideshow').images[i]);
}
}
}
That isn't quite what I wrote and you can't use var in an if statement.

function rolloverInit() {
var imgParent;

for (var i=0; i<document.images.length; i++)
if ( (imgParent=document.images[i].parentNode).tagName == "A" && imgParent.parentNode.id=='slideshow')
setupRollover(document.getElementById('slideshow').images[i]);
}

[marilynn.fowler]

I cut and pasted it exactly as you have, but it still it doesn't work.

function rolloverInit() {
var imgParent;

for (var i=0; i<document.images.length; i++)
if ( (imgParent=document.images[i].parentNode).tagName == "A" && imgParent.parentNode.id=='slideshow')
setupRollover(document.getElementById('slideshow').images[i]);
}

function setupRollover(thisImage) {
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;

thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
thisImage.onmouseover = rollOver;
}

function rollOut() {
this.src = this.outImage.src;
}
function rollOver() {
this.src = this.overImage.src;
}


I also tried adding in braces and deleting the second parenthesis after the if:

function rolloverInit() {
var imgParent;

for (var i=0; i<document.images.length; i++) {
if (imgParent=document.images[i].parentNode).tagName == "A" && imgParent.parentNode.id=='slideshow') {
setupRollover(document.getElementById('slideshow').images[i]);
}
}
}

function setupRollover(thisImage) {
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;

thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
thisImage.onmouseover = rollOver;
}

function rollOut() {
this.src = this.outImage.src;
}
function rollOver() {
this.src = this.overImage.src;
}



with no success.

[Basscyst]

There was a bug in my code.

try it now:

var nav_links=document.getElementById('nav').getElementsByTagName('a');
var len=nav_links.length;
for(var i=0;i<len;i++){
if(nav_links[i].getElementsByTagName('img')[0]){
var trg=nav_links[i].getElementsByTagName('img')[0];
//Do some stuff
}
}


You could just do this with CSS:


#nav a{
background-image:url(someimag.gif);
background-repeat:no-repeat;
}
#nav a:hover{
background-image:url(someotherimage.gif)
}

[Arty Effem]

I cut and pasted it exactly as you have, but it still it doesn't work.
It turns out that a subset of document.images isn't actually available for an element so you have to use getElementsByTagName. The greyed part is only needed if you want to exclude any nested images.function rolloverInit()
{
var imgParent, divImages;

divImages = document.getElementById('slideshow').getElementsByTagName('img');

for (var i=0, len=divImages.length; i<len; i++)
if ((imgParent=divImages[i].parentNode).tagName == "A" && imgParent.parentNode.id=='slideshow')
setupRollover( divImages[i] );
}

[marilynn.fowler]

YAAAAAAAAAAAAAAAY!!!!!!!

Thanks again.