Search Engine Friendly Rollover Text

Hello, I have a page currently mocked up at http://www.medmarketplace.com/luis/sell-page-template-2009/.  When going to that page, you will see as you mouse over the left-hand buttons (Who We Are, What We Are...), the content on the right changes.  I like this dynamic effect, but when using "search engine simulators" online, I found that only the first contact panel (the one that pre-loads) is the only one that gets spidered.  I am looking for some suggestions or code for achieving a look similar to this, but in a search-engine friendly manner.  I was thinking DHTML, but I was unable to find an example code.  What are your thoughts?
jmbarattaAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GarthSnyderConnect With a Mentor Commented:
Yes, this is a good place to use some simple DHTML. I would suggest that you include all 4 text blocks, one after the other, inside your #div2 area. But wrap each alternative in its own div with a separate id, and set all but the first to style="display: none". This takes them completely out of layout, as if they didn't exist, but they are still visible to spiders as normal HTML.

In your rollover JavaScript, set "display: block" on the div you want to show and "display: none" on all the others. Remember that you are setting CSS properties, NOT DOM properties. I don't remember the raw JavaScript syntax, but I think it's basically object.style.display = "block" and so on.

This is an area where off-the-shelf JavaScript libraries such as jQuery, Mootols, or Prototype make things super-simple. They manage the display groups for you and make sure only one div is shown at a time.
0
 
GarthSnyderCommented:
For example, here's a hide-all-but-one widget implemented with jQuery. There's a separate JavaScript file that builds on top of jQuery that you'll have to copy, but no JavaScript at all is needed in the main page. Your application is a little different in that you want rollovers rather than links, but the same idea applies.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.