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


10 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.