title: How to change image on mouseover with d3.js
body: <p>I have some svg circles and images in them, generated with d3.js. I want to change images on mouseover instead of tooltip.</p>
  
  <pre><code>mask.append("image")
      .attr('class', "sth")
      .attr('x',-(entry.childNodes[0].getAttribute("r"))-40)
      .attr('y',-(entry.childNodes[0].getAttribute("r"))-40)
      .attr('width', 80+entry.childNodes[0].getAttribute("r")*2)
      .attr('height', 80+entry.childNodes[0].getAttribute("r")*2)
      .attr("transform", entry.childNodes[0].getAttribute("transform"))
      .attr('clip-path', 'url(#'+('clip'+clipPathId)+')')
      .attr("xlink:href", imageUrl)
      .on("click", function(d) { 
            zoom(d);                           
            d3.event.stopPropagation(); 
      })
      .on("mouseover", function(d){ d.attr("xlink:href", "img/001.jpg"); tooltip.style("visibility", "visible"); tooltip.html("&lt;img src='"+imageUrl+"'/&gt;"); })
      .on("mousemove", function(){ tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); })
      .on("mouseout", function(){ tooltip.style("visibility", "hidden"); }); 
                      ;
  </code></pre>