网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑?

作者&投稿:冉虹 (若有异议请与网页底部的电邮联系)
大神,HTML网页编程的鼠标放到图片上,有另一个图片出来,代码是多少~

大体思路:
'定义一个放大图层


'实际显示图部分




'鼠标经过时触发的事件处理
showbigpic(id)
{
var infoDiv = document.getElementById('otherlayer');
if(idx==1){
document.getElementsByName("'enlargedpic'")[0].src = pic;
infoDiv.style.visibility = "visible";
} else{
infoDiv.style.visibility = "hidden";
}
}

用js吧,懒人图库上有很多这类的

使用纯CSS即可实现全部效果,代码也很简单。

原理:hover触发CSS临近选择器

所需工具:DW(用来给图片画热区),PS(算出弹出层的top和left偏移值)

我在Demo里画了三个热区(位置如下图),你用鼠标悬停到上面即可看到效果。


源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片热区hover效果</title>
    <style>
.main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} /* 宽度与高度必须与背景大图一致 */
.bigImg {position: absolute; display: none; border: 1px solid #ccc;}
.img1 {top: 199px; left: 153px;}
.img2 {top: 369px; left: 552px;}
.img3 {top: 411px; left: 632px;}
.hotspot:hover + .bigImg {display: block;}
</style>
</head>
<body>
<div class="main-wrap">
     <img src="bg.jpg" usemap="#Map">
        <map name="Map">

          <area class="hotspot" shape="rect" coords="152,117,232,190" href="#">
          <img class="bigImg img1" src="cpu.png">

          <area class="hotspot" shape="rect" coords="553,313,605,355" href="#">
          <img class="bigImg img2" src="drive.png">

          <area class="hotspot" shape="rect" coords="635,353,695,397" href="#">
          <img class="bigImg img3" src="printer.png">

        </map>
</div>
</body>
</html>




使用纯css即可实现全部效果,代码也很简单。
原理:hover触发css临近选择器
所需工具:dw(用来给图片画热区),ps(算出弹出层的top和left偏移值)
我在Demo里画了三个热区(位置如下图),你用鼠标悬停到上面即可看到效果。

我觉光css就完全可以写了

需要JavaScript的配合。。。

为什么在IE浏览器里不好使?其他的浏览器都没问题


网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑?
}.img1 {top: 199px; left: 153px;}.img2 {top: 369px; left: 552px;}.img3 {top: 411px; left: 632px;}.hotspot:hover + .bigImg {display: block;}

急求html代码,当鼠标移动到图片,图片停此滚动?
if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=0)butong_net_top.scrollTop-=butong_net_top1.offsetHeight \/\/butong_net_top跳到最顶端 else{ butong_net_top.scrollTop++;} } var MyMar1=setInterval(Marquee1,speed)\/\/设置定时器 \/\/鼠标移上时清除定时器达到滚动停止的目的...

如何通过网页源代码来提取网页中的图片?
1、右击想要提取的图片,在展开的菜单中点击“检查”按钮打开控制台:2、这时控制台中会跳转到图片的源码位置,将鼠标放在链接上可以查看图片的缩略图,这时右击图片链接,点击“Open in new tab”按钮将图片在新窗口打开:3、图片在新窗口打开后,右击被打开的图片,在展开的菜单中点击“图片另存为......

HTML代码移动鼠标到图片会变化是怎么做的?
移上去的图片叫hover.jpg 两个图片大小一样 改写成 再在css中添加 example{ background:url('example.jpg') no-repeat; display:block; width:100px; height:100px;} example:hover{ background:url('hover.jpg') no-repeat; }

在网页中,凡是将鼠标移到表示链接的文字或图形时,鼠标指针的形状会变...
分几种常见情况:1、就是楼上说的,小爪子,漏根食指,表示链接,当然,是在您指针方案用的默认的情况下;2、现在不少网页则是改成了将链接明显化,比如加上下划线、改变颜色、字体更大等等,这时候指针不变。

鼠标滑动到第一张图片是其他位置同时出现另一张图片的网页代码怎么写...
使用js或css都可以,js里使用onmouseover控制另一张图片的display由none变为block,css使用hover控制display

DW制作网页,下面代码如何修改才能使鼠标放在滚动图片上时就停止滚动...
onmouseover="this.stop()指的是当你的鼠标移到你定义好的对象时.该对象会停止当前的动作。onmouseout="this.start()指的是当你的鼠标移开你定义好的对象时,该对象会重新刚才的动作。代码如下,可以实现你说的当鼠标房子图片上停止滚动的效果。<marquee onMouseOver="this.stop()" onMouseOut="this....

