最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to update the source of an Image - Stack Overflow

programmeradmin7浏览0评论

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

The thing is I can't find anything about it (it's probably not even possible, considering I've read a huge part of the Raphaël's source without finding anything related to that).

Does someone knows a way to do this ? Maybe it can be done without directly using the Raphaël's API, but as the generated DOM elements doesn't have IDs I don't know how to manually change their properties.

I'm actually doing CoffeeScript, but it's really easy to understand. CoffeeScript is Javascript after all. This is what I'm doing right know, 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 actually works, except for the "@bg.src" part : I wrote it knowing that it wouldn't work, but well...

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

The thing is I can't find anything about it (it's probably not even possible, considering I've read a huge part of the Raphaël's source without finding anything related to that).

Does someone knows a way to do this ? Maybe it can be done without directly using the Raphaël's API, but as the generated DOM elements doesn't have IDs I don't know how to manually change their properties.

I'm actually doing CoffeeScript, but it's really easy to understand. CoffeeScript is Javascript after all. This is what I'm doing right know, 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 actually works, except for the "@bg.src" part : I wrote it knowing that it wouldn't work, but well...

Share Improve this question edited Feb 21, 2011 at 16:31 Michael asked Feb 21, 2011 at 16:22 MichaelMichael 1,5173 gold badges17 silver badges26 bronze badges 1
  • Done :) ! It's CoffeeScript, but well... pretty much the same as Javascript, just more object-friendly. – Michael Commented Feb 21, 2011 at 16:31
Add a ment  | 

3 Answers 3

Reset to default 9
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.

This works for me (and across all browsers):

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

I was using rmflow's answer until I started testing in IE8 and below which returned undefined for image.node.href.baseVal. IE8 and below did see image.node.src though so I wrote functions getImgSrc, setImgSrc so I can target all browsers.

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;
    }
}
发布评论

评论列表(0)

  1. 暂无评论