We are going to take a look at adding interactivity to our web page by adding a swap image behavior
When we hover over an image, the image will change to a different image and then return to the original image when we mouse off the image
Dreamweaver will create the code for this to happen which makes it very easy for us
Create a new page and save it as swap-image.html
Add an image to the page from the images folder, we want to use 2 images that are the same size for this behavior, the assets panel is a great place to double check the width and height of the images
Add an ID to the image on the page and call it swapping
Go to the Tag Inspector panel and select the behaviors button
Click the + sign and choose Swap Image
In the Set source to: choose another image, this will be the image that shows when you place your cursor on the image, be sure preload images and restore images onMouseOut are checked
Save the page and preview it in the browser hovering over the image
You will see the image change as you move over the image with your cursor
Adding a Swap Image Behavior
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
Educator.com recommends Adobe Dreamweaver CC to use with our Dreamweaver CC course. Adobe Dreamweaver CC is the leading all-in-one visual development tool used by web designers and developers worldwide to create, publish, and manage their websites and mobile content. Membership includes the full version of Dreamweaver CC to download, install, and run on your computer. You will get immediate access to all the latest updates and new features as soon as they're released.