Solved

Search Engine Friendly Rollover Text

Posted on 2009-04-08
2
145 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
  • 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
printf performancy 11 67
Diminish Pop-up  in 3 seconds 7 44
Selenium docs api java index 3 48
Button on Table, name table1 not working 4 20
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.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project

789 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