locked
image mirror RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1367540698 posted
    i want to make a mirror of an image but in zooming effect. i mean to say that there should be two parts. In one part picture is displayed full but in short size. when mouse is scrolling over that image then that part should be displayed in 2nd part but in zooming effect. how it should be ?
    Sunday, April 26, 2009 4:09 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1659704165 posted

     
    http://www.mind-projects.it/jqzoom_v10

    http://www.cssplay.co.uk/menu/image_magnifier.html

    http://www.jankoatwarpspeed.com/post/2009/04/06/Add-zoom-icon-to-images-using-CSS-and-jQuery.aspx

     

    Tpuse above sample Just Save as the page

    or U can Use the follwing Code


    /**********************ZOOM EFFECT****/


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css">
    body {
        background-color:#000;
     }
    #pic{
        width:16px;
        height:12px;
        ;
        top:50%;
        left:50%;
        margin-left:-8px;
        margin-top:-6px;
        border:3px double #fff;
     }
    </style>

    <script type="text/javascript">
       var c=16;
       var obj;
       var zoom;
    window.onload=function() {
       obj=document.getElementById('pic')
       obj.onmouseover=function() {
       zoooom();
     }
       obj.onmouseout=function() {
       clearTimeout(zoom);
       c=16;
       obj.style.marginLeft=-c/2+'px';
       obj.style.marginTop=-3*c/8+'px';
       obj.style.width=c+'px';
       obj.style.height=3*c/4+'px';
      }
     }
    function zoooom() {
    if(c>800) {
       return;
     }
       obj.style.marginLeft=-c/2+'px';
       obj.style.marginTop=-3*c/8+'px';
       obj.style.width=c+'px';
       obj.style.height=3*c/4+'px';
       c+=4;
       zoom=setTimeout('zoooom()',25);
     }
    </script>

    </head>
    <body>

    <div>
    <img id="pic" src="shoe1_small.jpg" alt=""/>
    </div>

    </body>
    </html>

    /*************************************/
    Hope It helps

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 27, 2009 1:23 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1659704165 posted

     
    http://www.mind-projects.it/jqzoom_v10

    http://www.cssplay.co.uk/menu/image_magnifier.html

    http://www.jankoatwarpspeed.com/post/2009/04/06/Add-zoom-icon-to-images-using-CSS-and-jQuery.aspx

     

    Tpuse above sample Just Save as the page

    or U can Use the follwing Code


    /**********************ZOOM EFFECT****/


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css">
    body {
        background-color:#000;
     }
    #pic{
        width:16px;
        height:12px;
        ;
        top:50%;
        left:50%;
        margin-left:-8px;
        margin-top:-6px;
        border:3px double #fff;
     }
    </style>

    <script type="text/javascript">
       var c=16;
       var obj;
       var zoom;
    window.onload=function() {
       obj=document.getElementById('pic')
       obj.onmouseover=function() {
       zoooom();
     }
       obj.onmouseout=function() {
       clearTimeout(zoom);
       c=16;
       obj.style.marginLeft=-c/2+'px';
       obj.style.marginTop=-3*c/8+'px';
       obj.style.width=c+'px';
       obj.style.height=3*c/4+'px';
      }
     }
    function zoooom() {
    if(c>800) {
       return;
     }
       obj.style.marginLeft=-c/2+'px';
       obj.style.marginTop=-3*c/8+'px';
       obj.style.width=c+'px';
       obj.style.height=3*c/4+'px';
       c+=4;
       zoom=setTimeout('zoooom()',25);
     }
    </script>

    </head>
    <body>

    <div>
    <img id="pic" src="shoe1_small.jpg" alt=""/>
    </div>

    </body>
    </html>

    /*************************************/
    Hope It helps

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 27, 2009 1:23 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1367540698 posted
    thanks dear my requirements is this http://www.mind-projects.it/projects/jqzoom/ thank you so much.
    Monday, April 27, 2009 3:14 AM