Replacing an SVG with an image
<p>I want to replace this SVG object with an image in the exact same position.
There's probably a CSS way to go about it, but for a specific reason I'd much rather have this worked out entirely using Javascript!</p>

<pre><code>&lt;circle id="Sun" class="st0" cx="500" cy="300.8" r="30.3" onclick="changePic();"/&gt;
</code></pre>

<p>This is the function that's probably in need of some tweaking. </p>

<pre><code>function changePic(src)
{
        var im = document.getElementById("Sun"); 
        im.setAttribute("Sun",  "im");
        im.setAttribute("src", src || "img/picture.png");       
} 
</code></pre>

<p><code>"img/picture.png"</code> is the folder and the image inside. </p>

<p>Also, is there a way in Javascript to call this function when the SVG is double clicked, as opposed to one click. I know it's not what I asked but I'd be grateful if I were helped out with that one too. </p>