Как обновить источник изображения - PullRequest
Новая
       8

Как обновить источник изображения

3 голосов
/ 21 февраля 2011

Я использую Raphaël Javascript lib (кстати, потрясающую штуку для рендеринга SVG) и сейчас пытаюсь обновить источник изображения при наведении на него мыши.

Дело в том, что яничего не могу найти по этому поводу (вероятно, это даже невозможно, учитывая, что я прочитал огромную часть источника Рафаэля, не найдя ничего связанного с этим).

Кто-нибудь знает способ сделать это?Возможно, это можно сделать без непосредственного использования API Raphaël, но поскольку сгенерированные элементы DOM не имеют идентификаторов, я не знаю, как вручную изменить их свойства.

На самом деле я делаю 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 "part: я написал это, зная, что это не сработает, но хорошо ...

Ответы [ 3 ]

9 голосов
/ 21 февраля 2011 
var paper = Raphael("placeholder", 800, 600);
var c = paper.image("apple.png", 100, 100, 600, 400);
c.node.href.baseVal = "cherry.png"

Надеюсь, вы поняли.

7 голосов
/ 26 сентября 2012

Это работает для меня (и во всех браузерах): 

targetImg.attr({src: "http://newlocation/image.png"})
6 голосов
/ 29 марта 2011

Я использовал ответ 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;
    }
}
...