引导程序使图像的一部分可点击

Question

Fairly new to this. At the moment I have an image and a button in one of the containers in my front page. I'm trying to embed that button into that image. Should I

1. make part of that image clickable, and let that trigger a function?
2. or force that button to float on certain position of that picture?

Or is there another way that I should follow? and how do I implement this? Many thanks!

<div class="col-md-10 col-lg-offset-1 text-center"> 
        <img src="../img/background.png" class="rounded" alt="">
        <button  type="button" id="s"  class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>

Answer 1

You can use position: absolute to make it float on the image. look at this

https://jsfiddle.net/5ueau24b/1/

 #s { position: absolute; margin-left: -200px; margin-top: 130px; } 

 <div class="col-md-10 col-lg-offset-1 text-center"> <img src="http://www.planwallpaper.com/static/images/images_1_05GM1zY.jpg" class="rounded" alt=""> <button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above </div> 

Answer 2

Try using imagemap of html. (map tag in specific)