Member Avatar for Grantmitch1

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

Regards,
Grant

  • 2 Contributors
  • 2 Replies
  • 82 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Grantmitch1
Member Avatar for langsor

Something like this ?

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

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

#caption {
  padding: 20px 0;
}
</style>
<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';
      };
    }
  }
}
</script>
</head>
<body>
  <p>
    <span class="hover" title="The Games Webiste">Image</span>
    <span class="hover" title="Web Hosting">Image</span>
  </p>
  <p id="caption">Why not try another one of our sites</p>
</body>
</html>
Member Avatar for Grantmitch1

Yes and yes and yes

Its awesome!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.