How to Place Button at Bottom Right Corner of Image?

**thedealmaker** · Aug 20, 2006, 22:56

Hi all,
I want to find a way to place a button at the bottom right corner of an image. The button should still be inside the image, not under the image. How? I know how to create a link button using FORM and INPUT tag, but can I use innerHtml to insert the button into the IMG tag? If not, how to do it? I tried, but the button is always outside the image.

Many thanks.

**reminder** · Aug 21, 2006, 00:36

style="margin-top:-20px"
cheers

**GreboGuru** · Aug 21, 2006, 01:02

Hi,

Not sure if this is the best way, but you could set your image to be the backgound of a DIV and place the button accordingly eg.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>A page</title>

<style type="text/css">

#backgrounddiv
{
	margin: 0;
	padding: 0;
	background: blue url('Data/My Pictures/bluefish.jpg');
	width: 200px;
	height: 200px;
}

#backgrounddiv #mybutton
{
	padding: 0;
	float: right;
	margin: 180px 0 0 0;
} 

</style>

</head>

<body>

<div id="backgrounddiv">
	<input id="mybutton" type="button" value="test"/>
</div>

</body>

</html>

Just change the height and width of backgrounddiv to match your image.

Hope this helps

Scott

**thedealmaker** · Aug 24, 2006, 00:05

Thanks, but I cannot set image as background because I am not allowed to change the existing image format. Need another way to do this.

Originally Posted by GreboGuru

Hi,

Not sure if this is the best way, but you could set your image to be the backgound of a DIV and place the button accordingly eg.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>A page</title>

<style type="text/css">

#backgrounddiv
{
	margin: 0;
	padding: 0;
	background: blue url('Data/My Pictures/bluefish.jpg');
	width: 200px;
	height: 200px;
}

#backgrounddiv #mybutton
{
	padding: 0;
	float: right;
	margin: 180px 0 0 0;
} 

</style>

</head>

<body>

<div id="backgrounddiv">
	<input id="mybutton" type="button" value="test"/>
</div>

</body>

</html>

Just change the height and width of backgrounddiv to match your image.

Hope this helps

Scott

**thedealmaker** · Aug 24, 2006, 00:09

Thanks, so I need to know the height of my button. What about horizontial? I need to put the button to the lower right corner of the image. I want to use the same code for all image. How do I do it?
Thanks.

Originally Posted by reminder

style="margin-top:-20px"
cheers

**reminder** · Aug 24, 2006, 01:31

just set the position relative and the z index
thats it
cheers

The SitePoint Forums have moved.

User Tag List

Thread: How to Place Button at Bottom Right Corner of Image?

Thread Tools

Display

How to Place Button at Bottom Right Corner of Image?

Bookmarks

Bookmarks

Posting Permissions