Javascript Rollover Effect

Photo setup

1– Download the dogs.jpg file from the location given to you by the instructor. Note the dimensions of the file. It should be 600 pixels wide by 450 pixels high.

2 – Open up dogs.jpg with Gimp, then select the “crop or resize image” tool and select the Crop radio button. Within the image, select the left most section with the following attributes: originX: 0, originY: 0, width: 200, height: 450. Crop and use the SAVE AS option. Name the file part1color.jpg.

3 – Repeat step 2 using the following values: originX: 200, originY: 0, width: 200, height: 450, filename: part2color.jpg.

4 – Repeat step 2 using the following values: originX: 400, originY: 0, width: 200, height: 450, filename: part3color.jpg.

5 – Return to dogs.jpg and select Tools -> Color Tools -> Hue/Saturation. Set saturation to -100 and use the SAVE AS option. Name the file dogsbw.jpg.

6 – Perform steps 2, 3 and 4 on dogsbw.jpg. Make sure to originX, originY, height and width values are exactly the same and save the results as part1bw.jpg, part2bw.jpg and part3bw.jpg respectively.

7 – In Gimp, select File -> New, Specify the width as 200px and the height as 450px. Under Advanced Options, select Fill with Transparency -> OK. In the untitled window which pops up, select Dialog -> Layer, then Layer -> New Layer. Rename the new layer bw and click OK.

8 – Open up part1bw.jpg in Gimp. In the part1bw.jpg window, choose Select -> All, then Edit -> Copy. Select the layer called bw in the untitled window, then choose Edit -> Paste, then Layer -> Anchor Layer. Next, choose Layer -> New Layer, name the layer Color and click OK.

9 – Close part1bw.jpg without saving any changes, then open part1color.jpg. In the part1color.jpg window, choose Select -> All, then Edit -> Copy. Select the layer called color in the untitled window, then choose Edit -> Paste, then Layer -> Anchor Layer. Close part1color.jpg without saving any changes.

10 – With the color layer selected in the untitled window, use the Intelligent Scissors tool to highlight one of the dogs. See the instructor example for details. When the “marching ants” effect appears, choose Select -> Invert, then Edit -> Cut. You should now see a black and white photo with one dog in color. Choose File -> Save As and call the file part1roll.jpg.

11 – Repeat steps 7 through 10, replacing all instances of part1 with part2.

12 - Repeat steps 7 through 10, replacing all instances of part1 with part3.

HTML Setup

1 – Create an html document called dogs.htm. Insert a centered h1 tag containing the phrase “Dogs Playing Poker”. Below it, insert a centered table with one row and three columns. Set the border, cellpadding and cellspacing to zero. Below the centered table, place a centered h3 tag with the phrase “Javascript Rollover Effect”.

Javascript

1 - Go to http://javascript.internet.com/generators/preload-images.html. Insert "part1bw.jpg" in the #1 entry, insert "part1roll.jpg" in the MOI1 entry and "dog1.htm" in the URL1 entry. Repeat this procedure for the next 6 entries, replacing the entries with 2 and 3, respectively. Then click "Done. Make my script."

2 - Copy the script to /script section generated and paste it in the head section of dogs.htm. Copy the first a and /a section generated and paste it inside the first td and /td tag. Copy the second and third set of a tags to the second and third set of td tags respectively.

3 - Save the html file and view the results.










		Javascript Rollover Effect Photo setup 1– Download the dogs.jpg file from the location given to you by the instructor. Note the dimensions of the file. It should be 600 pixels wide by 450 pixels high. 2 – Open up dogs.jpg with Gimp, then select the “crop or resize image” tool and select the Crop radio button. Within the image, select the left most section with the following attributes: originX: 0, originY: 0, width: 200, height: 450. Crop and use the SAVE AS option. Name the file part1color.jpg. 3 – Repeat step 2 using the following values: originX: 200, originY: 0, width: 200, height: 450, filename: part2color.jpg. 4 – Repeat step 2 using the following values: originX: 400, originY: 0, width: 200, height: 450, filename: part3color.jpg. 5 – Return to dogs.jpg and select Tools -> Color Tools -> Hue/Saturation. Set saturation to -100 and use the SAVE AS option. Name the file dogsbw.jpg. 6 – Perform steps 2, 3 and 4 on dogsbw.jpg. Make sure to originX, originY, height and width values are exactly the same and save the results as part1bw.jpg, part2bw.jpg and part3bw.jpg respectively. 7 – In Gimp, select File -> New, Specify the width as 200px and the height as 450px. Under Advanced Options, select Fill with Transparency -> OK. In the untitled window which pops up, select Dialog -> Layer, then Layer -> New Layer. Rename the new layer bw and click OK. 8 – Open up part1bw.jpg in Gimp. In the part1bw.jpg window, choose Select -> All, then Edit -> Copy. Select the layer called bw in the untitled window, then choose Edit -> Paste, then Layer -> Anchor Layer. Next, choose Layer -> New Layer, name the layer Color and click OK. 9 – Close part1bw.jpg without saving any changes, then open part1color.jpg. In the part1color.jpg window, choose Select -> All, then Edit -> Copy. Select the layer called color in the untitled window, then choose Edit -> Paste, then Layer -> Anchor Layer. Close part1color.jpg without saving any changes. 10 – With the color layer selected in the untitled window, use the Intelligent Scissors tool to highlight one of the dogs. See the instructor example for details. When the “marching ants” effect appears, choose Select -> Invert, then Edit -> Cut. You should now see a black and white photo with one dog in color. Choose File -> Save As and call the file part1roll.jpg. 11 – Repeat steps 7 through 10, replacing all instances of part1 with part2. 12 - Repeat steps 7 through 10, replacing all instances of part1 with part3. HTML Setup 1 – Create an html document called dogs.htm. Insert a centered h1 tag containing the phrase “Dogs Playing Poker”. Below it, insert a centered table with one row and three columns. Set the border, cellpadding and cellspacing to zero. Below the centered table, place a centered h3 tag with the phrase “Javascript Rollover Effect”. Javascript 1 - Go to http://javascript.internet.com/generators/preload-images.html. Insert "part1bw.jpg" in the #1 entry, insert "part1roll.jpg" in the MOI1 entry and "dog1.htm" in the URL1 entry. Repeat this procedure for the next 6 entries, replacing the entries with 2 and 3, respectively. Then click "Done. Make my script." 2 - Copy the script to /script section generated and paste it in the head section of dogs.htm. Copy the first a and /a section generated and paste it inside the first td and /td tag. Copy the second and third set of a tags to the second and third set of td tags respectively. 3 - Save the html file and view the results. BACK


	Home \| Portfolio \| Blog \| Podcast \| Misc \| Contact \| Sitemap

Javascript Rollover Effect

Photo setup

HTML Setup

Javascript

BACK