How to update image source

Question

I'm using the Raphaël Javascript lib (awesome stuff for SVG rendering, by the way), and I'm currently trying to update the image source as the mouse views it.

The fact is that I can not do anything about it (maybe this is even impossible, given that I read a huge part of the Raphaël source without finding anything related to it).

Does anyone know how to do this? Perhaps this can be done without using the Raphaël API directly, but since the generated DOM elements do not have identifiers, I don’t know how to manually change their properties.

I really do CoffeeScript, but it is very easy to understand. CoffeeScript is Javascript. This is what I am doing right, and I would like the MouseOver and MouseOut methods to change the source of the "bg" attribute.

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"

This really works, except for the @ bg.src part: I wrote this, knowing that this will not work, but well ...

Answer 1

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

Hope you have an idea.

Answer 2

This works for me (and in all browsers):

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

Answer 3

rmflow- , IE8 , undefined image.node.href.baseVal. 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;
    }
}