I think I have all the kinks worked out. Before I start though, where you have:
I think you really want this instead:Code:</div><!--EndIndent--> </div><!--ENDCONTENT--> <hr> <br class="clearboth"> <div align="center">
Here are the new styles:Code:</div><!--EndIndent--> </div><!--ENDCONTENT--> <div class="clearboth"></div> <hr> <div align="center">
Here is the new markup with an on page helper script:Code:.expando { position: absolute; visibility: hidden; top: 0; } .ex1 { left: 0; } .ex2 { left: auto; right: 0; } .excent { left: -52px; margin-left: 50%; } .excontainer { position:relative; float: left; margin: 0; padding: 0 2px; height: 137px; z-index: 1; background-position: left top; background-repeat: no-repeat; } #image1 { width:105px; background-image: url(images/steamed-vegetables1_tbn.gif); } #image2 { width:116px; padding-right: 0; background-image: url(images/steer-bathroom1_tbn.gif); } #image3 { width:104px; background-image: url(images/whipped-cream1_tbn.gif); background-position: center top; } #image4 { width:104px; padding-left: 0; background-image: url(images/new-muffler1_tbn.gif); background-position: right top; } #image5 { width:117px; background-image: url(images/big-A-ranch1_tbn.gif); background-position: right top; }
Here's the new script:Code:<div class="center"> <div class="excontainer start" id="image1"> <img class="expando ex1" src="images/steamed-vegetables1.gif" width="105" height="137" border="0" alt="steamed vegetables cartoon 1"> </div> <div class="excontainer start" id="image2"> <img class="expando ex1" src="images/steer-bathroom1.gif" width="116" height="130" border="0" alt="steer in bathroom cartoon 2"> </div> <div class="excontainer start" id="image3"> <img class="expando ex1 excent" src="images/whipped-cream1.gif" width="104" height="137" border="0" alt="whipped cream cartoon 3"> </div> <div class="excontainer start" id="image4"> <img class="expando ex2" src="images/new-muffler1.gif" width="104" height="137" border="0" alt="new muffler cartoon 4"> </div> <div class="excontainer start" id="image5"> <img class="expando ex2" src="images/big-A-ranch1.gif" width="117" height="131" border="0" alt="Big A Ranch cartoon 5"> </div> </div> <script type="text/javascript"> (function(){ var loadsure = function(i, e){ e = e || window.event || null; if(e && e.type == 'load' || i.complete){ i.parentNode.className = i.parentNode.className.replace(r2, ''); i.style.visibility = 'hidden'; } else i.onload = function(){loadsure(i);}; }, e = document.images, l = e.length, r1 = new RegExp('\\bexpando\\b'), r2 = new RegExp(' start'); for(var i = 0; i < l; ++i) if(r1.test(e[i].className)) loadsure(e[i]); })(); </script> <div style="clear:left;"></div>
Code:/* Expando-ZV Image Script ©2008 - 2009 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, times = 40, speed = 20, etype = null; var expConIm = function(im){ im = im || window.event; etype = im.type || null; if (!expConIm.r.test (im.className)) im = im.target || im.srcElement || null; if (expConIm.cr.test (im.className) && etype == 'mouseover'){ im.getElementsByTagName('img')[0].style.visibility = 'visible'; return; } else 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(/\bexcent\b/.test(im.className)) im.style.left = '-' + parseInt(widthHeight (e.ims[i].w)) / 2 + 'px'; if (e.ims[i].d && times > e.ims[i].jump){ ++e.ims[i].jump; im.parentNode.style.zIndex = 3; e.ims[i].timer = setTimeout(resize, speed); } else if (!e.ims[i].d && e.ims[i].jump > 0){ --e.ims[i].jump; im.parentNode.style.zIndex = 2; e.ims[i].timer = setTimeout(resize, speed); } else if (!e.ims[i].d && e.ims[i].jump < 1){ im.parentNode.style.zIndex = ''; im.style.visibility = 'hidden'; } }, 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; if(e.ims[i].w && e.ims[i].h) resize (); }; document.write('<style type="text/css">.start { background-position: -1000px!important;}.expando {visibility: visible;}<\/style>'); expConIm.ims = {}; expConIm.r = new RegExp('\\bexpando\\b'); expConIm.cr = new RegExp('\\bexcontainer\\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); } })(); }
Originally Posted by Lorel
caused a problem so I changed it to (background-repeat: no-repeat
Bookmarks