如何更新图像的来源

Question

我正在使用RaphaëlJavascriptlib(顺便提一下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"部分:我写道它知道它不会工作,但是......

Answer 1

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

我希望,你明白了.

Answer 2

这适用于我(以及所有浏览器):

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

Answer 3

我正在使用rmflow的答案,直到我开始在IE8中测试,然后在image.node.href.baseVal中返回undefined 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;
    }
}