Solved

Search Engine Friendly Rollover Text

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
[HTML] Graphic not centered on page 4 46
Problem with a CSS in a page 2 27
Objects on Same Line 2 18
Grunt Copy file to another destination. 1 14
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

867 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now