Tutorial: Use 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.

Tech Republic Blogs – http://www.techrepublic.com/blogs
Data Center Blog – http://www.techrepublic.com/blog/networking
Google in the Enterprise – http://www.techrepublic.com/blog/google-in-the-enterprise
DIY IT Guy – http://www.techrepublic.com/blog/doityourself-it-guy

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

In Dreamweaver, open a new html document and go to the menu bar and select Insert | Image.
Browse and select the image you want to add and click OK.
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

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.
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.
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.

With so many agile project management software tools available, it can be overwhelming to find the best fit for you. We've compiled a list of 10 tools you can use to take advantage of agile within your organization.

PURPOSE This policy describes the organization’s employee privacy guidelines and outlines employee privacy expectations. From the policy: POLICY DETAILS The organization’s IT equipment, services and systems are intended for business use only. However, the organization acknowledges that staff, consultants and volunteers occasionally require opportunities to make or receive personal phone calls, access personal email, utilize ...

PURPOSE The purpose of this Security Response Policy from TechRepublic Premium is to outline the security incident response processes which must be followed. This policy will assist to identify and resolve information security incidents quickly and effectively, thus minimizing their business impact and reducing the risk of similar incidents recurring. It includes requirements for both ...

Tutorial: Use Jump Menu and Swap Image behaviors in Dreamweaver