鼠标移动到图片上图片会变的html代码的简单介绍

HTMLltdivltimg src=quotpicturepicture301jpgquot width=quot100quot ltdivJuotdivquothoverfunction$thisfindquotimgquotattrquotsrcquot，quotpicturepicture302jpgquot，function$thisfindquotimgquot。

需要用到js脚本的onmouseover和onmouseout等这是非常简单的但是如果你不了解js可以使用DreamWeaver中的一项功能插入图像对象鼠标经过图像，在弹出的对话框中，选择好“原始图像”和“鼠标经过图像”就行了。

1准备切换图片素材，一般是两张，如图，放入img文件夹，跟HTML同级2然后用img嵌入到网页，嵌入其中的一张，另外一张待会切换3如图，现在是静态的，鼠标放上去也不会产生切换反应，因为没有用JS4如图，获取。

ltdiv style=quotcursorhandquot onmouseover=quottheimgsrc=#39bjpg#39quot onmouseout=quottheimgsrc=#39ajpg#39quot ltimg id=quottheimgquot src=quotajpgquot ltdiv 其实如果只是一个图片，没有必要做成div，直接这样写就行了ltimg。

许多网站都是用FLASH来做的这个效果，当然可以用HTML来实现，核心就是利用onMouseOver事件来实现，例如ltimg src=图片地址 id=img1 ltspan onMouseOver=quotimg1src=#39图片地址1#39quot1ltspan 方框和外观那些，可以用DIV。

把下面的代码另存为html，做两张图，一张带阴影的1jpg，一张不带2jpg放到同目录下即可 ltscript function change documentgetElementByIdquotimg1quotsrc = documentgetElementByIdquotimg1quotsrc == quot2。

用onmouseout，浏览器不支持JS等于做无用功再说，人家问的是图片颜色，不是表格给你个思路，图片上面加个层，鼠标移动到层上变色。

晕死这是什么呀css也不是，js也不是这都什么都例如function onmouseover1obj objsrc = quotxxxxxxxquot然后设置ltinput onmouseover=quotonmouseover1thisquot 这样逐个设置才可以达到你所谓的效果。

如果要每个单元格模块不同背景的话，可以再定义几个背景图片样式，然后给td调用所有代码如下，已帮你修改测试成功lthtmlltheadlttitleindex_05_01lttitleltmeta。

第一步把下面这段代码插入到页面的lthead与lthead之间ltscript language=javascript isns = navigatorappName == quotNetscapequotfunction ztstrid，picurl，linkurl thisid=id thispicurl=picurl。

html不可以哦，这是JS效果鼠标事件，网上很多这种效果的。

分别写一个onmouseover和onmouseout事件然后在事件里面加一个function，分别写想要放大的尺寸和缩小或复原的尺寸具体代码实现如下ltimg id=quotimgquot onmouseover=quotbiggerquot onmouseout=quotsmallerquot src=quot你的图片路径quot style。

给每张图片外面加一个a标签，例如lta href=quot链接的地址quotltimg src=quot19U86P4T8D4F107DT06jpgquot width=200 height=233lta。

ltimg src=quotXXXquot style=quotcursorhandquot 这样图片移上去就有了手的图标 如果不想改动img的属性，可以在外围包一层DIV，这个做法就更万金油了ltdiv style=quotcursorhandquotltimg XXX ltdiv。

鼠标移动到盒子内变绿，移出变蓝ltpltp如果想让图片变色，可以把图片做成具有一定透明度的图片，改变背景颜色ltpltdivltscript type=quottextjavascriptquotfunction ToReddocumentgetElementById#39image#39style。