Zooming to a larger picture

Hi folks,

        I have a web page that has images and  I want to enlarge the image if their mouse hovers over the image. I found some code examples but can not seem to get them to work. At the sametime, I need to disabled right-click which is working find. But I am wondering if that coding (right click disabled) is causing the problem with the mousehover action?
Below is snippets of coding.
Any help is appericated...
css coding in seperate css file
.zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:300px;
height:225px;
}
.zoom img:hover {
width:400px;
height:300px;
}

++++++ Script to disable right click  In ASPX page++++++++
<head runat="server">
    <title>Galley</title>
<link href="/Styles/site.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#000000">
<script language="JavaScript" type="text/javascript">
    var message = "You do not have permission to copy these images";
    function click(e)
     {
        if (document.all)
           {
            if (event.button == 2 || event.button == 3) {
                alert(message);
                return false;
            }
        }
        if (document.layers)
            {
                if (e.which == 3)
                  {
                alert(message);
                return false;
            }
        }
    }
    if (document.layers) {
        document.captureEvents(Event.MOUSEDOWN);
       
    }
    document.onmousedown = click;
</script>
+++++++++++ Snippet of coding using the class of zoom +++++++++++++++++++
<table width="650px" align="center" >
            <tr>
                <td align="center">
                <div class="zoom">              
                   <img alt="" src="ImagesJpg/site26.jpg" />
                   </div>
                    <asp:HiddenField ID="hdfld1"  Value="ImagesJpg/site26.jpg" runat="server" />
                   
                </td >
OverthereAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pateljituCommented:
Please try adding this line of code and replace existing DOCTYPE from the document with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Article:
http://www.w3schools.com/css/css_boxmodel.asp
0
OverthereAuthor Commented:
that didn't work.. and the examle isn't what I am looking for... any other ideas?
0
Kyle HamiltonData ScientistCommented:
Your JS doesn't work in my environment.

Here's a simple jquery solution. It needs refinement, but it's a starting point.

 
<!DOCTYPE html>
<html>
    <head runat="server">
        <title>Galley</title>

        <style>
            .zoom {
                height:400px;
                margin:auto;
            }
            .zoom p {
                text-align:center;
            }
            .zoom img {
                width:300px;
                height:225px;
            }
            .zoom img:hover {
                width:400px;
                height:300px;
            }
            .message{
                position:absolute;
                width:200px;
                height:200px;
                top:50px;
                left:50%;
                color:white;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script>
            var message = "You do not have permission to copy these images";
            $(function() {
                $("img").bind("contextmenu", function(e) {
                    e.preventDefault();
                    $(this).parent().append("<span class='message'>"+message+"</span>"); 
                });
                $("img").mouseleave(function(){
                    $(".message").hide();
                });
                });
        </script>
    </head>
    <body bgcolor="#000000">
        
        <table width="650px" align="center" >
            <tr>
                <td align="center">
                    <div class="zoom">               
                        <img alt="" src="ImagesJpg/site26.jpg" />
                    </div>
            <asp:HiddenField ID="hdfld1"  Value="ImagesJpg/site26.jpg" runat="server" />

        </td >
    </tr>
</table>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

pateljituCommented:
The code works fine both right-click and zoom inage, what browser are you testing this code?
0
OverthereAuthor Commented:
Internet Explorer v9...Windows 7
0
pateljituCommented:
That is the same configuration I am using. Could you please describe which scenario is not working.

Have used the same code as you provided and that works, is there more to your code than posted and if that is the case please post compete code OR create the page with minimum code required for testing and try.

Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.