Create image rollover based on text hover!

[thecritix]

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..

 

[Dunmail]

I've done something like this in Javascript.

function setUpgbImages()
{
   if(!document.getElementsByTagName)
   {
      return;
   }
   var allLElems = document.getElementsByTagName("li");
   for(var i = 0; i < allLElems.length; i++)
   {
      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 i = 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.

 

[thecritix]

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

 

[Dunmail]

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

Yep, it's the end of the world

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.

 

[design-is]

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

 

[Dunmail]

Doh!

Smacks head!!

I actually do this on my own site

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:

.thumbnail img{margin: 0;}
.thumbnail:hover{background-color: transparent;}
.thumbnail:hover img{border: 1px black solid;}
.thumbnail span{position: relative;padding: 0px;left: -1000px;visibility: hidden;color: black;text-decoration: none;}
.thumbnail span img{padding: 0px;}
.thumbnail:hover span{visibility: visible;top: 0;left: -190px;z-index: 50; }

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:

a.thumbnail {
  position: relative;
  text-decoration: underline;
  }
  
a.thumbnail img {
  display: none;
  }
  
a.thumbnail:hover {
  text-indent: 0;
  }
  
a.thumbnail:hover img {
  display: inline;
  position: absolute;
  top: -20px;
  left: -200px;
  border: 1px solid #666;
  }

 

[design-is]

There you go - you hit the nail right on the head

/Doug