Zoom In and Out on A Picture

[Total: 0    Average: 0/5]

This shows how to have an image appear to zoom in or out as the user moves the cursor up or down the image on the right.

Head Code:

<SCRIPT TYPE="text/javascript">
        var DOM=document.getElementById?true:false;
        var isIE=(document.all);
        if((navigator.appName=="Netscape")&&
           (navigator.appVersion.charAt(0)>=4)) {
          var nav=1;
        }
        if((!isIE)&&(!nav)) {
        alert("You must have a version 4+ IE or NS!");
        }
                                                                                                                             
        function fix(n){
        if(DOM)
        {
          var _o=document.getElementById("i"+n);
          for(var i=1;i<21;i++)
          {
            var _v="hidden";
            if(i==n) _v="hidden";
            _o.style.visibility=_v;
          }
        }
        else
        {
          (isIE)?eval("i"+n+".style.visibility='visible'"):eval("document.i"+n+".visibility='visible'");
          for(var i=1;i<21;i++){
            if((isIE)&&(i!=n))eval("i"+i+".style.visibility='hidden'");
            else if((nav)&&(i!=n))eval("document.i"+i+".visibility='hidden'");}
        }
        }
</SCRIPT>
<STYLE TYPE="text/css">
.ctrlclass{position:absolute;top:100;left:370;width:30;height:240;z-index:10;}
.i1c{position:absolute;top:100;left:100;width:240;height:240;z-index:200;}
.i2c{position:absolute;top:97;left:97;width:246;height:246;z-index:190;clip:rect(3,243,243,3);}
.i3c{position:absolute;top:94;left:94;width:252;height:252;z-index:180;clip:rect(6,246,246,6);}
.i4c{position:absolute;top:91;left:91;width:258;height:258;z-index:170;clip:rect(9,249,249,9);}
.i5c{position:absolute;top:88;left:88;width:264;height:264;z-index:160;clip:rect(12,252,252,12);}
.i6c{position:absolute;top:85;left:85;width:270;height:270;z-index:150;clip:rect(15,255,255,15);}
.i7c{position:absolute;top:82;left:82;width:276;height:276;z-index:140;clip:rect(18,258,258,18);}
.i8c{position:absolute;top:79;left:79;width:282;height:282;z-index:130;clip:rect(21,261,261,21);}
.i9c{position:absolute;top:76;left:76;width:288;height:288;z-index:120;clip:rect(24,264,264,24);}
.i10c{position:absolute;top:73;left:73;width:294;height:294;z-index:110;clip:rect(27,267,267,27);}
.i11c{position:absolute;top:70;left:70;width:300;height:300;z-index:100;clip:rect(30,270,270,30);}
.i12c{position:absolute;top:67;left:67;width:306;height:306;z-index:90;clip:rect(33,273,273,33);}
.i13c{position:absolute;top:64;left:64;width:312;height:312;z-index:80;clip:rect(36,276,276,36);}
.i14c{position:absolute;top:61;left:61;width:318;height:318;z-index:70;clip:rect(39,279,279,39);}
.i15c{position:absolute;top:58;left:58;width:324;height:324;z-index:60;clip:rect(42,282,282,42);}
.i16c{position:absolute;top:55;left:55;width:330;height:330;z-index:50;clip:rect(45,285,285,45);}
.i17c{position:absolute;top:52;left:52;width:336;height:336;z-index:40;clip:rect(48,288,288,48);}
.i18c{position:absolute;top:49;left:49;width:342;height:342;z-index:30;clip:rect(51,291,291,51);}
.i19c{position:absolute;top:46;left:46;width:348;height:348;z-index:20;clip:rect(54,294,294,54);}
.i20c{position:absolute;top:43;left:43;width:354;height:354;z-index:10;clip:rect(57,297,297,57);}
</STYLE>

Body Code:

