Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

creating a rollover button inside another image

Posted on 2008-10-04
2
Medium Priority
?
160 Views
Last Modified: 2011-10-19
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
Comment
Question by:nathan1038
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 14

Accepted Solution

by:
yessirnosir earned 2000 total points
ID: 22645545
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
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22645559
just noticed I left a  'class = "centered"' statement in the code that isn't used and should be deleted.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question