HTML Basics:
Replace Image

Step-by-Step: Replace Image in FPX

---

What you will learn:

to replace an image using a dialog to add ALT text using a dialog to replace an image by changing SRC to add ALT text in code

---

 Start with:  , hector9.htm, resource files

To reduce the loading time you should use images that are already the size you need. With a graphics program you can reduce the size of an image and save it as a new file. In your web folder you will find alternate images that have already been resized.

Each image should have ALT text which tells what the image is or what its function is. You can include descriptions of the image if that is important.

Replace Image: Dialog

In the Image Properties dialog you can change the Image Source.

1. Right click on the photo of Hector and Carla.
    
2. From the popup menu select  Image Properties....
   
    
3. Click the Browse button beside the textbox Image Source. The Image Properties dialog opens.
    
4. Click on the Browse button of the Image Properties dialog and the Image dialog appears, showing the contents of the web folder. If necessary, navigate to the folder that holds your resource files for this project.
    
5. On the dialog toolbar, click on the Details button to show more information about these files. If necessary, click on the Name heading to sort the files into alphabetic order.

   

6. Compare the sizes of carla.jpg and carla2.jpg and also other similar pairs of images in this folder.
    
7. Select carla2.jpg and click the Open button. Then click on OK to close the Image dialog. In the Image Properties dialog,  Image Source: is now carla2.jpg

---

Add ALT Text: Dialog

1. In the Text: textbox, type  Hector and Carla . This is the alt text that will show in the browser until the image loads. Text reader software will read these words.
    
2. Click on OK. The image replaces the previous one on the page.
   
    
3. Look at the estimated loading time on the Status bar. (This time assumes using a 28.8 modem.) It is now down to 77 seconds from 92 seconds! Quite a difference! This shows why you should always use an image that is the actual size you need.

---

Replace Image: Code

To change an image you can open HTML view and change the SRC attribute of the IMG tag.

1. Open the HTML view.
    
2. Scroll to the second IMG tag.
    
3. Change the file name from  ricardo.jpg  to  ricardo2.jpg .

---

Add ALT Text: Code

1. Type  alt="Ricardo"  inside the IMG tag for  ricardo2.jpg . Be careful to leave a space between each of the attribute/value combinations.
    
2. Close the HTML view.
    
3. Check the load time. It is down to 35 seconds!
    

---

Replace the Rest

1. Use the method of your choice to replace rosa.jpg with rosa2.jpg, pyramids.gif with pyramids2.gif, and china.jpg with china2.jpg.
    
2. Add appropriate ALT text for each image. Check the loading times after each replacement.

   The loading time has dropped to 18 seconds! An acceptable time. Of course, you are not actually finished the page yet!
    

3. Save  [hector10.htm].