home > web design > photo swap with JavaScript

Photo-swapping in-class exercise

printable version (.pdf)

We’ll use Photoshop Elements to create a couple of thumbnail images, then Dreamweaver to present them in a webpage with user-activated JavaScript to swap photos in layout.  Here’s an example of what your page might look like:
http://www.pages.drexel.edu/~corseel/graphics/whales.html.

Create thumbnails

  1. Download 3 photos (splash, tail, and spy) to LOCAL site “info652\images” folder (right-click on link and “save link as” or “save target as,” depending on your browser), from:
    http://www.pages.drexel.edu/~corseel/graphics/
  2. Launch Photoshop Elements and open tail.jpg and spy.jpg (from where you just stored them)
  3. Create a thumbnail (150x110 pixels) for each tail.jpg and spy.jpg
    1. Either:
      1. Try Image menu, resize (only change the pixel dimensions; if grayed out, check “resample” box); or
      2. Try Rectangular marquee, pre-set to correct size (change mode to “fixed”; 150x110 pixels); Copy; Create new document with 150x110 pixel size (File menu; New); Paste
    2. “Save for web” as tail-sm.jpg and spy-sm.jpg, also in LOCAL site, “info652\images” folder.  You should now have five new .jpg files in your local “info652/images” folder (the three originals, plus the two new thumbnails)

Create new page from template

  1. In Dreamweaver, with preferences and site set up, from File menu, select New
  2. Click Templates tab, choose “colx2”; confirm “Update page” is checked, click create
  3. From File menu, select Save As and save as whales.html in your site
  4. Update doc title in design view
  5. Update or remove breadcrumb navigation line
  6. Add h1 text about whales
  7. Save and upload all to dunx1 (upload all 5 photos, plus whales.html)

Insert image

  1. IMPORTANT: Confirm that image files are in your /652/images folder!
  2. Place cursor in left column of document
  3. Click “Insert Image” button (it’s a picture of a tree) insert image iconOR select Image from Insert menu
  4. Browse to images folder and select one thumbnail; click OK
  5. Always add <alt> text; click OK
  6. Add 2nd thumbnail under first
  7. Give both thumbnails a “name” attribute (perhaps “sm1” and “sm2”)
  8. Add large “splash.jpg” to main section of page (“name”=big)

***On the property inspector, the “name” attribute for images is here (unlabeled box with text “sm1”):
DW "name" box
Your page should now look something like this:
DW preview page

JavaScript behaviors

We want a mouseover on a small photo to display its larger version in the big photo area, so we’ll add JS behaviors to both small photos.

  1. In Dreamweaver, with whales.html open for editing, open the Behaviors panel from the Window menu
  2. Select the element that will be used to trigger the behavior: the thumbnail “tail” photo (make sure all 3 photos have valid “name” attribute)
  3. Click the plus sign in Behaviors panel to add “Swap Image”
  4. Select image: “big” (that’s where the new image will appear)
  5. Set source to: “tail.jpg”
  6. Confirm that “preload” and “restore” are both checked; click okay
  7. Save whales.html
  8. Preview in browser to confirm all is as expected
  9. Repeat for 2nd thumbnail; save
  10. Examine XHTML source to see JavaScript generated by Dreamweaver

Finally

  1. Confirm your new page has a good title
  2. Add attribution to NOAA, linked to their site
  3. Upload whales.html, plus all FIVE photos to dunx1
  4. Check your page from http://www.pages.drexel.edu/~username/652/whales.html