• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 163
  • Last Modified:

creating a rollover button inside another image

Hi guys, what i want to do is, create 1 image, then inside that image a button, that says, 'what's this' and
when the user rolls over that button (that changes when you roll over it from one color to another) a tooltip,
or rectangle with some text in will appear above the button.

I don't know how to do this in dreamweaver
0
nathan1038
Asked:
nathan1038
  • 2
1 Solution
 
yessirnosirCommented:
lots of different approaches, but here's a couple.
The first example below just uses two images for the regular and hover state of a button, and uses a transparency filter to change which one you see.  The title text  "This is my content" pops up when you hold the mouse over the image.
The second example is similar, but just uses one button image with a change in transparency on hover allowing more or less of the background image below to show through.
Have attached the three sample images referenced by the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
body {margin:0px;padding:0px;}
 
.background {
    position:relative;
	height: 50px;
	width: 100px;
    background:url(whatsthis_red.jpg);
	}
.mybutton a{
    position:absolute;
    display:block;
	height: 50px;
	width: 100px;
	text-decoration:none;
	filter:alpha(opacity=100);-moz-opacity:1.00;opacity:1.00;
	}
.mybutton a:hover{
	text-decoration:underline;
	filter:alpha(opacity=0);-moz-opacity:0.00;opacity:.00;
	}
</style>
</head>
 
<body>
<div class="background">
<div class="mybutton">
<a href="#"><img src="whatsthis.jpg" alt="What's This" width="100" height="50" border="0" class="centered" title="This is my content" /></a>
</div>
</div>
 
</body>
</html>
 
-------------------   EXAMPLE 2   --------------------
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
body {margin:0px;padding:0px;}
.background {
    position:relative;
	width:125px;
	height:125px;
	background:url(background.jpg);
	}
.mybutton a{
    position:absolute;
    display:block;
	height: 50px;
	width: 100px;
	margin-top: 25px;
	margin-left:12px;
	filter:alpha(opacity=75);-moz-opacity:0.75;opacity:.75;
	}
.mybutton a:hover{
	filter:alpha(opacity=95);-moz-opacity:0.95;opacity:.95;
	}
</style>
</head>
 
<body>
 
<div class="background">
<div class="mybutton">
<a href="#"><img src="whatsthis.jpg" alt="What's This" width="100" height="50" border="0" class="centered" title="This is my content" /></a>
</div>
</div>
 
</body>
</html>

Open in new window

whatsthis.jpg
background.jpg
whatsthis-red.jpg
0
 
yessirnosirCommented:
just noticed I left a  'class = "centered"' statement in the code that isn't used and should be deleted.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now