Solved

creating a rollover button inside another image

Posted on 2008-10-04
2
148 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
  • 2
2 Comments
 
LVL 14

Accepted Solution

by:
yessirnosir earned 500 total points
Comment Utility
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
Comment Utility
just noticed I left a  'class = "centered"' statement in the code that isn't used and should be deleted.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

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 …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now