<DIV ID="ctrl" CLASS="ctrlclass">
<IMG BORDER="1" SRC="http://www.js-examples.com/images/red_ball0.gif" WIDTH="30" HEIGHT="240" USEMAP="#zoom"></DIV>
<MAP NAME="zoom">
<AREA COORDS="0, 0,30,12"   A HREF="#" ONMOUSEOVER="fix(20)">
<AREA COORDS="0,12,30,24"   A HREF="#" ONMOUSEOVER="fix(19)">
<AREA COORDS="0,24,30,36"   A HREF="#" ONMOUSEOVER="fix(18)">
<AREA COORDS="0,36,30,48"   A HREF="#" ONMOUSEOVER="fix(17)">
<AREA COORDS="0,48,30,60"   A HREF="#" ONMOUSEOVER="fix(16)">
<AREA COORDS="0,60,30,72"   A HREF="#" ONMOUSEOVER="fix(15)">
<AREA COORDS="0,72,30,84"   A HREF="#" ONMOUSEOVER="fix(14)">
<AREA COORDS="0,84,30,96"   A HREF="#" ONMOUSEOVER="fix(13)">
<AREA COORDS="0,96,30,108"  A HREF="#" ONMOUSEOVER="fix(12)">
<AREA COORDS="0,108,30,120" A HREF="#" ONMOUSEOVER="fix(11)">
<AREA COORDS="0,120,30,132" A HREF="#" ONMOUSEOVER="fix(10)">
<AREA COORDS="0,132,30,144" A HREF="#" ONMOUSEOVER="fix(9)">
<AREA COORDS="0,144,30,156" A HREF="#" ONMOUSEOVER="fix(8)">
<AREA COORDS="0,156,30,168" A HREF="#" ONMOUSEOVER="fix(7)">
<AREA COORDS="0,168,30,180" A HREF="#" ONMOUSEOVER="fix(6)">
<AREA COORDS="0,180,30,192" A HREF="#" ONMOUSEOVER="fix(5)">
<AREA COORDS="0,192,30,204" A HREF="#" ONMOUSEOVER="fix(4)">
<AREA COORDS="0,204,30,216" A HREF="#" ONMOUSEOVER="fix(3)">
<AREA COORDS="0,216,30,228" A HREF="#" ONMOUSEOVER="fix(2)">
<AREA COORDS="0,228,30,240" A HREF="c" ONMOUSEOVER="fix(1)">
</MAP>
<DIV ID="i20" CLASS="i20c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="354" HEIGHT="354"></DIV>
<DIV ID="i19" CLASS="i19c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="348" HEIGHT="348"></DIV>
<DIV ID="i18" CLASS="i18c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="342" HEIGHT="342"></DIV>
<DIV ID="i17" CLASS="i17c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="336" HEIGHT="336"></DIV>
<DIV ID="i16" CLASS="i16c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="330" HEIGHT="330"></DIV>
<DIV ID="i15" CLASS="i15c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="324" HEIGHT="324"></DIV>
<DIV ID="i14" CLASS="i14c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="318" HEIGHT="318"></DIV>
<DIV ID="i13" CLASS="i13c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="312" HEIGHT="312"></DIV>
<DIV ID="i12" CLASS="i12c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="306" HEIGHT="306"></DIV>
<DIV ID="i11" CLASS="i11c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="300" HEIGHT="300"></DIV>
<DIV ID="i10" CLASS="i10c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="294" HEIGHT="294"></DIV>
<DIV ID="i9" CLASS="i9c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="288" HEIGHT="288"></DIV>
<DIV ID="i8" CLASS="i8c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="282" HEIGHT="282"></DIV>
<DIV ID="i7" CLASS="i7c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="276" HEIGHT="276"></DIV>
<DIV ID="i6" CLASS="i6c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="270" HEIGHT="270"></DIV>
<DIV ID="i5" CLASS="i5c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="264" HEIGHT="264"></DIV>
<DIV ID="i4" CLASS="i4c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="258" HEIGHT="258"></DIV>
<DIV ID="i3" CLASS="i3c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="252" HEIGHT="252"></DIV>
<DIV ID="i2" CLASS="i2c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="246" HEIGHT="246"></DIV>
<DIV ID="i1" CLASS="i1c"><IMG SRC="http://www.js-examples.com/images/blue_ball0.gif" WIDTH="240" HEIGHT="240"></DIV>

Times Viewed: 4

Leave a Reply

Your email address will not be published. Required fields are marked *