Databases
StackOverflow2013
Postsdbo
POHow to update the source of an Image
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to update the source of an Image
    text
    copied!<p>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.</p> <p>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).</p> <p>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.</p> <p>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.</p> <pre><code>class Avatar constructor: (father, pic, posx, posy) -&gt; @bg = father.container.image "pics/avatar-bg.png", posx, posy, 112, 112 @avatar = father.container.image pic, posx + 10, posy + 10, 92, 92 mouseOver = =&gt; @MouseOver() mouseOut = =&gt; @MouseOut() @bg.mouseover mouseOver @bg.mouseout mouseOut MouseOver: -&gt; @bg.src = "pics/avatar-bg-hovered.png" alert "Hover" MouseOut: -&gt; @bg.src = "pics/avatar-bg.png" alert "Unhovered" class Slider constructor: -&gt; @container = Raphael "raphael", 320, 200 @sliderTab = new Array() AddAvatar: (pic) -&gt; @sliderTab.push new Avatar this, pic, 10, 10 window.onload = -&gt; avatar = new Slider() avatar.AddAvatar "pics/daAvatar.png" </code></pre> <p>This actually works, except for the "@bg.src" part : I wrote it knowing that it wouldn't work, but well...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload