如何在html中鼠标悬停在图像上时缩小和放大 [英] How to zoom out and zoom in when mouse over a image in html
问题描述
你好先生，
i有一张图片，在这张图片中有不同的徽标，所以当我的鼠标悬停在那个特定的pixcels上时，我会捕捉到pixcels图像应该缩小，当他点击时他应该导航到特定的链接
你能给我一个想法吗哪个帮我
以下代码iam使用我必须改变的任何身体可以帮助我
< head>
< title>主页< / title>
< / head>
< body>
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.jpgusemap =＃CheckCompanyborder =0
style =width：1280px; height： 984px>
< map name =Branches>
< area shape =rectcoords =1026 ，10,1263,346id =1
$ b $bönclick=ShowSpinner（this.id）; return（false）; href =＃border =0>
< area shape =rectcoords =770,9,1009,345id =2
$ b $bönclick=ShowSpinner（this.id）; return（false）; href =＃>
< area shape =rectcoords =517,10,754,343id =3
$ b $bönclick=ShowSpinner（这。 id）; return（false）; href =＃>
< / map>
<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>
< img src =bluespinner.gifborder =0/>
<img src="bluespinner.gif" border="0" />
< / body>
< ; / html>
< script language =JavaScript>
函数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;
}
< br $>
document.getElementById（''spinner''）。style.display =''block'';
}
函数HideSpinner（）{
var state = document.getElementById（''spinner''）。style.display;
document.getEl ementById（''spinner''）。style.display =''none'';
}
< / script>
</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>
推荐答案
如果正确搜索，可以使用许多基本的jQuery插件。
这是图像缩放的基本javascript代码
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
}
你可以在图片的onmouseover事件上调用这个函数
像这样：
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.
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...
：）
:)
这篇关于如何在html中鼠标悬停在图像上时缩小和放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
