Search code examples
htmlcssdrupal-7

How to make hyperlink for a background image?

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

enter image description here

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;
    }
Solution

  • 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" ><a href="'.$path .'xmluploads/'. $foldnames .'/'. $filenames.'" target="_blank" download>' ."--". $filenames .'</a><br><a href="" class="delete-button"></a></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;
}