如何更新图像的来源 [英] How to update the source of an Image

问题描述

我正在使用RaphaëlJavascriptlib（顺便提一下SVG渲染的很棒的东西），我正在尝试在鼠标移过它时更新图像的来源。

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.

事情是我找不到任何关于它的东西（它可能甚至不可能，考虑到我已经阅读了Raphaël的很大一部分来源而没有发现任何相关内容）。

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).

有人知道这样做的方法吗？
也许可以在不直接使用Raphaël的API的情况下完成，但由于生成的DOM元素没有ID，我不知道如何手动更改其属性。

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.

我实际上在做CoffeeScript，但它很容易理解。 CoffeeScript毕竟是Javascript。
这就是我所知道的，我希望MouseOver和MouseOut方法更改bg属性的来源。

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"

这实际上有效，除了@ bg.src部分：我写道它知道它不起作用，但是好......

This actually works, except for the "@bg.src" part : I wrote it knowing that it wouldn't work, but well...

推荐答案

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.

这篇关于如何更新图像的来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！