...

View Full Version : Resolved identifying image links inside div



marilynn.fowler
09-29-2008, 07:48 PM
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
09-29-2008, 08:10 PM
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
09-29-2008, 08:35 PM
ooh, that makes so much sense! Thank you very much.

Basscyst
09-29-2008, 09:18 PM
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
09-30-2008, 03:38 AM
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
09-30-2008, 03:49 AM
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
09-30-2008, 04:55 AM
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
09-30-2008, 06:51 AM
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
09-30-2008, 09:22 AM
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
09-30-2008, 02:42 PM
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
09-30-2008, 10:55 PM
YAAAAAAAAAAAAAAAY!!!!!!!

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum