TechNote (Archived)

Swap Image behavior not functioning in a repeating region

Issue

When using the Swap Image behavior in a repeating region of a recordset, the initial image does not swap with the second image.

Reason

For the Swap Image behavior script to function properly, each image must have a unique name or id. When this behavior is added within a recordset repeating region, the image tag is repeated for each iteration of the loop. This creates multiple instances of images with the same name and breaks the functionality of the JavaScript code.

The following code isan example of a repeating region looping through code that contains a Swap Image behavior. Notice that the image name and id do not have instructions to change with each iteration of the loop.

	<% while ((Repeat1__numRows-- != 0)&& (!rsRptROimg.EOF)) { %> <tr> <td ><p> <%=(rsRptROimg.Fields.Item("FIRST_NAME").Value)%> </p></td> <td ><p> <%=(rsRptROimg.Fields.Item("EMAIL").Value)%> </p></td> <td > <a href="http://motionalmemories.carfrenzy.com/" audience="_blank" cdHGLT">'Image1','','blu.gif',1)" > <img href="/support/dreamweaver/ts/documents/cnvrtbl.gif" name="Image1" id="Image1"/></a> </td> </tr> <% Repeat1__index++; rsRptROimg.MoveNext(); } %>

Solution
To give each image a unique name, and ensure proper functioning of the Swap Image behavior's JavaScript code, a variable can be used. In the example below a variable with a numeric value is used (Repeat1__numRows). The variable is declared in the code that's generated when the repeat region is added to the page, and can be appended to the image name so that each instance of the image is given a unique name.

	Type the followng variable at the end of the image name in the MM_swapImage behavior. <%=Repeat1__numRows%>
	This variable should be typed into the initial instance of the image name in the JavaScript code as shown below. <%=Repeat1__numRows%>
The resulting code should look something like this:
	<% while ((Repeat1__numRows-- != 0) && (!Recordset1.EOF)) { %> <tr > <td><p> <%=(Recordset1.Fields.Item("FIRST_NAME").Value)%> </p></td> <td><p> <%=(Recordset1.Fields.Item("EMAIL").Value)%> </p></td> <td><p> <a href="http://motionalmemories.carfrenzy.com/" audience="_blank" cdHGLT"><%=Repeat1__numRows%>','', 'cnvrtbl.gif',1)" ><img href="blu.gif" name="Image1<%=Repeat1__numRows%>" id="Image1" /></a> </p></td> </tr> <% Repeat1__index++; Recordset1.MoveNext(); } %>

This will change the value of each loop of the repeat region. It adds a numeric variable which decrements (counts down from the end of the recordset) by a value of one with each iteration of the repeat region.

Note:There are two (2) underscores in "<%=Repeat1__numRows%>".

Additional Information
For moreinformation about rollovers in repeating region, please refer toRollover images within a repeat region fail to exhibit swap behavior(TechNote 15033).

For more information about JavaScript resources, please see the MacromediaJavaScript Reference.