Grey cross / red cross to delete text

I would like to add to my website possibilty to clear a div (delete all text). A grey cross on the left fo the div, when you click, div is cleared. But when mouse is over, like on stackoverf开发者_如何转开发low.com (in the comments), cross become red. How can I do that ?

HTML :

print $cgi->div({-id=>"subheader"},$cgi->span({-id=>"reset"}));

CSS :

#subheader {
        text-align:center;
        clear: both;
        margin: 3px 0 10px 0;
        height:18px;
        background: #f4f4f4;
        color: #808080;
        border-bottom: 1px solid #ccc;
}

#reset {
        float:left;
        width:20px;
        height:20px;
}

Where do I put images ? in CGI or CSS ? Thanks

For example with these images :

Put the images in CSS:

#reset {
    background:url('grey-cross.png');
}
#reset:hover {
    background:url('red-cross.png');
}

[EDIT]

OP also asks how to make it a link so it works with JQuery.

It doesn't necessarily need to be a link element (ie an <a> tag) to work with JQuery; it can be any HTML element. You just need to put a click event onto it using JQuery:

$('#reset').click(function() { ...your code here... }

However, semantically, it's best if you use an element type which is appropriate to the action it will perform, so I'd suggest making it a <button> or something similar. But the JQuery code is much the same whether it's a <button> or a <div> or anything else.

Hoep that helps.

You need 2 things for this:

1. the javascript that detect the click and deletes the text of the element

2. css to change the image:

   #reset{backgroud-image:url('image.jpg');height:20px;width:20px}
   #reset:hover{backgroud-image:url('image2.jpg')}