Question

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 stackoverflow.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 :
black when mouse over, grey if not.

Answer 1

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.