Well I am creating a series of sites just to try and improve my skills with web design.

My problem is I will have a series of thumbnails going in a line at the top hand of the screen.
These thumbnails link to my other sites, however when you hover over them I need text to appear underneath saying what the site is.

I.e. The Games Webiste
I.e. Web Hosting

However, when people arent hovering over it I need it to say "Why not try another one of our sites"

If any could help that would be good. Thank you


9 Years
Discussion Span
Last Post by Grantmitch1

Something like this ?

<style type="text/css">
body {
  padding: 60px;

.hover {
  padding: 20px;
  background: silver;
  color: white;
  cursor: pointer;

#caption {
  padding: 20px 0;
<script type="text/javascript">
window.onload = register_captions;

function register_captions () {
  var nodes = ( typeof document.all == 'undefined' ) ? 
    document.getElementsByTagName('*') : document.all;
  var caption = document.getElementById('caption').firstChild;
  for ( var i = 0; i < nodes.length; i ++ ) {
    var node = nodes.item(i);
    if ( /hover/.test( node.className ) ) {
      node.onmouseover = function () {
        caption.nodeValue = this.getAttribute('title');
      node.onmouseout = function () {
        caption.nodeValue = 'Why not try another one of our sites';
    <span class="hover" title="The Games Webiste">Image</span>
    <span class="hover" title="Web Hosting">Image</span>
  <p id="caption">Why not try another one of our sites</p>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.