Learn this great Web site authoring tool with our Dreamweaver tutorials. Learn everything from creating a new Web site, to mouseovers, stylesheets, and more
Web design tips and tutorials for beginners: Home pageWeb design tips and tutorials for beginners: Design techniquesWeb design tips and tutorials for beginners: Dreamweaver tutorialsWeb design tips and tutorials for beginners: Fireworks tutorialsWeb design tips and tutorials for beginners: Photoshop Elements tutorialsWeb design tips and tutorials for beginners: AdSense tutorials

Home > Dreamweaver > JavaScript behaviors

JavaScript behaviors

JavaScript behaviors are a great way to expand the capabilities of your site beyond 'plain vanilla' html. Dreamweaver makes it simple to add them to your site. You can add behaviors to check a user's browser version, play sounds, open custom-sized windows, swap images, and more. This tutorial will show you how to use the swap image behavior to add mouseover buttons to your site.

Mouseover effects

A common effect used on many Web sites is the onmouseover behavior. This allows you to swap one image for another when the user moves their mouse over an image. It's often used on buttons to make them "light up" or "push in". Below is a quick tutorial that explains how this is done.

Below are two images that make up the "Lunch" menu link on the Web site of a fictional restaurant:

JavaScript rollovers in Dreamweaver provide a great effect for your pages. This is the mouse out image JavaScript rollovers in Dreamweaver provide a great effect for your pages. This is the mouse over image

We want our button to "light up" and "push in" when the mouse is over the image. Here's how:



  • To start, right-click on each of the above images, and select "Save as" to save them to your hard drive. Next, create a new page and insert the "lunch_but_out.gif" onto the page. Click the image to select it.
  • Now, click the Behaviors tab on the Design panel.
  • Click on the "+" sign and select Swap Image from the list of behaviors.
  • Click the Browse button, and set the source to "lunch_but_over.gif". Check both boxes at the bottom of the window. Your window should look like the sample at the right. Click OK to finish.
  • Select the image, and type a "#" in the link field. Normally, you'd link to a page here, but putting in the "#" causes the mouse arrow to switch to a hand (like it would on a 'real' Web page.)
  • Save your page, and hit F12 (Preview in Browser).
  • When you move your mouse over the image, it should swap, then restore when the mouse is off the image. Like this:

JavaScript onmouseover sample

The JavaScript behaviors tab in the design palette in Dreamweaver

Dreamweaver's swap image window provides an easy way to add JavaScript effects to your Web pages

 
 
      
 

Home | Design | Dreamweaver | Fireworks | Photoshop | AdSense
   
 

©2006 Wilk Web Works
All rights reserved.