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
  • 111 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Grantmitch1

Dani AI

Generated

Nice, — and good working example from . For future readers: the basic onmouseover technique is fine, but it can be made more robust for keyboard users, touch devices, and screen readers. Below is a small, progressive-enhancement pattern that keeps a usable default caption for no-JS browsers and adds accessible updating when JavaScript is present.

Use semantic anchors and store the caption in a data attribute (avoid relying on the title tooltip). Provide a visible caption element with aria-live="polite" so assistive tech gets updates.

<ul class="thumb-row">
  <li><a href="..." data-label="The Games Website">
    <img src="games.png" alt="Games Website thumbnail">
  </a></li>
  <li><a href="..." data-label="Web Hosting">
    <img src="hosting.png" alt="Web hosting thumbnail">
  </a></li>
</ul>

<div id="site-caption" aria-live="polite">Why not try another one of our sites</div>

Use event delegation and Pointer Events (plus focus events) so one set of handlers covers mouse, touch and keyboard. This keeps the code small and fast:

const row = document.querySelector('.thumb-row');
const caption = document.getElementById('site-caption');
const fallback = caption.textContent;

row.addEventListener('pointerover', e => {
  const a = e.target.closest('a');
  if (a && row.contains(a)) caption.textContent = a.dataset.label || fallback;
});

row.addEventListener('pointerout', e => {
  if (!row.contains(e.relatedTarget)) caption.textContent = fallback;
});

row.addEventListener('focusin', e => {
  const a = e.target.closest('a');
  if (a) caption.textContent = a.dataset.label;
});

row.addEventListener('focusout', () => caption.textContent = fallback);

Quick tips: include meaningful alt text; ensure caption contrast and reading order; test on mobile (hover is not available); and keep the default caption visible for non-JS users. For details on accessible live regions see ARIA live regions.

Recommended Answers

All 2 Replies

Member Avatar for Member #380484

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.