鼠标移动到图片上切换到另一张图片,移出时又切回来

HTML写法:

<img id="addLineImg" src="pages/annotator/claim/img/plus.png"
                             onmouseover="this.src=‘pages/annotator/claim/img/plus2.png‘;"
                             onmouseout="this.src=‘pages/annotator/claim/img/plus.png‘;"/>

JS写法:

    var img=document.createElement("img");
    img.setAttribute("src","pages/annottor/claim/img/trash.png");
    img.setAttribute("onclick","removeOneWorkitemLine(this);");
    img.setAttribute("onmouseover","this.src=\"pages/annottor/claim/img/trash2.png\";");
    img.setAttribute("onmouseout","this.src=\"pages/annottor/claim/img/trash.png\";");
时间: 2024-10-23 07:27:34

鼠标移动到图片上切换到另一张图片,移出时又切回来的相关文章

鼠标移动到图片上时,显示大图片

HTML标签中的一部分,仅供参考 <tr> <td><input type="checkbox" class="checkbox1"/></td> <td>1002</td> <td>小猫咪</td> <td><img src="img/02.jpg" height="100" width="100&qu

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 效果如下图所示: 1.当未鼠标未放到图片上的效果: 2.当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可

基于jquery鼠标点击图片翻开切换效果

基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <img src="images/1.jpeg" alt="1" /> <img src="images/2.jpeg" alt="2" /> <img s

纵向文字滚动代码,带上下图片控制的。鼠标放到上下图片上时滚动

<style type="text/css"> #swsh .swsh_body{height:352px;overflow:hidden;}</style></p> <div id="swsh"> <script language="javascript"> var UDMoveflag=true function scrollStart(object,offset){ object.

鼠标移动到图片上图片逐渐变大、变清晰(带有过渡效果)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标移动到图片上图片逐渐变大.变清晰(带有过渡效果)</title> <style type="text/css"> div{ width: 300px; height: 300px; margin: 50px auto; overflow: hidden; fil

鼠标移动到图片上,显示相关信息

在网页上总是看到这样的效果:将鼠标放到一个小格子里,小格子变暗,同时显示出来一些文字.一直比较好奇,今天我也简单的实现了一下,如果有不对或者更好的方法,请指教. 总体思路是,构建一个新的div,用来覆盖图片并显示字,鼠标移动到img上时即可显示div,移出img时div会消失. 1.构建基本页面: <div id="ten_model"> <ul id="little_imgs"> <li id="li1">&

把鼠标移动到图片上图片就会放大显示

<html><head><script type="text/javascript">function moveover(){document.getElementById('image').width="200"document.getElementById('image').height="360"}function moveback(){document.getElementById('image').w

Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等

仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 微信 下载地址 : 微信上传图片源码 很多网友不知道怎么获取图片路径,这里贴出来: String path = Bimp.tempSelectBitmap.get(position).getImagePath(); //部分代码如下 [java] view plain copy package co

Android图片上传,可以选择多张图片,缩放预览,拍照上传等

仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 微信 下载地址 : 微信上传图片源码 //部分代码如下 [java] view plaincopy package com.king.photo.activity; import android.annotation.SuppressLint; import android.app.Activity