?
Solved

Zooming to a larger picture

Posted on 2011-10-18
6
Medium Priority
?
352 Views
Last Modified: 2012-05-12
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 >
0
Comment
Question by:Overthere
  • 3
  • 2
6 Comments
 
LVL 15

Expert Comment

by:pateljitu
ID: 36988972
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
 

Author Comment

by:Overthere
ID: 36997711
that didn't work.. and the examle isn't what I am looking for... any other ideas?
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 37000067
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 15

Expert Comment

by:pateljitu
ID: 37001795
The code works fine both right-click and zoom inage, what browser are you testing this code?
0
 

Author Comment

by:Overthere
ID: 37004202
Internet Explorer v9...Windows 7
0
 
LVL 15

Expert Comment

by:pateljitu
ID: 37007409
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question