User:Nux/dimcheck n title.js
< User:Nux
Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: press Ctrl-F5, Mozilla: hold down Shift while clicking Reload (or press Ctrl-Shift-R), Opera/Konqueror: press F5, Safari: hold down Shift + Alt while clicking Reload, Chrome: hold down Shift while clicking Reload.
 |
Documentation for this user script can be added at User:Nux/dimcheck n title. |
- Report page listing warnings and errors.
// Copyright by: Maciej Jaros [[:pl:User:Nux]]
// License: [http://opensource.org/licenses/gpl-license.php GNU General Public License v2]
/*
Dimension check & alt or longdesc show
*/
var onmouseDimCheckElement;
var onmouseTitleElement;
function onmouseDimCheckTitle(e)
{
// ignore when ALT pressed
if (e.altKey)
return
;
var h,w,txt;
w = this.offsetWidth;
h = this.offsetHeight;
// alert('w:'+w + 'h:'+h + '\nw/h:'+(w/h));
txt = 'w:'+w+' h:'+h+' w/h:'+Math.round(w/h * 1000)/1000;
var test = Math.round(w/h * 100); // 4/3*100 = 133.(3)
// aprox 4:3 - OK
if (test==132 || test==133)
{
onmouseDimCheckElement.style.backgroundColor = '#3c3';
txt += ' (<b>OK</b>)';
}
// too wide, but if its a very nice picture...
else if (test>133 &&test<=151)
{
onmouseDimCheckElement.style.backgroundColor = '#ee6';
txt += ' (<b>too wide</b>, but might be OK, especially if "white")';
}
// too wide, but if its a very nice picture...
else if (test>151)
{
onmouseDimCheckElement.style.backgroundColor = '#ee6';
txt += ' (much <b>too wide</b>, might still be OK but only if "white")';
}
// too high, which is always bad!
else
{
onmouseDimCheckElement.style.backgroundColor = '#e66';
txt += ' (<b>too high</b>, DO NOT USE IT)';
}
// apply new text
onmouseDimCheckElement.innerHTML = txt;
// get&show the alt or longdesc
txt = (this.alt == '') ? this.getAttribute('longdesc') : this.alt;
if (txt==null)
{
txt = this.parentNode.title; // title of the link above
if (txt==null) txt = '-';
}
txt = txt.replace(/</,'<').replace(/>/,'>');
txt += '<img onclick="onmouseDimCheckElement.innerHTML=\'\';onmouseTitleElement.innerHTML=\'\';" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Gnome-window-close.svg/16px-Gnome-window-close.svg.png" />';
onmouseTitleElement.innerHTML = txt;
}
/*
Adding onMouseOver actions for images
*/
function addImgOnmouseDimChecksTitle()
{
var artbody = document.getElementById('bodyContent');
// add event
var imgs = artbody.getElementsByTagName('img');
for (var i = imgs.length - 1; i >= 0; i--) {
imgs[i].onmouseover = onmouseDimCheckTitle;
}
// add display element
onmouseDimCheckElement = document.createElement('div');
onmouseDimCheckElement.id = 'dimchkshow'
onmouseDimCheckElement.style.cssText = 'position:fixed; left:0px; bottom:0px; padding: 2px 4px; background:#eee; color: #000; font-size: 90%; z-index:2;';
artbody.appendChild(onmouseDimCheckElement);
// add title display element
onmouseTitleElement = document.createElement('div');
onmouseTitleElement.id = 'titleshow'
onmouseTitleElement.style.cssText = 'position:fixed; right:0px; bottom:0px; padding: 2px 4px; background:#eee; color: #000; font-size: 90%; width:100%; z-index:1; text-align:right;';
artbody.appendChild(onmouseTitleElement);
}
$(addImgOnmouseDimChecksTitle);