Adding Images

Adding images to a web page can help capture a user's attention. The banner at the top of this page is an image. Adding images is easy. To add an image, go to the Insert menu and select Image.

The following Select Image Source box will be displayed. Select the image that you wish to insert and click choose. Remember to position your cursor in the location you want the image to be displayed before selecting Insert Image. Another way to insert an image is to select the image icon from the Objects Palette which will also bring up the Select Image Source box.

In addition to inserting static images, you can also create rollover images. These images appear static, but when the cursor rolls over the image, a second image is displayed. To create a rollover first insert an image.

After you have inserted the image, it is a good idea to name the image. At the end of the skill development activity on assigning rollover actions, you will see why naming images is a good idea. Note, the process of naming images here is different from saving the images. Naming images in this process is simply for a sense of structure and organization. To name an image, go to the Property Inspector. Notice the highlighted box has the name "Image 1." This is the default. Place your cursor in that box and type in the name of the image you inserted.

The Property Inspector will now display the name of the image. Now, once you begin assigning actions to your images, the process will be much easier. When you assign an action such as a rollover to an image, you must indicate which image you wish to assign the action to. You can imagine that if your page contained several images, trying to select them by the default number assigned to them rather than name would be much more difficult.

After you have inserted your image and named it in the Property Inspector, next make sure the image is active by selecting it. Now, go to the Launcher Palette and select Behaviors.

The Behaviors box will be displayed. Click on the + sign to add a behavior to your image. From the Behaviors menu select Swap Image.

The Swap Image Box will be displayed. You will need to set the source for the rollover image. Setting the source means selecting the image that will appear when you rollover the current image. To do this select Browse. Notice that the image we are assigning the rollover to is the "scijunct" image. That is the name we gave to the first image we inserted. The process of naming that image is what was described above. The scijunct image is the image that you normally see on the page, whereas, the image that will be displayed when you rollover scijunct, is the one we are selecting in the Set Source to box.

After selecting Browse, navigate and find the image you want to use as the rollover.

After you have selected the rollover image, the following screen will be displayed. This screen is indicating that scijunc2 is set as the the rollover image for scijunct. Click OK to Set Source to the image you have chosen.

Now when you move your mouse over the Science Junction image a second rollover image is displayed. Try it by mousing over the blue Science Junction image above.

| Creating Web Pages | Learning to Use Technology | Teaching With Technology |