<img width="176" onclick="this.width*=1.3" ondblclick="this.width=176" alt="RESIZE IMAGE" src="../images/globe_west_2048.jpg" />
<img width="176" onclick="this.src='../images/AchillesAjax-Exekias.jpg'" ondblclick="this.src='../images/globe_west_2048.jpg'" alt="CHANGE IMAGE" src="../images/globe_west_2048.jpg" />
<img width="176" onclick=" try{ A=(A % NAMES.length)} catch(e) { A=1 ;NAMES=[ '../images/globe_west_2048.jpg', '../images/AchillesAjax-Exekias.jpg', '../images/dutchdoor.gif87', '../images/escher.gif', '../images/semaphore.gif', '../images/semaphore_wave.gif' ]};this.src=NAMES[A++];" alt="CHANGE IMAGE" src="../images/globe_west_2048.jpg" />
<img width="176" onclick="this.width=400;this.height=220;" ondblclick="this.width=176;this.height=97;" alt="BEST SIZE" src="../images/AchillesAjax-Exekias.jpg" />
<img width="200" onclick=" try{ TOGGLEA=(TOGGLEA % 3)}catch(e){ TOGGLEA=0; HOLDX=this.getAttribute('width'); HOLDY=this.getAttribute('height'); }; // initialize TOGGLEA, HOLDX, and HOLDY switch(TOGGLEA){ case 0: // removing the attribute makes it take on the default size this.removeAttribute('width'); //this.removeAttribute('height'); break; case 1: // this makes it four times as big as it was originally this.setAttribute('width' ,HOLDX*4); //this.setAttribute('height',HOLDY*4); break; case 2: // this sets to a original size this.setAttribute('width' ,HOLDX); //this.setAttribute('height',HOLDY); break; } TOGGLEA++; " alt="DOM BEST SIZE " src="../images/AchillesAjax-Exekias.jpg" />
<img id="earth1" width="176" onmouseover=" mye=getElementById('earth1'); zoom=setInterval('mye.width=Math.min(1.02*mye.width,1000)',100); // delay loop that changes height on hover " onmouseout=" clearInterval(zoom); // break the loop setInterval() started when you entered" onclick="clearInterval(zoom);this.width=176" alt="ENTER OVER TO RESIZE IMAGE" src="../images/globe_west_2048.jpg" />
<script language="JavaScript"> function getElementPosition(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); } return [curleft,curtop]; } function removeAbsoluteOver(objname){ var x = document.getElementById(objname); x.innerHTML=' '; } function absoluteOver(obj,imgsrc,width,height,lyr){ var coors = getElementPosition(obj); var x = document.getElementById(lyr); x.style.position = 'absolute'; x.innerHTML='<img alt="" src="' + imgsrc + '" width="' + width + '" height="' + height + '" onMouseOut="removeAbsoluteOver(\'layer3\');" >'; x.style.top = coors[1] + 'px'; x.style.left = coors[0] + 'px'; } </script> <li> <div id="layer3"></div> <img id="earth2" width="176" onmouseover="absoluteOver(this,'../images/globe_west_2048.jpg',500,500,'layer3');" alt="Example of image popup" src="../images/globe_west_2048.jpg" />
<img id="earth3" width="176" src="../images/globe_west_2048.jpg" alt="ENTER OVER TO POP UP NEW WINDOW" onmouseover=" Gstring='width=350,height=350,left=100,top=100' Gstring+=',status=no' Gstring+=',resizable=yes,scrollbars=no,menubar=no,toolbar=no,location=no,directories=no'; Gstring+=',copyhistory=no'; Gstring+=',screenX=350,screenY=350'; my_window=window.open('../images/globe_west_2048.jpg','bigger earth3',Gstring);" onclick=" if(false == my_window.closed){ my_window.close (); }else{ alert('enlarge window already closed!'); }" />
If you want to get even fancier, make some ECMAScript/JavaScript functions! Tested in iexplore(1), opera(1), safari(1), and firefox(1).
Released: Sat Feb 9, 2008; John S. UrbanVALIDATE HTML5 VALIDATE W3