Example
  1. Go to the class home page and click on the photo links.

  2. Find an image of yourself or of someone who has given you permission to use their image.

  3. Click on the image to open large in new window.

  4. Drag the image from the browser to the desktop.

  5. Drag the image from the desktop over the Photoshop icon on the dock


  6. When the image opens in Photoshop, find the Layers palette F7


  7. Click on the background and press +J to make a copy

  8. Make the image smaller. Go to Image>Image Size


  9. Go to Filter>Liquify


  10. Play around. When you get something you like, press OK

  11. Select both layers in the Layers palette
    select_both_layers.png

  12. You want to save each layer as an independent jpeg file. To do that, select File>Scripts>Export Layers to Files


  13. Click on the Browse button and navigate to your web:images folder.


  14. Click on the New Folder button in the lower left corner of the dialog window

  15. Name the New Folder rollover


  16. To select the folder, click on the choose button


  17. To get the script to run, click on the Run button

  18. Save the original Photoshop file and close Photoshop.


The XHTML & Javascript part

  1. Create a new web document +CTRL+N.
    • Make sure XHTML 1.0 Strict is selected

    • Give your document a title (This is what appears on the top of your browser).

    • Press OK


  2. Save the document in your web folder as rollover1.html.


    To preview your page press +CTRL+P



  3. This is what you should see:
    1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Your Title</title>
    <meta  name="generator" content="BBEdit 7.0.4" />
</head>
<body>
	
</body>
</html>


  4. Navigate to the <body> tag

  5. Replace this:
    <body>
    with: 
    <body style="margin:10%;">
    <p style="text-align:center;">


  6. Navigate to the </body> tag and add a closed </p> tag just before it. 

    1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Your Title</title>
    <meta  name="generator" content="BBEdit 7.0.4" />
</head>
<body style="margin:10%;">
    <p style="text-align:center;">
	</p>
</body>
</html>
  7. You want to place the default image inside the <p></p> tags. Click inside them and press +CTRL+I. Navigate to your rollover folder and select the background image

  8. Put your cursor inside the img tag:


  9. Add the following to the tag: 
    id="roll"



    This line will allow you to address the image in Javascript
  10. Navigate to the <head></head> section (lines 4-8 in my document)

  11. Add a Javascript declaration: 
    <script type="text/javascript">
    //<!--
	
    //-->
</script>

    The second line of the declaration comments out the script. If you do not include these comments when your browser validates the document, it may see the script as invalid XHTML code.
  12. Add the following lines: 
    var image1 = new Image();
image1.src = "image_address_of_the_rollover_image.jpg";
var image2 = new Image();
image2.src = "_default_image_address.jpg'";
    My addresses were: 
    images/rollover/_0000_Layer 1.jpg
    
images/rollover/_0001_Background.jpg
  13. Add the following functions: 
    function rollOver(){
    document.getElementById('roll').src=image1.src;
}
function rollOut(){
    document.getElementById('roll').src=image2.src;
}



  14. Surround the img tag with this anchor tag: 
    <a href="#" onmouseover="rollOver();"onmouseout="rollOut();">
</a>


  15. Save the document.


Linking your work

  1. Link to and from your home page.
    1. Open index.html

    2. Navigate to your table

    3. Copy the last row: 
      <tr>
	<td class="assignment"><a href="../../../../index.html">Homepage</a></td>
	<td class="description">BBEdit and Photoshop</td>
	<td class="date">9/20/05</td>
</tr>
      and paste beneath it: 
      <tr>
	<td class="assignment"><a href="../../../../index.html">Homepage</a></td>
	<td class="description">BBEdit and Photoshop</td>
	<td class="date">9/20/05</td>
</tr>
<tr>
	<td class="assignment"><a href="../../../../index.html">Homepage</a></td>
	<td class="description">BBEdit and Photoshop</td>
	<td class="date">9/20/05</td>
</tr>


    4. Change the first column to: 
      	<td class="assignment">Rollover</td>


    5. Change the second column to: 
      	<td class="description">Photoshop, Image Ready</td>


    6. Change the third column to: 
      	<td class="date"></td>


    7. In cell 1 of this row set up an anchor container (a link) around the text you added, linking it to the rollover page in your web folder


      1. Hilite the word Rollover
      2. Press +CTRL+A
      3. Click on the File button
      4. Navigate to the rollover page in your web folder
      5. Click on the Choose button
      6. Click on the Apply button