?
Solved

Search Engine Friendly Rollover Text

Posted on 2009-04-08
2
Medium Priority
?
149 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 2000 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
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.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 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