antijingoist icon

Quick and Dirty alt text tool tips

antijingoist | PRO | 12/02/24 07:19:47 PM UTC | 0 ⭐ | 412 👁️ | Never ⏰ | [images, accessibility]
JavaScript |

1.35 KB

|

Source Code

|

0 👍

/

0 👎

var styles = `
    #imageAltTip {
      position: fixed;
      top: 0;
      left: 0;
      min-height: 2rem;
      height: fit-content;
      width: fit-content;
      background: black;
      color: white;
      display: none;
      z-index: 99999;
      padding: 5px 1rem;
    }
 
  #imageAltTip.alt-ToolTipShow {
    display: block;
  }
`
 
var styleSheet = document.createElement("style")
styleSheet.textContent = styles
document.head.appendChild(styleSheet);
 
altTip = document.createElement("div");
altTip.setAttribute("id", "imageAltTip");
altTip.innerHTML = "";
document.body.append(altTip);
 
var imageNodes = document.getElementsByTagName("img");
for (var i = 0; i < imageNodes.length; i++) {
  document.images[i].addEventListener(
    "mouseover",
    function (e) {
      altTip.className = "";
    }, false );
}
 
 
for (var i = 0; i < imageNodes.length; i++) {
  document.images[i].addEventListener(
    "mousemove",
    function (e) {
      altTip.className = "alt-ToolTipShow";
      altTip.style.left = (e.clientX) + "px";
      altTip.style.top = e.clientY + "px";
 
      try {
        altTip.innerHTML = e.srcElement.alt;
      } catch(e) {
        try {
          altTip.innerHTML = e.srcElement.title;
        } catch(e) {
          altTip.innerHTML = "No alt text";
        }
      }
    },
    false,
  );
}

Comments