Click here to Skip to main content
11,484,752 members (60,235 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML
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 >
<img src="NewEmsC.jpg" usemap="#CheckCompany" border="0"
style="width: 1280px; height: 984px">
<map name="Branches">

<area shape="rect" coords="1026,10,1263,346" id="1"
önclick="ShowSpinner(this.id); return(false);" href="#" border="0">
<area shape="rect" coords="770,9,1009,345" id="2"
önclick="ShowSpinner(this.id); return(false);" href="#">
<area shape="rect" coords="517,10,754,343" id="3"
önclick="ShowSpinner(this.id); return(false);" href="#">


</map>



</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 16-Jan-13 0:27am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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

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:
<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.
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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...

Smile | :)
  Permalink  

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

  Print Answers RSS
0 Maciej Los 190
1 Sergey Alexandrovich Kryukov 180
2 Raje_ 155
3 OriginalGriff 147
4 Mehdi Gholam 120
0 Sergey Alexandrovich Kryukov 8,494
1 OriginalGriff 7,948
2 Sascha Lefèvre 3,199
3 Maciej Los 2,681
4 Richard Deeming 2,370


Advertise | Privacy | Mobile
Web04 | 2.8.150520.1 | Last Updated 16 Jan 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100