Solved

Search Engine Friendly Rollover Text

Posted on 2009-04-08
2
146 Views
Last Modified: 2012-05-06
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?
0
Comment
Question by:jmbaratta
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 3

Accepted Solution

by:
GarthSnyder earned 500 total points
ID: 24103519
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
 
LVL 3

Expert Comment

by:GarthSnyder
ID: 24103541
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this post we will learn how to make Android Gesture Tutorial and give different functionality whenever a user Touch or Scroll android screen.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question