首先为大家简单介绍一下这两种方法的工作原理，SVG是在XML中描述二维图形，所以在SVG DOM中的每一个元素都是可用的，你可以为每一个元素增加JS事件处理器。而Canvas是在fly上绘画2D图形，也是使用JS事件处理器，它的绘画能够按照像素重新生成。除此之外，在SVG中，每个图形都会被标记，只要SVG对象属性发生改变，浏览器就会自动重新生成相对应的新图像了，而在Canvas中，一旦图形完成，就会被遗忘，不会被标记，更不用说根据目标对象属性的改变而重新生成新图像了。
第二点，SVG和Canvas的一些其他区别。首先在分辨率上，Canvas是非常依赖图形的分辨率的，这也就限制了我们对于图形的选择，导致大家的实际操作出现很多的麻烦和困难，而SVG对于分辨率就不是那么依赖了，对于图形的选择更加自由。其次，SVG还能支持事件处理器，相对于不能支持事件处理器的Canvas来说，也是十分方便的。最后，在应用方面，由于SVG复杂高度的渲染能力使得它适合带有大型渲染区域的应用程序，例如谷歌地图，而Canvas它的文本渲染能力很弱，渲染速度快，最适合图像密集型的游戏。
你好 这种效果很简单的 采用jquery 然后 假设 另一张图片名叫 a.gif 并且和 depart_info_close.gif存放在同一个文件夹下给a标签新加一个属性 id="a" 然后按照你提供的 html结构 代码如下$(function(){
$("#a").click(function(){
$(this).prev().attr({"src":"a.gif"})
})
})
这样子就好了
代码的意思是 当点击a标签时 寻找与他同级的 并且在他之前的那一个元素 也就是img标签
并且改变 img标签中的 src属性 为 a.gif
希望能帮到你 谢谢
可以写一个为表单内元素赋值的方法，三个按钮上面添加点击事件，点击时调用这个赋值方法，但是传的参数不一样，在方法中根据不同的参数，为表单赋不同模板的值。
不知上面是否写的清楚，我写了一个对应的小demo：
<html><head>
<title>demo</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
function demo(demo){
if(demo ==1){
$("#input1").attr("value","这是模板1")
$("#input2").attr("value",demo)
} else if(demo ==2){
$("#input1").attr("value","这是模板2")
$("#input2").attr("value",demo)
} else if(demo ==3){
$("#input1").attr("value","这是模板3")
$("#input2").attr("value",demo)
}
}
</script>
</head>
<body>
<button onclick="demo(1)">模板1</button>
<button onclick="demo(2)">模板2</button>
<button onclick="demo(3)">模板3</button>
<form>
<input id="input1" type="text"/>
<input id="input2" type="text"/>
</form>
</body>
</html>
以上，希望对你有帮助！
