www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Hover over thumbnail - changes two different divs

  1. #1
    Join Date
    Feb 2010
    Posts
    3

    resolved [RESOLVED] Hover over thumbnail - changes two different divs

    I have 5 different thumbnail pictures. I also have two divs - "pic" is a larger picture of a thumbnail and the other "details" is description of the person in the picture.

    I would like the two divs to change depending on which thumbnail the mouse is hovering over.

    HTML Code:
    <body>
     <div id="pic">
     <img src="image1_large.jpg" alt="Image 1" class="Image1_large">
     </div>
     <div id="details">
      // description to go here
     </div>
     <div id="thumbnails">
     <div id="image1"><img src="image1.jpg" alt="image 1"></div>
     <div id="image2"><img src="image2.jpg" alt="image 2"></div>
     <div id="image3"><img src="image3.jpg" alt="image 3"></div>
     <div id="image4"><img src="image4.jpg" alt="image 4"></div>
     <div id="image5"><img src="image5.jpg" alt="image 5"></div>
     </div>
     </body>
    What would the best way to approach this.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    <html>
    <head>
    <script language="JavaScript" type="text/javascript">
    <!--
    var content = new Array(
    {src:'image1_large.jpg',info:'1-bla-bla-bla'},
    {src:'image2_large.jpg',info:'2-bla-bla-bla'},
    {src:'image3_large.jpg',info:'3-bla-bla-bla'},
    {src:'image4_large.jpg',info:'4-bla-bla-bla'},
    {src:'image5_large.jpg',info:'5-bla-bla-bla'}
    );

    function show_info(str){
    var pic = document.getElementById('pic');
    var details = document.getElementById('details');
    for(var i = 0; i < content.length; i++){
    if(content[i]['src'].indexOf(str) != -1){
    pic.innerHTML = '<img src="'+str+'_large.jpg" alt="'+str+'">';
    details.innerHTML = content[i]['info'];
    break;
    }
    else{continue;}
    }
    }
    //-->
    </script>
    </head>
    <body>
    <div id="pic"><img src="image1_large.jpg" alt="Image 1" class="Image1_large"></div>
    <div id="details">description to go here</div>
    <div id="thumbnails">
    <div id="image1"><img src="image1.jpg" alt="image1" onmouseover="show_info(this.alt)"></div>
    <div id="image2"><img src="image2.jpg" alt="image2" onmouseover="show_info(this.alt)"></div>
    <div id="image3"><img src="image3.jpg" alt="image3" onmouseover="show_info(this.alt)"></div>
    <div id="image4"><img src="image4.jpg" alt="image4" onmouseover="show_info(this.alt)"></div>
    <div id="image5"><img src="image5.jpg" alt="image5" onmouseover="show_info(this.alt)"></div>
    </div>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Lightbulb Alternative code ...

    Alternative (because 'Podanak' types faster than me.)
    Code:
    <html>
    <head>
    <title>Image Hover</title>
    <script type="text/javascript">
    // For:
    
    LargeImageList = [
      'image1_large.jpg',
      'image2_large.jpg',
      'image3_large.jpg',
      'image4_large.jpg',
      'image5_large.jpg' 	// No comma after last entry
    ];
    
    var descList = [
      'Description for Image 1',
      'Description for Image 2',
      'Description for Image 3',
      'Description for Image 4',
      'Description for Image 5'	// No comma after last entry
    ];
    
    function ChangeImg(imgPtr) {
      document.getElementById('pic').src = LargeImageList[imgPtr];
      document.getElementById('pic').alt = LargeImageList[imgPtr];
      document.getElementById('details').innerHTML = descList[imgPtr];
    }
      
    </script>
    
    <style type="text/css">
    .largeImg {
      height:200px; width:200px;
      border: 3px solid red;
    }
    .smallImg {
      height:50px; width:50px;
      border: 1px solid blue;
      display: block;	/* possibly: inline; if desired */
    }
    
    </style>
    </head>
    <body>
     <div class="largeImg">
     <img id='pic' src="image1_large.jpg" alt="Image 1">
     </div>
     <div id="details">
      // description to go here
     </div>
     <div id="thumbnails">
      <div id="image1" class="smallImg" onMouseover="ChangeImg(0)">
       <img src="image1.jpg" alt="image 1">
      </div>
      <div id="image2" class="smallImg" onMouseover="ChangeImg(1)">
       <img src="image2.jpg" alt="image 2">
      </div>
      <div id="image3" class="smallImg" onMouseover="ChangeImg(2)">
       <img src="image3.jpg" alt="image 3">
      </div>
      <div id="image4" class="smallImg" onMouseover="ChangeImg(3)">
       <img src="image4.jpg" alt="image 4">
      </div>
      <div id="image5" class="smallImg" onMouseover="ChangeImg(4)">
       <img src="image5.jpg" alt="image 5">
      </div>
     </div>
     </body>
    </html>
    Good Luck with whichever version you choose to use.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    btw inserting your thumbs into the divs - what for?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Feb 2010
    Posts
    3
    Quote Originally Posted by Padonak View Post
    btw inserting your thumbs into the divs - what for?
    Should i remove the div's surrounding each thumbnail and just give each img an id?

  6. #6
    Join Date
    Feb 2010
    Posts
    3

    resolved

    Works great anyway.

    Thanks

Thread Information

Users Browsing this Thread

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

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