I. ROTATING IMAGES USING THE SWAP IMAGES BEHAVIOR

I. ROTATING IMAGES USING THE SWAP IMAGES BEHAVIOR We’ve learned how to do rollovers using a few techniques: 1. By using the “Swap image” behavior a. S...
Author: Joshua Stokes
2 downloads 0 Views 875KB Size
I. ROTATING IMAGES USING THE SWAP IMAGES BEHAVIOR We’ve learned how to do rollovers using a few techniques: 1. By using the “Swap image” behavior a. Start by placing the image that you want for the rollover in the design area. You’ll select it by clicking on it (the black bounding box will appear around it). Give it a name by using the Properties inspector, as pictured below (this is just the left side of the Properties bar). In my example, the image is called “catimage”:

b. Next, choose the “Swap Image” behavior, pictured below (it’s located under the Behaviors tab in the Tag menu):

1

c. The following menu will appear:

The image highlighted in blue is the image that you just named and selected for rollover. The “Set Source to:” box is the where you’ll put the path for the image that you want to swap out. Remember: make sure that all of these images are inside of your site folder! Make sure that “Preload images” and “Restore images onMouseOut” are checked. 2. That’s the harder way. The other two methods that we’ve used for Rollovers are under the Insert menu:

If you are inserting a rollover image, the following menu will appear:

2

In this case, you’ll just insert the image that appears when the screen loads into “Original image” and the swap image into “Rollover image.” Remember to insert your alt text; if the image is linked, enter the URL into “When clicked, Go to URL” The Navigation Bar (also available under Insert > Image Objects > Navigation Bar) is essentially just a more advanced version of the Rollover Image. The menu is below:

2. 1. 3.

4.

With this menu, you’ll create a graphical navigation menu that will appear either vertically or horizontally (depending on what you do in #4). This is basically a more complex version of the rollover image above—in this case, you can use up to four image “states” (up, down, over, over while down).

3

1. The “element” is just a button. So, let’s say you have four buttons that are going to go into your Navigation Bar (Home, About Me, Contact Me, A Little more about Me)—the first element might be called “Home.” You can call them anything you want, but what you’re saying here is that this is the first button to appear in the navigation bar. Once you’ve finished creating all of your buttons, you might decide that you want to move them around in the navigation bar. That’s what the arrows in the blue box in the screenshot above are for. 2. This will fill in automatically as you name each button. 3. These are the four image states: browse to find the image for each state (this is the work that we’ve done in Photoshop) 4. This is where you can choose whether you want the navigation bar to appear horizontally or vertically Once you’re done with everything, hit Okay and your navigation bar will appear in the design area. If you need to make changes later on, you can always go to Modify > Navigation Bar from the top menus in Dreamweaver Now for the new stuff: We can use some basic JavaScript to swap out images automatically (you see this all the time in banner ads, right? Images swap out after a certain period of time elapses). In this case, we’re going to use some script that has already been created in order to create a “slideshow” of sorts. 1. Start by inserting the first image—this is the one that will appear when the page loads. Because the script depends on knowing what things are called, we need to give these images specific IDs. In this case, we’re going to call it “rotator” (it could be anything, but we would need to change the script to reflect that). So, select the image and call it “rotator” using the Properties inspector, pictured below:

4

2. We are going to apply this behavior to the tag of the document, so select the body tag in the lower left hand corner of the document window:

3. With the tag selected, go to the Behaviors tab and choose “Swap Image” 4. Browse to find “rule2.jpg”—make sure that Preload images is checked! 5. Hit OK. We’ve just created a whole bunch of javascript up in the head of the document. 6. We’re going to insert the following script just above the tag in the of our document, so we’ll need to look into the code view: // Comma separated list of images to swap var imgs = new Array(‘images/1.jpg’, ‘images/2.jpg’, ‘images/3.jpg’, ‘images/4.jpg’, ‘images/5.jpg’ ); // delay in milliseconds between image swaps 1000 = 1 second var delay = ; var counter = 0; function preloadImgs(){ for(var i=0;i