How to add a button "on" the image at one corner of image?

Question

I want to place buttons On the Top of the image in three places

1. Bottom Left Corner of the image
2. Bottom Right corner of the image
3. Center of the image. (optional)....

How to place these button on the top of the image.

<img src="images/default_image.png" style="width:90%" id="mImage"  /> 

Answer 1

This has nothing to do with jQuery or jQuery mobile really. Can be done with simple HTML and CSS. See this fiddle for am example on how I would do it: http://jsfiddle.net/rHaPH/22/

Answer 2

Try this:

<div id="div-1">
  <img src="../img/logo.png" style="width:90%" id="mImage">
  <div id="div-1a" data-role="fieldcontain">
    <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  </div>
  <div id="div-1b" data-role="fieldcontain">
    <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  </div>
</div>

with this:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 bottom:0;
 left:0;
}
#div-1b {
 position:absolute;
 bottom:0;
 right:0;
}

You can copy that into JS fiddle and it will work using JQMobile. Make sure you include the css url for JQM and make sure you tick JQMobile when adding JQuery to your JS fiddle.

Update:

You should also beware that JQMobile will inject span tags into the DOM which will be your buttons at runtime. This means the css I have provided is conceptually ok, but the selectors will need to point to those span tags (as opposed to using the ids of div tags).