How can I cause a change of a picture with a mouse rollover?

Create a folder for the pictures on your local drive and move the files:

1. 1. Prepare two photos of the same pixel dimensions to be used on the page.
   

2. 2. Open your local site directory in your finder.
   

3. 3. Navigate down through the folders to where your “Main Sitename Folder” is.
   

4. 4.Create a new folder “pics” (or whatever name you like) in that folder.
   

5. 5. Place the two picture files in this pics folder.
   

6. 6. In the finder, make note of the width and height as given in the Get Info dialog box for the files.
   

Insert the snippet code into your iWeb page:

7. 7. At the bottom of the iWeb window, select Web Widgets > HTML Snippet. A box will appear on your page.
   

8. 8. Paste the following snippet into the dialog box:
   

<img src="https://your_URL/pics/image_first.jpg" width="288" height="192" onmouseout="src='http://your_URL/pics/image_first.jpg'" onmouseover="src='https://your_URL/pics/image_second.jpg'"/>

9. 9. Edit the snippet HTML by substituting your own URL: your_URL, file folder name: pics and file names: image_first.jpg and image_second.jpg that were added in the first section above. image_first.jpg will appear first and moving the mouse over it will change to image_second.jpg. Change the width and height pixel dimensions to match your own pictures.
   

10. 10. Save your page and publish.
    

After publishing you can view and test the page. Note that it may be dragged around your page however you like. To add additional pictures you can copy and paste the same object and edit the snippet to match the other rollover targets. A frame may be added by drawing a text box around the picture and with the Inspector > Graphic, set the stroke to Picture Frame and choosing the desired style and color. Be sure to bring the picture to the front by selecting it and choose Arrange > Bring to Front, otherwise the mouseover will not work.