网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑? 在网页设计中怎样编写代码实现当鼠标移动到一张小图片上,变成大...

作者&投稿:鄘穆 (若有异议请与网页底部的电邮联系)

使用纯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浏览器里不好使?其他的浏览器都没问题

大神,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如何实现鼠标移至图片上显示遮罩层及文字
答:透明度可以通过修改后面的0.7号来改变。1是完全不透明的,0是完全透明的。4.然后添加用于鼠标移动的脚本代码来显示蒙版层。这段js代码是用jquery编写的,既方便又简单,所以我们首先介绍jquery脚本库。5.添加mouseover和mouseout事件,主要是当鼠标移动到图像容器上时显示蒙版层,当鼠标移出时隐藏蒙版层。6...

淘宝HTML图片自动切换有123那些的就是鼠标移到到1就切换到第一次图...
答:<DIV id=text2></DIV> 第二步:把中的内容改为: over feboy 第二种:第一步、把下面这段代码插入到页面的与之间: isns = navigator.appName == "Netscape";function ztstr(id,picurl,linkurl){ this.id=id this.picurl=picurl this.linkurl=linkurl } zhuanti=new Array()imgcount=1...

如何在html中实现鼠标经过另一张图片时显示它
答:2、在index.html中的script>标签中,输入js代码:$('a').hover(function(){$('img').css('display','block');})3、浏览器运行index.html页面,此时鼠标移动到超链接上,下面的图片自动显示了出来。csshover用法?在css中hover用于选择鼠标指针浮动在上面的元素,语法“标签选择器:hover{样式代码;...

在html5页面中,一个div或者图片,鼠标移动上去的时候变大,移出的时候又...
答:一:通过css样式中的 ":hover"实现,代码如下 <!DOCTYPE html>Documentdiv{background:red;width:200px;height:200px;}div:hover{background:red;width:500px;height:500px;}变大二:通过javascript方式实现,代码如下 <!DOCTYPE html>Documentdiv{background:red;width:200px;height:200px;}.divs{bac...

在html页面中制作一个图像想要在鼠标指向这个图像时浮出一条提示信息...
答:可以使用图片自带title属性,设置提示信息!优点:简单,快捷。缺点:提示信息样式单一,而且不明显。如代码:利用鼠标事件onmouseover,利用js,控制鼠标移入时候,上方会出现自己用CSS样式写出的想要表达的提示信息。优点:提示信息样式可以自己定义,个性化。缺点:比较复杂,需要web前端开发人员来做。没有html...

在flash中,如何制作当鼠标移动到页面某个位置时,该位置出现相应的说明...
答:在那个地方加一个透明按钮,当鼠标移到该按钮上时则显示一个影片剪辑(影片剪辑里是文字)。按钮动作为:on(rollOver){ mc1._visible=1;//mc1为影片剪辑的实例名 } on(rollOut){ mc1._visible=0;}

js css 鼠标移入某个区域滑出一个框的效果怎么做?
答:doctype html>鼠标移入显示文本#body1{width:960px; height:auto; margin:20px auto 0px auto}#body1 ul{}#body1 li{float:left; width:239px; text-align:center; height:318px; position:relative}#body1 img{ position:absolute; top:0px; left:5px}#body1 span{display:block; position...

网页上鼠标移到图片上图片就放大的效果 要如何实现
答:用js,先是一个小图片(缩略图),onMouseOver时触发js写的Function,当然Function中是处理方法。这只是简单思路,至于怎么写网上有很多类似的代码可以供你copy了,自己找找。

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现...
答:1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:2、添加“onmouseover”js事件,首先使用“document.getElementById”获取到图片标签,然后定义鼠标移动到图片上时发生的事件,这时图片将会放大:3、添加“onmouseout”js事件,首先获取图片标签,然后...

怎样自动生成连续页码
答:佳佳通信小知识 2023-11-23 · TA获得超过253个赞 关注 1、打开需要插入页码。2、菜单栏的“布局”,点击“分隔符”。3、点击分节符下面的“下一页”。4、点击“插入”“页码”。5、“页面底端”中“普通数字2”。6、将鼠标移到“链接到前一节”。7、点击“页码”;再点击“设置页码格式”。8、“页码...