...生成以后 把鼠标移动到图片上 有一种选中的效
首先要把需要的图片都事先放在网页上(一般放在一个div里)。然后用css隐藏第一个以外的图片,然后给第一张图片设置一个鼠标移入事件,当鼠标移动到图片上的时候,第一张图片隐藏,第二张图片显示。这样图片就改变了。另外还可以加入一个鼠标移出事件,让鼠标移出后2个图片的样式恢复最开始的样子。

【求助】网页中“鼠标一放到数字上就显示相应的图”叫做什么?球代码
这个很容易做,下面是我写出的代码,其中双引号里面替换你自己的图片路径就可以了替换成你自己的就可以了 <!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"> 无标题文档 <!-- .STYLE1 {color: #FF0000}...

VBA中鼠标移到图片出现,鼠标移出图片消失的代码怎么写
窗体名_MouseMove 不显示TEXT1的代码 image1_MouseMove 鼠标在图片上的显示代码

灵川县17871752595: 求鼠标移动上去就显示一张跟在鼠标的图片JS代码
羿亭润肺: &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;&lt;title&gt;网页特效|JsCode.cn|---跟随鼠标的图片&lt;/title&gt;&lt;script LANGUAGE="JavaScript"&gt;var newtop=0var newleft=0if (...

灵川县17871752595: 在我做的一个网页里面,我想把一张超连接的图片让鼠标移到那里会动在CSS里面怎么做啊
羿亭润肺: 使用伪类 :hover 演示代码为: ttps://wenwen.sogou.com/login/redirect?url=http%3A%2F%2Fwww.w3.org%2FTR%2Fxhtml1%2FDTD%2Fxhtml1-transitional.dtd%22%3E" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....

灵川县17871752595: 求鼠标移动上去就显示一张跟在鼠标的图片JS代码 -
羿亭润肺: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页特效|JsCode.cn|---跟随鼠标的图片</title><script LANGUAGE="JavaScript"> var newtop=0 var newleft=0 if (navigator.appName == "...

灵川县17871752595: 急求html代码,当鼠标移动到图片,图片停此滚动? -
羿亭润肺: 下面的图片滚动代码仅用于html网页中,分别可以向上向下向左向右的滚动!把下面此代码插入html网页的<body>< /body>中就可以了!<!--下面是向上滚动代码--><div id=butong_net_top style=overflow:hidden;height:100;width:90;> <div id=...

灵川县17871752595: 如何用PHP或HTML实现鼠标放到某张图片,自动在下方生成对话框,里面包含表单信息 并且能传递到数据库 -
羿亭润肺: 需要写js 捕捉事件 mouseover的时候就是鼠标放上去的时候 然后构建一个表单的html代码 显示在下面就行了 里面加Css控制位置就行 然后提交表单可以是在这个表单直接提交 或者用ajax提交

灵川县17871752595: web开发,html,js,css,鼠标放在某张图片上,自动更换图片 -
羿亭润肺: function showA(obj) { obj.src="a.gif"; } function showB(obj) { obj.src="b.gif" }鼠标放图片上执行 onmouseover事件 鼠标移出执行onmouseout事件

灵川县17871752595: 如何做到鼠标经过网页上的一张图片时,自动跳转到另一个网页? -
羿亭润肺: <!--function MM_goToURL() { //v3.0 var i, args=MM_goToU...

灵川县17871752595: 网页怎么实现图片跟随鼠标移动 -
羿亭润肺: 下面是实现“图片跟随鼠标移动”效果的代码,实现随着鼠标移动的效果. <html> <head> <script language="JavaScript"> var newtop=0 var newleft=0 if (navigator.appName == "Netscape") { layerStyleRef="layer."; layerRef="document....

灵川县17871752595: 网页制作鼠标移动触发事件onmouseover -
羿亭润肺: 给图片或者元素加个ID,比如ID为element,并且该元素为定位元素,即有position属性.var oElement = document.getElementById('element'); //获取该元素.var iTop = oElement.offsetTop; //获取元素的TOP值.var iNum = 5; //图片移动的距离 oElement.onmouseover = function (){ this.style.top = iTop + iNum; //如果上移,只需把加号改为减号即可.} 不懂?下面追问.

灵川县17871752595: 求一个,鼠标放在图片上自动切换图片的css代码. -
羿亭润肺: 用伪类 比如 #id{background:url(xxx.jpg)} #id:hover{background:url(aaa.jpg)} 这样只能切换两张图 如果要切换多张就要用js

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网