SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast RSBomber's Avatar
    Join Date
    Oct 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    unobtrusive rollover technique

    Can someone tell me how I would go about achieving the following?

    Let's say I have floated list of thumbnail images in the main section of the page and a corresponding list of product names in the left navigation part of the page. Clicking the thumbnail or the corresponding text link would load a more detailed page.

    I would like to change the state of the of the thumbnail on rollover as well as the corresponding name in the left column and vice-versa. For example, rolling over the various thumbnails would cause the corresponding links to change in the left side -or- rolling over the links in the left would cause the corresponding thumbnail to change. I'm not looking for multiple image behavior, but rather a subtle change like a border css border color change on the image and maybe bolding the text link.

    Does this make any sense?

    Sorry I don't have any code sample to post as I am still in concept mode. I have seen this performed numerous times, but now that I am looking for it, I can't even find any examples to rip apart. Any help you can provide will be greatly appreciated.

    Thanks.

  2. #2
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will whip up an example for you a bit later if you need it, but the underlying code necessary to do this is rather simple.

    I would create a two dimensional array containing the id's of the elements in their matching pairs, eg: elArray[0][0] = 'linkA'; elArray[0][1] = 'imageA'; etc...

    Then you could set the onMouseOver for both the image and the link to point to the same function passing the Array position as an argument, say rollover(0).

    In this function, you would modify the style of both of the elements in the Array with that positon, and then onMouseOut reset the styles. Example:
    Code:
    Javascript:
    
    Function rollOver(pos)
    {
       var img = document.getElementById(elArray[pos][0]);
       var lnk = document.getElementById(elArray[pos][1]);
    
       img.style.border = '1pt solid #f00';
       lnk.style.color = '#f00';
    }
    
    Function rollOut(pos)
    {
       var img = document.getElementById(elArray[pos][0]);
       var lnk = document.getElementById(elArray[pos][1]);
    
       img.style.border = '0pt solid #000';
       lnk.style.color = '#000';
    }
    
    HTML:
    
    <a href="foo.html" id="linkA" onMouseOver="rollOver(0);" onMouseOut="rollOut(0);" >Link A</a>
    
    <img src="foo.jpg" id="imageA" onMouseOver="rollOver(0);" onMouseOut="rollOut(0);" alt="Image A" />
    * Code is untested and may have slight errors, use for indication only


    Again, if you need an example I'll work on one, but that should give you a rough idea of what you need?

    Regards,
    Jordan

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jordan, you beat me to it by about 2 minutes, LOL!

    Here's a simple demo. It assumes that the order of links corresponds to the order of images:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type='text/javascript'>
    
    var
      nList, tList,
      nDefault = 'none',
      nHighlight = '2px solid #000',
      tDefault = 'none',
      tHighlight = '2px solid #000';
    
    window.onload = function()
    {
      var i, nDiv, tDiv;
      nDiv = document.getElementById('navigation');
      tDiv = document.getElementById('thumbnails');
      if (nDiv && tDiv && nDiv.getElementsByTagName && nDiv.style) {
        nList = nDiv.getElementsByTagName('A');
        tList = tDiv.getElementsByTagName('IMG');
        for (i = 0; i < nList.length; ++i) {
          nList[i].onmouseover = tList[i].onmouseover = mouseOver;
          nList[i].onmouseout = tList[i].onmouseout = mouseOut;
          nList[i].rolloverIndex = tList[i].rolloverIndex = i;
        }
      }
    }
    function mouseOver()
    {
      var i = this.rolloverIndex;
      nList[i].style.border = nHighlight;
      tList[i].style.border = tHighlight;
    }
    function mouseOut()
    {
      var i = this.rolloverIndex;
      nList[i].style.border = nDefault;
      tList[i].style.border = tDefault;
    }
    </script>
    </head>
    <body>
    
    <div id='navigation'>
      <p><a href=''>1</a></p>
      <p><a href=''>2</a></p>
      <p><a href=''>3</a></p>
      <p><a href=''>4</a></p>
    </div>
    
    <div id='thumbnails'>
      <p><img src='' width='10' height='10'></p>
      <p><img src='' width='10' height='10'></p>
      <p><img src='' width='10' height='10'></p>
      <p><img src='' width='10' height='10'></p>
    </div>
    
    </body>
    </html>

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are several different ways of doing this. I'd say that Jordan's technique is the most cross-browser, while still having the capability of being unobtrusive.

  5. #5
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great minds and all Mike...

    Anyway here is a working example of my previous idea. Though I used div elements instead of images.

    http://sandbox.windebank.com.au/MultiRollOver

    Kind regards,
    Jordan

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice demo, Jordan

    Now that I think about it... using document.links and document.images would be the most cross-browser technique

  7. #7
    SitePoint Enthusiast RSBomber's Avatar
    Join Date
    Oct 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! Thanks guys. Both examples are excellent and exactly what I was looking for.

    Both the text links and corresponding thumbnail images will be dynamically generated from a database (PHP/MySQL)... so I think Mike's example might be a better fit since I can target the ID of the UL without having to manually create an array, but I will experiment with them both.

    Thanks again for your help. You guys rock!

  8. #8
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're more than welcome RSBomber.

    Regards,
    Jordan

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •