[b]Description: [/b]Expando is a simple script for folks who want to have an image expand onMouseover (to its actual size). This lets you display large images at a reduced size initially (aka thumbnail size), and have them dynamically expand when the mouse rolls over them. Installation is simple- install the script in the HEAD section of the page, then give your "thumbnail" images a CSS class of "expando". These thumbnail images should have an explicit width/height attribute that's less than the actual image's dimensions, so the script has something to expand to. [b]Source:[/b] http://www.dynamicdrive.com [b]Demo1:[/b] [url=http://profiles.friendster.com/aidenphat]click the floating image[/url] [b]Demo2:[/b] [url=http://profiles.friendster.com/85975975]click the floating image[/url] The above code references the external .js file [spoiler][quote]/* Expando Image Script �2008 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 - This Notice Must Remain for Legal Use */ if (document.images){ (function(){ var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20; var expConIm = function(im){ im = im || window.event; if (!expConIm.r.test (im.className)) im = im.target || im.srcElement || null; if (!im || !expConIm.r.test (im.className)) return; var e = expConIm, widthHeight = function(dim){ return dim[0] * cos + dim[1] + 'px'; }, resize = function(){ cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2; im.style.width = widthHeight (e.ims[i].w); im.style.height = widthHeight (e.ims[i].h); if (e.ims[i].d && times > e.ims[i].jump){ ++e.ims[i].jump; e.ims[i].timer = setTimeout(resize, speed); } else if (!e.ims[i].d && e.ims[i].jump > 0){ --e.ims[i].jump; e.ims[i].timer = setTimeout(resize, speed); } }, d = document.images, i = d.length - 1; for (i; i > -1; --i) if(d[i] == im) break; i = i + im.src; if (!e.ims[i]){ im.title = ''; e.ims[i] = {im : new Image(), jump : 0}; e.ims[i].im.onload = function(){ e.ims[i].w = [e.ims[i].im.width - im.width, im.width]; e.ims[i].h = [e.ims[i].im.height - im.height, im.height]; e (im); }; e.ims[i].im.src = im.src; return; } if (e.ims[i].timer) clearTimeout(e.ims[i].timer); e.ims[i].d = !e.ims[i].d; resize (); }; expConIm.ims = {}; expConIm.r = new RegExp('\\bexpando\\b'); if (document.addEventListener){ document.addEventListener('mouseover', expConIm, false); document.addEventListener('mouseout', expConIm, false); } else if (document.attachEvent){ document.attachEvent('onmouseover', expConIm); document.attachEvent('onmouseout', expConIm); } })(); }[/quote] [/spoiler] Then, all that's left is to shrink those large images on your page (by giving them an explicit width/height attribute that's smaller than the actual dimensions), and adding the CSS class "expando" to them. For example: [quote]<img class='[b]expando[/b]' align='[b]center[/b]' src='[b]IMAGE LINK[/b]' width='[b]80px[/b]' height='[b]80px[/b]' style='filter:none;-moz-opacity:1.0'/></div> <img class='[b]expando[/b]' align='[b]center[/b]' src='[b]IMAGE LINK[/b]' width='[b]80px[/b]' height='[b]80px[/b]' style='filter:none;-moz-opacity:1.0'/></div> <img class='[b]expando[/b]' align='[b]center[/b]' src='[b]IMAGE LINK[/b]' width='[b]80px[/b]' height='[b]80px[/b]' style='filter:none;-moz-opacity:1.0'/></div>[/quote] Have fun expandoing images!

Last edited by aidenlive (2008-12-18 20:10:47)