How to make hyperlink for a background image? - html

Question

I am displaying a list of files on a page, at the end of the each file nameI have used one background image(cross mark). But I need that image should be clickable element. When I click on the image it should delete from the given path.For more details, see the below image
How can I achieve that, give some suggestion.
Below html and css code I am using to display that image
$data .= '<div class = "public-file-names" ><a href="'.$path .'xmluploads/'. $foldnames .'/'. $filenames.'" target="_blank" download>' ."--". $filenames .'</a><br></div>';
div.public-file-names {
background: transparent url("../images/close-cross.jpg") no-repeat scroll right center;
font-size: 14px;
margin: 10px 0;
}

Answer 1

You need to add another anchor tag for the delete button, then move the background image to the tag.
$data .= '<div class = "public-file-names" ></div>';
.public-file-names {
font-size: 14px;
margin: 10px 0;
}
.delete-button {
float: right;
display: inline-block;
width: 16px;
height: 16px;
background: transparent url("../images/close-cross.jpg") no-repeat scroll right center;
}

Answer 2

you can use jQuery but it can be achieved by html
you could just wrap each of your .public-file-names divs in an a tag
<a href="your-link.html">
<div class="public-file-names">
</div>
</a>
<a href="your-link.html">
<div class="public-file-names">
</div>
</a>
<a href="your-link.html">
<div class="public-file-names">
</div>
</a>
if that doesnt work for you let me know if you want me to help you using jQuery