overlay an image over d3.js element

overlay an image over d3.js element

http://jsfiddle.net/nikunj2512/rF6s7/
i wrote this code using d3.js. Everything is working fine but i need some
help.
You will see a big yellow box which is changing it color depending on the
state but there is one state known as discovering for which i want to show
a gif image there, please tell me how to achieve that in d3.js
The state value is coming from the data. i already had the code where
depending on the state, i am assiging color to a variable and then passing
that variable to "color" attribute below.
But i don't what do for putting the gif image when state is discovering.
if(discovery_status == "discovered")
{
discovery_status_color = "yellow"
}else if(discovery_status == "registered")
{
discovery_status_color = "green"
}else if(discovery_status == "failed")
{
discovery_status_color = "red"
}
this is the code which is creating that rectangle and then i am passing
variable "discovery_status_color" to the "color" attribute.
cartridgeRectangles.push({"x_axis":startx+2, "y_axis":90+textbeginy,
"width":35, "height":15, "color":discovery_status_color,
"stroke":"#33CC33", "thickness":1, "mover":chassisDetails ,
"movercolor":"darkgreen", "mout":"True", "moutcolor":"#33CC33" });