Replace Images with Links with Javascipt
Feb 03
So, in this project I am working on, I’ve had to code around a fairly annoying LMS (Learning Management System). Most recently, in our user testing we discovered that the images were too small to be useful. To remedy that, I painstakingly remade all the images from PDF’s. Problem now is they’re too big to fit in the layout. No problem, right? We just whip up some Mootools usage and replace the image with a link that launches a popup window.
window.addEvent(‘domready’, function() {
//replace images with pop-up style links//content2 is the div where the images are
var images = $$($(‘content2′).getElementsByTagName(‘img’));
for (i=0; i<=images.length-1; i++){
linkto = images[i].src;
var thelink = new Element(‘a’,
{‘id’: ‘image’+i,
‘events’: {
‘mouseover’: function(){
opnwinImage(‘”‘+linkto+’”‘);
}
},
‘class’:'popup’,
‘html’:'view image’,
‘href’:'#’
}
);
$(thelink).replaces(images[i]);
}
}/* here’s the popup window: it sizes itself to the image, with a little extra for the close and print buttons. */
function opnwinImage(url){
url = url.split(‘”‘).join(”);
sz = getImgSize(url).split(‘,’);
newwindow2=window.open(”,’name’,'height=’+(Number(sz[1])+120)+’,width=’+(Number(sz[0])+20)+’,scrollbars=1,resizable=1′);
var tmp = newwindow2.document;
tmp.write(‘<html><head><title>Image PopUp</title>’);
tmp.write(‘<link href=”/css/style.css” rel=”stylesheet” type=”text/css” />’);
tmp.write(‘</head><body>’);
tmp.write(‘<div class=”popUpControls”><span><a href=”javascript:window.print()”>print</a></span>’);
tmp.write(‘<span><a href=”javascript:self.close()”>close</a></span>’);
tmp.write(‘</div>’);
tmp.write(‘<div class=”popUpContent”>’);
tmp.write(‘<img src=”‘+url+’” alt=”" align=”center” />’);
tmp.write(‘</div>’);
tmp.write(‘<div class=”popUpControls”><span><a href=”javascript:window.print()”>print</a></span>’);
tmp.write(‘<span><a href=”javascript:self.close()”>close</a></span>’);
tmp.write(‘</div>’);tmp.write(‘</body></html>’);
if (window.focus) {newwindow2.focus()}tmp.close();
}
//and of course, we need to know how big the image is…
function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
return (width+’,'+height);
}