How to zoom out and zoom in when mouse over a image in html

Question

4.00/5 (1 vote)

See more:

Hello sir,

i have one image, in this image there is different logos , so iam catching through pixcels but ineed when my mouse is hover on that particular pixcels image should be zoom out and when he clicks he should navigate to particular link

can you give e idea which helps me

below is the code iam using what i have to change can any body help me

<head>
<title>Main Page</title>
</head>
<body >

</body>
</html>

<script language="JavaScript">
function ShowSpinner(id)
{
if (id == 1)
{
window.location = "http://www.yahoomail.com";
}
else if (id == 2)
{
window.location = "http://www.google.com";
}
else if (id == 3)
{
window.location = "http://www.windowslive.com";
}

document.getElementById('spinner').style.display = 'block';
}
function HideSpinner() {
var state = document.getElementById('spinner').style.display;
document.getElementById('spinner').style.display = 'none';
}
</script>

Posted 15-Jan-13 23:27pm

developerit

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shanu2rick · Answer 1 · 2013-01-16T00:08:00

Many basic jQuery plugins are available if googled properly.
Here is basic javascript code for image zoom

JavaScript

function resImg(image){
        var resize = 200; // amount in percentage
        var oldheight  = 150;  // height of your image
        var oldwidth  = 250; // width of your image
        var X = event.x;
        var Y = event.y;
        var newHeight   = oldheight * (resize / 100);
        var newWidth   = oldwidth * (resize / 100);

        image.style.height = newHeight;//height of new image
        image.style.width  = newWidth;// width of new image

        var c = image.parentNode;
        
        c.scrollLeft = (X * (resize / 100)) - (newWidth / 2) / 2; //this is for 
        c.scrollTop  = (Y * (resize / 100)) - (newHeight / 2) / 2;//new center
      }

you can call this function on the onmouseover Event of the image
like this:

HTML

<img src="NewEmsC.jpg" usemap="#CheckCompany" border="0"  önmouseover="resImg(this)" style="width: 1280px; height: 984px">

Remember,
you are using area tag which shows the image by the coordinates so you have to pass the image in order to zoom.

Avishek Pat · Answer 2 · 2013-01-16T00:08:00

XML

Looking at the code, the onmouseover event calls a showtrail function from the js file here http://www.istockphoto.com/filesearchhover.js

Parameters: showtrail(imagename,title,description,ratingaverag e,ratingnumber,showthumb,height)

Example:

<script language="javascript" src="/filesearchhover.js" type="text/javascript"></script>

onmouseover="showtrail('http://www.istockphoto.com/file_thumbview_approve/64097/2/istockphoto_64097_dirty_metal_grate.jpg','Dirty metal grate','Dirty metal grate','3.0000','0','1',203);"

onmouseout="hidetrail();"

That might work, give it try...

:)

How to zoom out and zoom in when mouse over a image in html

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0