www.webdeveloper.com
Results 1 to 8 of 8

Thread: Add 'rel' attribute automatically

  1. #1
    Join Date
    Aug 2010
    Posts
    13

    Add 'rel' attribute automatically

    Hi
    Is there a way for me to add a 'rel' attribute using javascript, to all img tags within divs of a certain class?

    Thanks
    Fela

  2. #2
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    76
    Yes, it is possible. However, rel is not a supported attribute for the <img> tag. So, you may encounter errors with that.

    http://www.w3schools.com/TAGS/tag_img.asp

  3. #3
    Join Date
    Aug 2010
    Posts
    13
    Quote Originally Posted by mikewgd View Post
    Yes, it is possible. However, rel is not a supported attribute for the <img> tag. So, you may encounter errors with that.

    http://www.w3schools.com/TAGS/tag_img.asp
    Oh yeah sorry I meant the [ a ] tag (not img).

    cheers

  4. #4
    Join Date
    Aug 2010
    Posts
    13
    Oh soz, now that I know how to change the rel tag of the a using javascript....

    ...how do I change the rel tag of all a tags, that contain img tags? Lol xD

    cheers

  5. #5
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    76
    Well, your going to want to do a loop that searches for all of the img tags on the page and do an if statement to see if the parentNode is a <a> tag and have it execute what you want it to do.

    Not sure if you want the answer or just some clues to figure it out.

  6. #6
    Join Date
    Aug 2010
    Posts
    13
    Quote Originally Posted by mikewgd View Post
    Well, your going to want to do a loop that searches for all of the img tags on the page and do an if statement to see if the parentNode is a <a> tag and have it execute what you want it to do.

    Not sure if you want the answer or just some clues to figure it out.
    Alright, yeah I'm pretty new to JS, I'm making a website with quite alot of it but learning it as I go along. I think I'll figure this one out cheers

  7. #7
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    76
    Ok, just know your definitely going to want to have:
    1. a for loop to search for all the images on the page
    2. an if statement to find out if the parentNode of the image has a tagName of A (i.e. if the <img> tag has <a> wrapped around it)
    3. And then youll want to wrap this all in a function.

    Im sure youll figure it out! Good luck

  8. #8
    Join Date
    Aug 2010
    Posts
    13
    YES, sorted it

    Code:
    window.onload = init;
    
    function init() {
    	var imgs = document.getElementsByTagName("img");
    	for (var i = 0, maxI = imgs.length; i < maxI; ++i) {
    		var img = imgs[i];
    		
    		//alert(parent.tagName);
    		
    		if(img.parentNode.tagName == 'A') {
    			//alert(img.parentNode.parentNode.parentNode.className);
    			if(img.parentNode.parentNode.parentNode.className == 'entry') {
    				img.parentNode.rel = "lightbox";
    			}
    		}
    	}
    	
    	//entries.parentNode.rel = "lightbox";
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles