Image Rollovers

Discussion in 'Web Design and Development' started by abagofcandy, Apr 30, 2009.

  1. abagofcandy macrumors newbie

    Joined:
    Apr 30, 2009
    #1
    Hello,

    I have an image in a table. I would like that image to a different image when you cursor over a line of text.

    Example;

    No cursor, Image 1 is shown.
    Cursor over "Z text" --> image 2 is shown
    Cursor over "Y text" --> image 3 is shown.

    Thanks for your time and consideration,
    Sofia
     
  2. dornoforpyros macrumors 68040

    dornoforpyros

    Joined:
    Oct 19, 2004
    Location:
    Calgary, AB
    #2
    **************************. ;)

    In all honesty though you'll find CSS rollovers are the way to go, they load faster and only rely on 1 image file instead of 2 separate files. So when some one rolls over the image you won't have to worry about a possible delay in loading the image or preloading a bunch of images in the body tag.

    best of luck
     
  3. abagofcandy thread starter macrumors newbie

    Joined:
    Apr 30, 2009
    #3
    I searched google for no less than 15 minutes before I made an account and posted here.

    Google is not giving me what I need. I do not desire to have an image change when I roll my mouse over it, and that is all I am able to find through google.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Well, you could have likely modified what you found to fit your situation, but here's an example.
    HTML:
    <ul id="img-links">
      <li><a href="image01.jpg">Image 1</a></li>
      <li><a href="image02.jpg">Image 2</a></li>
      <li><a href="image03.jpg">Image 3</a></li>
    </ul>
    <div><img id="img" src="image01.jpg" /></div>
    
    <script type="text/javascript">
    var imgLinks = document.getElementById('img-links').getElementsByTagName('a');
    for (var a=0, b=imgLinks.length; a<b; ++a) {
      imgLinks[a].onmouseover = function() {
        document.getElementById('img').src = this.href;
        return false;
      };
      imgLinks[a].onmouseout = function() {
        document.getElementById('img').src = 'image01.jpg';
        return false;
      };
    }
    </script>
     
  5. Melrose macrumors 604

    Melrose

    Joined:
    Dec 12, 2007
    #5
    I'd recommend using CSS to accomplished image rollovers. Javascript is okay, don't get me wrong, but I prefer not having to load an extra file.

    ALA should have a good article on it, but it's really not that complicated a technique. Google should do nicely. Just search for "CSS image rollovers"

    :)
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    The OP wants the image to show up in a different spot than where the links being moused over are at. This is much trickier with CSS depending on the exact HTML he's working with.

    Here's one of those trickier solutions.
     
  7. Melrose macrumors 604

    Melrose

    Joined:
    Dec 12, 2007
    #7
    Apologies. I have a difficulty with reading comprehension (seriously). I'm overtired and missed his point...

    Still, it is good to know it can be done with CSS nonetheless...
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Well, that assumes I'm comprehending her correctly. The part that stuck out for me was the mentioning of tables. It could go either way though, we'll see if the OP comes back.
     
  9. abagofcandy thread starter macrumors newbie

    Joined:
    Apr 30, 2009
    #9
    Hello,

    I'd like to take the time to extend my personal thanks to angelwatt for perfectly answering my question. You've been a great help.

    - Sofia
     

Share This Page