Create image rollover based on text hover!

Discussion in 'Web Design and Development' started by thecritix, Sep 13, 2009.

  1. macrumors 6502

    Joined:
    Dec 11, 2006
    Location:
    West London, England
    #1
    Hi All

    I'm looking to have an image rollover based on which link is selected next to it. There would be a list of links and the mouse would hover over link a, and the image to the left should show image a.
    When the mouse rolls over link b, the image shows image b.

    I'm fairly confident I can do this using flash and I know some flash can be read now by Google, but ideally this would be done without flash so the links can still be indexed for SEO.

    First one to get it gets a new mac pro*

    Nick


    *maybe.. ;)
     
  2. macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #2
    I've done something like this in Javascript.

    PHP:
    function setUpgbImages()
    {
       if(!
    document.getElementsByTagName)
       {
          return;
       }
       var 
    allLElems document.getElementsByTagName("li");
       for(var 
    0allLElems.lengthi++)
       {
          var 
    elem allLElems[i];

          if(
    elem.className && (' ' elem.className ' ').indexOf(' changeImage_') != -1)
          {
             
    elem.onmouseover changeImage;
          }
       }
    }


    function 
    changeImage(e)
    {
       var 
    elem = (document.all) ? document.all.bookImage document.getElementById("bookImage");
       var 
    parts this.className.split("_");
       var 
    parseInt(parts[1]);
       
       
    elem.src "..\/pictures\/guide\/" guides[i].pic;
    }
    What I've done is to put the text on which I wish to hover to change the image into an unordered list and given each a className like "changeImage_2". The function setUpgbImages() is then called by the page onload handler to assign the second function as the mouseover handler. This function splits the classname on the underscore and then uses the number as an index into an array of images and sets the source accordingly.

    Of course if you don't want to use Javascript then this is of no use to you. I'm afraid I don't know Flash programming at all.
     
  3. thread starter macrumors 6502

    Joined:
    Dec 11, 2006
    Location:
    West London, England
    #3
    But it's Javascript + SEO doesn't that = global meltdown?

    Seriously though... My reasons for not using flash was for SEO purposes so if Javascript is no good for SEO then I will have to rule that one out as well!

    Any ideas on whether its usable?

    Nick
     
  4. macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #4
    Yep, it's the end of the world:D

    The code is definitely usable. Also the actual links aren't generated or modified by the javascript - they'll still work as links and be indexable by search engines.

    Just remembered a technique of Eric Meyers - http://meyerweb.com/eric/css/edge/popups/demo2.html that does this, best not to have images that are too big though.
     
  5. macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #5
    Hi :)

    You could easily achieve this with CSS alone. Using CSS to separate your presentational data from your HTML markup will ensure your SEO is not harmed.

    Check out this example of a similar implementation. This can be adapted to work with text. I'll let you have a look first and try and figure it out yourself, but let us know if you need help!

    /Doug
     
  6. macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #6
    Doh!

    Smacks head!!

    I actually do this on my own site :rolleyes:

    A list of items like <li><a class="thumbnail" href="whatever"><span><img src="images/whatever_thumb.jpg" alt="A thumbnail" ></span>A link to whatever</a></li>

    The CSS is:

    PHP:
    .thumbnail img{margin0;}
    .
    thumbnail:hover{background-colortransparent;}
    .
    thumbnail:hover img{border1px black solid;}
    .
    thumbnail span{positionrelative;padding0px;left: -1000px;visibilityhidden;colorblack;text-decorationnone;}
    .
    thumbnail span img{padding0px;}
    .
    thumbnail:hover span{visibilityvisible;top0;left: -190px;z-index50; }

    Which I didn't get from Stu Nichols' site even though it is very similar. If you want relative positioning then CSS like this will work:

    PHP:
    a.thumbnail {
      
    positionrelative;
      
    text-decorationunderline;
      }
      
    a.thumbnail img {
      
    displaynone;
      }
      
    a.thumbnail:hover {
      
    text-indent0;
      }
      
    a.thumbnail:hover img {
      
    displayinline;
      
    positionabsolute;
      
    top: -20px;
      
    left: -200px;
      
    border1px solid #666;
      
    }

     
  7. macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #7
    There you go - you hit the nail right on the head :)

    /Doug
     

Share This Page