Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    identifying image links inside div

    Here's the code I'm currently using:

    Code:
    if (document.images[i].parentNode.tagName == "A")
    How do I write this line to only target image links inside the "nav" div?
    Last edited by marilynn.fowler; 09-30-2008 at 11:00 PM.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by marilynn.fowler View Post
    Here's the code I'm currently using:

    Code:
    if (document.images[i].parentNode.tagName == "A")
    How do I write this line to only target image links inside the "nav" div?
    Perhaps:
    Code:
    var imgParent;
    ..........
    
    if ( (imgParent=document.images[i].parentNode).tagName == "A" && imgParent.parentNode.id=='nav')

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    ooh, that makes so much sense! Thank you very much.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Code:
    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.
    Helping to build a bigger box. - Adam Matthews

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Basscyst, I tried to implement it but it didn't work, no doubt because I'm implementing it incorrectly. What did I do wrong?

    Code:
    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;	
    }
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Arty effen, I also tried your approach, which doesn't work. Again, I don't know where I went wrong.

    Code:
    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;	
    }
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #7
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by marilynn.fowler View Post
    Arty effen, I also tried your approach, which doesn't work. Again, I don't know where I went wrong.

    Code:
    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.

    Code:
    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]);	
    }

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    I cut and pasted it exactly as you have, but it still it doesn't work.

    Code:
    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:
    Code:
    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.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #9
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    There was a bug in my code.

    try it now:
    Code:
    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:

    Code:
    #nav a{
      background-image:url(someimag.gif);
      background-repeat:no-repeat;
    }
    #nav a:hover{
      background-image:url(someotherimage.gif)
    }
    Last edited by Basscyst; 09-30-2008 at 09:25 AM.
    Helping to build a bigger box. - Adam Matthews

  • #10
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by marilynn.fowler View Post
    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.
    Code:
    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] );
    }

  • Users who have thanked Arty Effem for this post:

    marilynn.fowler (09-30-2008)

  • #11
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    YAAAAAAAAAAAAAAAY!!!!!!!

    Thanks again.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •