How to Create a Drop Down Menu From an Image in Dreamweaver CS5
Dreamweaver CS5 simplifies the task of transforming one Web page object into another. You may find this ability useful when seeking a creative way to display drop menus. A drop menu, also known as a drop-down box, contains selectable items that site visitors can choose. Drop menus usually appear on-screen when a page opens. However, by using a simple Dreamweaver CS5 JavaScript trick you can create a drop menu from an image.
Other People Are Reading
Instructions
-
Add Image and Drop Menu
-
1
Paste the code shown below the document's "<body>" tag:
<div id="div1">
<select id="menu1" name="menu1" >
<option>item1</option>
<option>item2</option>
</select><img id="image1" src="MY_IMAGE" />
</div>
This code creates a container div element whose id is "div1." This div holds a select tag and an img tag. These tags create an image and a drop menu. The image's id value is "image1." The drop menu's id value is "menu1." Replace "MY_IMAGE" with the URL of an image on the Web or the name of an image on your computer. Move to the option attributes in the select tag and replace "item1" and "item2" with the items you wish to appear in your drop menu.
-
2
Click "Design" to switch to design view. The image and drop menu appear on the document. Click the drop menu to select it and press "SHIFT" and "F4" to open the Behaviors window.
-
-
3
Click the "Plus" sign at the top of that window, then click "Call JavaScript." Type the following text into the "JavaScript" text box that appears:
showImage('image1')
This statement tells Dreamweaver to call a JavaScript named "showImage" and pass the id value of your image to that function. Click "OK" and Dreamweaver adds an onchange behavior to the drop menu.
-
4
Return to the document and click the image. Click the "Plus" sign again at the top of the Behaviors window, then click "Show-Hide Elements" to display a list of elements on the document. Click the "image1" element that appears in the list and click "Hide." Click "OK" and Dreamweaver adds an onclick behavior to the image that hides the image when you click it.
Add CSS and JavaScript
-
5
Click the "Code" button to display the document's HTML code. Paste the following code before the final "</script>" tag that appears in the code:
function showImage(imageID)
{
var image = document.getElementById(imageID);
image.style.visibility = "visible";
}This code makes the image reappear after you select an item in the drop menu. Click "Design" to return to design view.
-
6
Right-click the image and click "CSS Styles." Click "New" and type "overlayStyles" in the "Selector Name" text box. Click "OK," then click "Positioning."
-
7
Click the "Positioning" drop-down menu and select the "absolute" option that appears in the menu. Type one in the "Top" text box that appears in the window's "Placement" section. Type one in the "Left" box that appears in the same section. Doing this makes the image and drop menu overlap on the Web page.
-
8
Right-click the drop-menu located on the page and click "CSS Styles." Click the "overlayStyles" option that appears in the menu that appears. This applies the style you created to the menu.
-
9
Press F12 to preview your Web page in your browser. The page displays the image. Click the image. The image disappears and the drop menu appears. Click one of the items in the menu. The menu disappears and the image comes back.
-
1
Tips & Warnings
Note that the select tag comes before the img tag in the document's body section. These tags must appear in this order or the drop menu will not hide behind the image correctly.
