Question

81

overlaying an image with a button on html page

rated 0 times [ 82] [ 1] / answers: 1 / hits: 15492 / 11 Years ago, sat, march 16, 2013, 12:00:00

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

here is a blank image
plain

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

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 completely sure how to accomplish 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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

margaritakristinak

Add To Favorites

Follow

Total Points: 502

Total Questions: 127

Total Answers: 98

Location: England

Member since Mon, May 17, 2021

3 Years ago

margaritakristinak questions

1 Parcel.js says to add the type=module attribute to the < script> tag but I've already added it

Thu, Mar 31, 22, 00:00, 2 Years ago

1 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from

Sun, Feb 20, 22, 00:00, 2 Years ago

1 Why is local storage deleted when I refresh the page?

Tue, May 11, 21, 00:00, 3 Years ago

1 Click event not firing on touchscreen when finger moves a bit

Tue, Oct 29, 19, 00:00, 5 Years ago

1 Nuxt.js: How to use the same page with different URLs and switch the components to be displayed according to the URL

Thu, Mar 28, 19, 00:00, 5 Years ago

View All

answered 11 Years ago turnerf · Accepted Answer

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