Developer

Tutorial: Use Jump Menu and Swap Image behaviors in Dreamweaver

Ryan Boudreaux covers the steps to making use of the Jump Menu and Swap Image behaviors in Dreamweaver.

In this tutorial we will be using behaviors in Dreamweaver to add interactivity to sample web page documents. A behavior is the combination of an event and an action which is triggered by the event, and in Dreamweaver, you add a behavior to a page by specifying an action and then specifying the event that triggers that action. Dreamweaver behaviors place client-side JavaScript code into HTML documents to allow interaction within a web page.

Behaviors can include Jump Menu, Swapping Image, Pop-Up Windows, Play Sound, and more. This tutorial will demonstrate the Jump Menu and Swap Image behaviors, utilizing Dreamweaver CS5, and each will be illustrated with screen captures for the steps. The HTML documents for each demonstration and the associated images for the Swap Image behavior are included in the download.

Create a Jump Menu

When you create a Jump Menu Dreamweaver creates a menu object and attaches the Jump Menu (or Jump Menu Go) behavior to it. There is usually no need to attach the Jump Menu behavior to an object by hand.

With a new HTML document open in Dreamweaver go to the menu bar and select the following: Insert | Form | Jump Menu.

Figure A

The Insert Jump Menu dialog box will open, and this is where we will start adding in our menu items with text and the URL. We also have the options of selecting an Insert Go Button After The Menu and Select First Item After URL Change.

Figure B

Keeping all the defaults, I added in text and associated URLs for the four menu items listed below, but you can add in any menu items and responding URLs you wish. After each menu item's text and URL is added, click the plus (+) button to add the next menu item.

Next, I want to make sure the menu items are in alphabetical order, so I will use the up arrow to push the DIY menu item up one entry in the list.

Figure C

Click OK when done with your Jump Menu list, and Dreamweaver will build the form object code and associated JavaScript, which is also displayed below:

<form name="form" id="form">
  <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
    <option value="http://www.techrepublic.com/blogs">Tech Republic Blogs</option>
    <option value="http://www.techrepublic.com/blog/networking">Data Center Blog</option>
    <option value="http://www.techrepublic.com/blog/doityourself-it-guy">DIY IT Guy</option>
    <option value="http://www.techrepublic.com/blog/google-in-the-enterprise">Google in the Enterprise</option>
  </select>
</form>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
</script>
Note: By default, Dreamweaver will add the JavaScript within the <head> of the HTML document. I like to move all embedded JavaScript to below the closing of the body tag </body> as this helps the page load faster and allows the JavaScript to load after the initial web document contents.

Below is the screen capture of the resulting HTML as displayed in Chrome 17.0.9:

Figure D

Swapping images

The Swap Image behavior is an action that swaps one image for another by changing the <src> attribute of the img tag. This behavior is used to create button rollovers and other image effects including swapping more than one image at a time. Because only the <src> attribute is affected by the Swap Image action, you want to be sure that all images have the same dimensions (height and width) throughout the action. Otherwise, some images that get swapped into the event may appear compacted or expanded to fit the original image's dimensions. In this demonstration, I have provided four image samples of various trees, and they are included in the download, and are displayed in Figure E below.

Figure E

  1. In Dreamweaver, open a new html document and go to the menu bar and select Insert | Image.
  2. Browse and select the image you want to add and click OK.
  3. Enter the alternate text and a long description (if required) for the image, then click OK.

Dreamweaver will create the image source <img src> tag with the height, width, alternate text, and long description. You will need to manually add in a name for each of the image tags, name="Tree 1", name="Tree 2", and so on (see Figures F and G). The Swap Image action still works if you do not name your images, and it will automatically name any unnamed images when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if all of the images are named beforehand.

Figure F

Figure G

Repeat the above steps for each of the images you wish to add into the HTML document. I repeated this for each of the remaining three images.

Figure H

Click to enlarge

  1. Select the first image from the html document, then go to the Behaviors panel and click on the plus drop-down menu and select Swap Image as shown in Figure H.
  2. Now, select the first image you want to swap; in this case, I selected Image 1 and then browsed to set the source to the location of the new Swap Image.
  3. I selected Image 2 and clicked OK. The Swap Image behavior is now set with the associated JavaScript. Be sure to select Preload Images (Figure I)so that the browser will cache the images when the page is loaded, thus, preventing any delays in downloading and rendering of the images. Of course, web-ready images are always a best practice.

Repeat the above steps for each of the images you wish to swap.

Figure I

Below is the HTML code generated by the Swap Image behavior in Dreamweaver:

<body onload="MM_preloadImages('images/tree_02.gif','images/tree_03.gif','images/tree_04.gif','images/tree_01.gif')">
<p>
<img src="images/tree_01.gif" alt="Tree 1" name="Tree 1" width="400" height="267" longdesc="This is an image of a tree number 1" onmouseover="MM_swapImage('Tree 1','','images/tree_02.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/tree_02.gif" alt="Tree 2" name="Tree 2" width="400" height="267" longdesc="This an image of a tree number 2" onmouseover="MM_swapImage('Tree 2','','images/tree_03.gif',1)" onmouseout="MM_swapImgRestore()"/>
</p>
<p>
<img src="images/tree_03.gif" alt="Tree 3" name="Tree 3" width="400" height="267" longdesc="This is an image of a tree number 3" onmouseover="MM_swapImage('Tree 3','','images/tree_04.gif',1)" onmouseout="MM_swapImgRestore()"/>
<img src="images/tree_04.gif" alt="Tree 4" name="Tree 4" width="400" height="267" longdesc="This is an image of a tree number 4" onmouseover="MM_swapImage('Tree 4','','images/tree_01.gif',1)" onmouseout="MM_swapImgRestore()"/>
</p>
And the associated JavaScript generated to support the Swap Image behavior:
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

The resulting page is displayed in Chrome 17.0.9:

Figure J

Mouse over the first image in top left corner and it updates to the second image, as displayed below in Figure K.

Test it out yourself with your own Swap Image behavior or find the SwappingImages.html file in the download, and play around with it, too.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks