网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑?
准备切换图片素材,一般是两张,如图,放入img文件夹,跟html同级。然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。如图,获取img,转成JS对象,加个[0]就可以转js对象了。
如果你说的在“鼠标旁边就会弹出另一张图片”是说在固定位置的话,那你用DW的“层”结合“行为”应该就可以实现的,在行为面板里,找onmouseover,然后改disPLAy的值,显示为block,隐藏为none。
输入代码,其中button是鼠标要滑动的地方,滑过button时,class为content的内容就要显示出来,鼠标滑出去的时候,这块内容就需要重新隐藏起来。把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。
需要用到js脚本的onmouSEOver和onmouseout等。这是非常简单的。但是如果你不了解js可以使用DreamWeaver中的一项功能:插入--图像对象--鼠标经过图像,在弹出的对话框中,选择好“原始图像”和“鼠标经过图像”就行了。
PtInRect(point)函数即可判断鼠标是否在图片上,至于图片上的具体位置,就需要你通过CRect或者CRgn来一一记录了(这并不太容易),之后依然是通过PtInRect和CRgn的PtInRegion来判断是否在区域(这需要一个循环语句)。至于显示另一个图片,通过CBitmap导入资源后,就是图片控件的SetBitmap就可以了。
打开HTML编辑器,新建html文件,例如:index.html,输入问题基础代码。在index.html中的标签中,弯历输入js代码。浏览器运行index.html页面,此时鼠标移动到超链接上,下面的图片自动显示了出来。
本文来自作者[金生]投稿,不代表域帮网立场,如若转载,请注明出处:http://www.yubangwang.com/2224.html
评论列表(4条)
我是域帮网的签约作者“金生”!
希望本篇文章《117源码怎么算? 127的源码怎么来的?》能对你有所帮助!
本站[域帮网]内容主要涵盖:鱼泽号
本文概览:网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑?准备切换图片素材,一般是两张,如图,放入img文件夹,跟html同级。...