Scrollable images are commonly used in navigation menus. Manually coding them requires JavaScript or CSS, but Dreamweaver simplifies the process. Each menu item contains both a regular and a 'hover' image.
Refer to Mytour's guide below to learn how to create scrollable images in Dreamweaver.
If you haven't installed Dreamweaver CC yet, you can access it here to download and install the software.
Creating Scrollable Images in Dreamweaver
To create scrollable images in Dreamweaver, follow these steps: Step 1: Open your file in Dreamweaver. Step 2: Delete all links in the navigation menu. Step 3: Place the cursor at the beginning of the page. In Dreamweaver CC 2015, select Insert => HTML => Rollover Image.
Step 4: In the Insert Rollover Image dialog box, enter the necessary information.
Alternatively, you can also use the Common Insert panel.
Step 4: In the Insert Rollover Image dialog box, enter the following information:
- Image name: the image name should not contain spaces.
- Original image: browse and select the image to use.
- Rollover image: Browse and select the image to use.
- Preload rollover image: Check this option to force the browser to preload the scrollable image to prevent delays in the scrolling effect.
- Alternate text: Add descriptive text.
- When clicked, Go to URL: Browse to index.htm.
You can also check the scrolling effect in Live View:
Step 1: Click on Live View in the Document toolbar.
Step 2: Hover over the image to see the changes.
In the above article, Mytour has just guided you on creating scrollable images using Dreamweaver. Additionally, you can explore some tips and tricks for mastering this web design software.
Dreamweaver also allows users to create pop-up windows for various purposes. Creating pop-up windows with Dreamweaver is simple, requiring just a few steps. You can easily create pop-up windows with Dreamweaver.