SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict betrollwin.com's Avatar
    Join Date
    Nov 2005
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change Class of all images in div

    This is probably really simple but I cant seem to figure it out.

    Code:
    <div id="imgcontainer" class="imgcontainer">
    <img onclick="makeActive(1)" class="active" src="images/demo_01.gif" alt="testimonial" />
    <img onclick="makeActive(2)" src="images/demo_02.gif" alt="testimonial" />
    <img onclick="makeActive(3)" src="images/demo_03.gif" alt="testimonial" />
    <img onclick="makeActive(4)" src="images/demo_04.gif" alt="testimonial" />
    <img onclick="makeActive(5)" src="images/demo_05.gif" alt="testimonial" />
    <img onclick="makeActive(6)" src="images/demo_06.gif" alt="testimonial" />
    </div>
    <div class="show" id="imgdesc1">text1</div>
    <div class="hidden" id="imgdesc2">text2</div>
    <div class="hidden" id="imgdesc3">text3</div>
    <div class="hidden" id="imgdesc4">text4</div>
    <div class="hidden" id="imgdesc5">text5</div>
    <div class="hidden" id="imgdesc6">text6</div>
    Code JavaScript:
    function makeActive(num){
    //clear all image classes in imgcontainer div
    //apply class active to clicked image (this.className = 'active';)
    //show corresponding imgdesc div
    }

    When an image is clicked it should:
    1) clear the classes of all of the images
    2) assign the clicked image a class of "active"
    3) I then want to show a corresponding text (which would be in the same function.

    Thanks for helping!

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var images = document.getElementById('imgcontainer').getElementsByTagName('img');
    for(var i=0; i<images.length; i++)
    {
      var active = (i == num - 1);
      if(active)
      {
         images[i].className = 'active';
         document.getElementById('imgdesc' + (i + 1)).className = 'show';
      }
      if(!active && images[i].className == 'active')
      {
         images[i].className = '';
         document.getElementById('imgdesc' + (i + 1)).className = 'hidden';
      }
    }

  3. #3
    SitePoint Addict betrollwin.com's Avatar
    Join Date
    Nov 2005
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CyberAlien View Post
    Code:
    var images = document.getElementById('imgcontainer').getElementsByTagName('img');
    for(var i=0; i<images.length; i++)
    {
      var active = (i == num - 1);
      if(active)
      {
         images[i].className = 'active';
         document.getElementById('imgdesc' + (i + 1)).className = 'show';
      }
      if(!active && images[i].className == 'active')
      {
         images[i].className = '';
         document.getElementById('imgdesc' + (i + 1)).className = 'hidden';
      }
    }
    Works like a charm. You're the man.

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,267
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    You could get away without doing that extra check - the changing of the classnames wouldn't be that big of a hit, and it would ensure it catches everything...

    Code:
    var images = document.getElementById('imgcontainer').getElementsByTagName('img');
    for(var i=0; i<images.length; i++) {
      var active = (i == num - 1);
      if(active) {
         images[i].className = 'active';
         document.getElementById('imgdesc' + (i + 1)).className = 'show';
      } else {
         images[i].className = '';
         document.getElementById('imgdesc' + (i + 1)).className = 'hidden';
      }
    }
    Or even
    Code:
    var images = document.getElementById('imgcontainer').getElementsByTagName('img');
    for(var i=0; i<images.length; i++) {
        images[i].className = (i == num - 1) ? 'active' : '';
        document.getElementById('imgdesc' + (i + 1)).className = (i == num - 1) ? 'show' : 'hidden;
    }
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    SitePoint Addict betrollwin.com's Avatar
    Join Date
    Nov 2005
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet deal Dave. Both of those work as well.

    Thanks both!


Bookmarks

Posting Permissions

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