User:Dispenser/alttextexplorer.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/* If you want to use this script, simply add the following line to your [[Special:Mypage/monobook.js]]:

importScript('User:Dispenser/alttextexplorer.js'); // Linkback: [[User:Dispenser/alttextexplorer.js]]
 
* (Please keep the comment so I can see how many people use this). 
*/

(function() {
return; // early exit - script is broken.
if(typeof(noaltcss) == 'undefined'){
	appendCSS(".alt-block{background:#444; color:#fff; line-height:1.3em; font-size:0.8em; padding:2px; text-align:left;} .alt-block span{background:#444;}")
	appendCSS(".alt-inline{border:1px solid #444; display:inline-block; position:relative;} .alt-inline div{background:#444; color:#fff; font-size:80%; position:absolute; top:0; display:none;; width:20em; z-index:15;} .alt-inline:hover div{display:block;}")
	appendCSS("img.alt-nolink { border:2px solid sandybrown;}")
	appendCSS("img.alt-none { border:2px solid red;}")
	appendCSS("img.alt-nolink.alt-none, img.tex.alt-nolink { border:none;}")
}

var BlockNodes = /^(?:BR|BLOCKQUOTE|BUTTON|CENTER|DIV|H[1-6]|OL|UL|DL|TABLE|TR|TD|TH|P|PRE)$/
function addAlts() {
	var image;
	var bodyc = document.getElementById('bodyContent') || document.getElementById('content') || document.getElementById('mw_content')
	var images = bodyc.getElementsByTagName('img')
	for(var i=0; (image=images[i]); i++) {
		// Skip skins or extensions icons
		if(image.src.indexOf('/skins-1.5/') != -1 || image.src.indexOf('/extensions/') != -1)
			continue

		var useblock
		var nt = image
		var container = nt
		while(true){
			if(nt.nextSibling){
				nt = nt.nextSibling
				if(nt.nodeType==3){
					if(/\S/.test(nt.nodeValue)){
						useblock = false;
						break;
					}
				}else if(nt.nodeType == 1){
					useblock = BlockNodes.test( nt.tagName )
					break;
				}
			} else {
				// Assume that we are at the end of the elements
				if(BlockNodes.test(container.parentNode.tagName)){
					useblock = true;
					break;
				} else {
					container = nt = container.parentNode;
				}
			}
		}
		/* Deal with geobox redpog elements */
		if(useblock && container.parentNode.tagName == "DIV" && container.parentNode.style.position == "relative"){
			if( container.parentNode.parentNode.tagName == "DIV" )
				container = container.parentNode
			else
				useblock = false
		}
		
		/* Make changes */
		if (image.alt == '') {
			image.className += " alt-none";
		} else if(useblock) {
			var n = container.parentNode.insertBefore(document.createElement('div'), container.nextSibling);
			n.appendChild(document.createElement('span')).appendChild(document.createTextNode(image.alt));
			n.className = "alt-block";
			n.style.width = (image.width - 2) + 'px';
		} else {
			var n = container.parentNode.insertBefore(document.createElement('span'), container);
			n.appendChild(container);
			n.className = "alt-inline"
			n.appendChild(document.createElement('div')).appendChild(document.createTextNode(image.alt));
		}

		if(image.parentNode.tagName != 'A'){
			image.className += " alt-nolink";
		} else if(image.alt) {
			var alt = escape(image.alt.replace(/ /g,'_'))
			var a = image.src.match( new RegExp( RegExp.escape(alt)+"(|\\.\\w{3})$" ) )
			if(a)
				image.className += " alt-none"
		}
	}
}

if(doneOnloadHook) addAlts(); //if imported dynamically
else addOnloadHook(addAlts);
}());