so I have an image which i would like to overlay with an html button attribute like so:

here is a blank image

i would like to overlay a button like so on the image

and then if the button is clicked have it then look like this

from what i can gather this could be done using CSS using {index-z} somehow, or possible with html5 canvas tag. and then to handle the actually button click with java script. However i am not pletely sure how to acplish this (the handling of button click with javascript i do know). Could someone link to a tutorial on how to do this or give an explanation it would be greatly appreciated.

Note: the image itself is also an href / link if this changes how this should be done, additionally te image itself will be in a sort of gallery with around 50 similar images or so

so I have an image which i would like to overlay with an html button attribute like so:

here is a blank image

i would like to overlay a button like so on the image

and then if the button is clicked have it then look like this

from what i can gather this could be done using CSS using {index-z} somehow, or possible with html5 canvas tag. and then to handle the actually button click with java script. However i am not pletely sure how to acplish this (the handling of button click with javascript i do know). Could someone link to a tutorial on how to do this or give an explanation it would be greatly appreciated.

Note: the image itself is also an href / link if this changes how this should be done, additionally te image itself will be in a sort of gallery with around 50 similar images or so

• javascript
• html
• css

2 Answers 2

You can use positioning to place the "star" button on top of the other image. Your image and button will need to be in a container with the position set to relative. Then you can set your "star" to be absolutely positioned, and that position will be relative to the container:

.image-container {
    display: inline-block;
    position: relative;
}

.star-button {
    position: absolute;    
    right: 10px;
    top: 10px;
}


<div class="image-container">
    <img src="main image here">

    <img class="star-button" src="star image here">
</div>

Then you can handle the click of the image (or button, or a, or what have you) in your javascript.

JSFiddle

Maybe this example will help you my friend:

Source: ye5

HTML :
<div id="header1" width="259px">
<a href="http://your-website-link"></a>
<img src='http://2aek./inventory/MyBlogspot/ye5-templete/ye5Header3b.jpg' style='margin-left:259px; margin-top:-128px;'/>

CSS :
#header1 a { 
background-image: url(http://2aek./inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:link { 
background-image: url(http://2aek./inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:hover { 
background-image: url(http://2aek./inventory/MyBlogspot/ye5-templete/ye5Header3a2.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:active { 
background-image: url(http://2aek./inventory/MyBlogspot/ye5 templete/ye5Header3a3.jpg);
height:128px;
width:259px;
display: block;
}