Test something
by Jimmy Chandra
HTML
<img src="http://farm6.static.flickr.com/5282/5355532341_e4b1a46e4f_s_d.jpg" class="thumbnail" title="Flower and table and stuffs" data-bigpicUrl="http://farm6.static.flickr.com/5282/5355532341_e4b1a46e4f_d.jpg" />
<img src="http://farm6.static.flickr.com/5123/5356156342_3984d757d2_s_d.jpg" class="thumbnail" title="Nice eye" data-bigpicUrl="http://farm6.static.flickr.com/5123/5356156342_3984d757d2_d.jpg" />
<div>CC image by <a href="http://www.flickr.com/photos/opie1/">opie0429</a> and <a href="http://www.flickr.com/photos/56418478@N07/">gitrevisanuto</a></div>
<div id="bigpic"></div>
<div id="pictitle"></div>
JavaScript
window.onload = function() {
var thumbnails = getThumbnails();
for(var i = 0; i < thumbnails.length; i++) {
var thumbnail = thumbnails[i];
thumbnail.addEventListener("mouseover",
(function(t) {
return function() {
var bp = document.getElementById("bigpic");
bp.innerHTML = "<img src='" + t.getAttribute("data-bigpicUrl") + "'>";
var pt = document.getElementById("pictitle");
pt.innerHTML = t.title;
};
})(thumbnail), false);
thumbnail.addEventListener("mouseout",
(function(t) {
return function() {
var bp = document.getElementById("bigpic");
bp.innerHTML = "";
var pt = document.getElementById("pictitle");
pt.innerHTML = "";
};
})(thumbnail), false);
};
};
function getThumbnails() {
var imgs = document.getElementsByTagName("img"), results = [];
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].className === 'thumbnail')
results[results.length] = imgs[i];
};
return results;
}