How to Create Fading in Pop-Up Hovers in Dreamweaver
Spry effects make it possible for Dreamweaver developers to add animated effects to their Web pages. One effect seen widely on the Internet is the pop-up overlay effect. This occurs when a user hovers a mouse cursor over an object on a Web page and a popup menu or tooltip appears. These pop-up overlays help users by providing immediate feedback information about the object over which they are hovering. Using the Spry effects framework built into Dreamweaver you can add this effect to your Web pages and pop-ups fade in whenever you like.
Other People Are Reading
Instructions
-
Add Properties and Behaviors
-
1
Launch Dreamweaver and click the "HTML" button near the top of the startup window. Dreamweaver displays a new HTML document.
-
2
Click "Insert" and click "Image" to view the list of images on your hard drive. Double-click one of the image files in the list and click "OK." Dreamweaver pastes the image onto the document. You will use this image to demonstrate the hover effect that occurs when you move your mouse over it.
-
-
3
Press "SHIFT" and "F4" to display the Behaviors panel. This panel allows you to assign behaviors to webpage elements. Click the "Plus" sign at the top of the panel to display a list of available behaviors.
-
4
Click the "JavaScript" behavior and type "fadeOverlay" -- without the quotes -- in the "JavaScript" text box, then click "OK." A new behavior named "fadeOverlay" appears in the Behaviors panel.
-
5
Click the drop-down box to the left of that behavior and click "onMouseOver." Doing this associates the JavaScript function with the onMouseover event. Click the "Plus" sign again, click "Call JavaScript" and type "fadeOverlay()" in the JavaScript text box.
-
6
Click "OK." A second behavior named "fadeOverlay" appears in the Behaviors panel. Click the drop-down box to the left of that behavior and click "onMouseOut." Doing this associates the same JavaScript function with the onMouseOut event.
Add JavaScript Code
-
7
Place your cursor below the image. Click "Insert," click "Layout Object" and click "Div Tag." Type "overlay1" into the "ID" text box that appears. This sets the div's ID value to "overlay1."
-
8
Click the "Code" tab to view the documents HTML code. Paste the code shown below after the closing body tag that appears near the bottom of the document:
<script>
var overlayObject;
overlayObject = new Spry.Effect.Fade('overlay1', {duration: 1000, from: 100, to: 0, toggle: true});
overlayObject.start();
</script>This JavaScript code creates an overlay object named "overlayObject." The code also assigns an Adobe Spry effect named "Fade" to the object. This effect fades an object's opacity. The "from" property set's the object's initial opacity value. The "to" property set's its ending opacity after the fade effect completes. The "toggle" property makes a Web browser alternate between fading the overlay and showing it as you move your mouse over the object and away from it. Control the fade effect's duration by assigning a value -- in milliseconds -- to the duration property. That value is 1000 milliseconds in this example.
-
9
Find the document's closing "</script>" tag. Paste the code shown below before that tag:
function fadeOverlay()
{
overlayObject.start();
}This is the fadeOverlay function you assigned to the image's onMouseOver and onMouseOut event handlers. The overlayObject.start() statement generates the fade effect.
-
10
Press "F12." Your default browser opens and displays a Web page containing your image. Move your mouse cursor over the image. The pop-up overlay fades in. Move your mouse cursor away from the image and the pop-up goes away.
-
1
Tips & Warnings
This example demonstrates adding a popup to an image. Use these steps to add a popup overlay to any HTML element.
