如何更新图片源

Question

我正在使用 Raphaël Javascript 库（顺便说一下，这是一个非常棒的 SVG 渲染库），并且目前正在尝试在鼠标悬停时更新图像的源代码。

问题是我找不到任何相关的内容（考虑到我已经阅读了 Raphaël 的大部分源代码，而没有找到任何相关的内容，可能根本就不可能）。

有人知道如何做到这一点吗？ 也许可以不直接使用 Raphaël 的 API 来实现，但由于生成的 DOM 元素没有 ID，我不知道如何手动更改它们的属性。

我实际上正在使用 CoffeeScript，但它真的很容易理解。毕竟 CoffeeScript 就是 Javascript。 这就是我现在正在做的事情，我希望 MouseOver 和 MouseOut 方法可以更改 "bg" 属性的源代码。

class Avatar
  constructor: (father, pic, posx, posy) ->
    @bg = father.container.image "pics/avatar-bg.png", posx, posy, 112, 112
    @avatar = father.container.image pic, posx + 10, posy + 10, 92, 92
    mouseOver = => @MouseOver()
    mouseOut = => @MouseOut()
    @bg.mouseover mouseOver
    @bg.mouseout mouseOut

  MouseOver: ->
    @bg.src = "pics/avatar-bg-hovered.png"
    alert "Hover"


  MouseOut: ->
    @bg.src = "pics/avatar-bg.png"
    alert "Unhovered"

class Slider
  constructor: ->
    @container = Raphael "raphael", 320, 200
    @sliderTab = new Array()

  AddAvatar: (pic) ->
    @sliderTab.push new Avatar this, pic, 10, 10

window.onload = ->
  avatar = new Slider()
  avatar.AddAvatar "pics/daAvatar.png"

这实际上是可行的，除了"@bg.src"这部分：我写它的时候就知道它不会起作用，但是...

- Michael

---

完成了 :)！这是CoffeeScript，但是...与Javascript基本相同，只是更加面向对象。 - Michael

Answer 1

var paper = Raphael("placeholder", 800, 600);
var c = paper.image("apple.png", 100, 100, 600, 400);
c.node.href.baseVal = "cherry.png"

I hope, you get the idea.

- rmflow

---

今天的 Snap.svg 中也能正常工作，这是我们所希望的。 - Tim Erickson

Answer 2

这个对我有效（且跨所有浏览器）：

targetImg.attr({src: "http://newlocation/image.png"})

- knoopx

Answer 3

我一直使用rmflow的答案，直到开始在IE8及以下版本中进行测试，发现image.node.href.baseVal返回undefined。不过，IE8及以下版本确实可以看到image.node.src，因此我编写了getImgSrc、setImgSrc函数，以便针对所有浏览器进行目标处理。

function getImgSrc(targetImg) {
    if (targetImg.node.src) {
        return targetImg.node.src;
    } else {
        return targetImg.node.href.baseVal;
    }
}

function setImgSrc(targetImg, newSrc) {
    if (targetImg.node.src) {
        targetImg.node.src = newSrc;
    } else {
        targetImg.node.href.baseVal = newSrc;
    }
}

- sosuke