1. Week 41 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom markb@stanford.edu http://www.stanford.edu/people/markb/ Course Web Site: http://www.stanford.edu/group/csp/cs38/

2. CS38: Graphics Production for the Web Week 4Slide 2 of 12 Week 4 Agenda ImageMaps Slicing

3. CS38: Graphics Production for the Web Week 4Slide 3 of 12 What is an image map? Image maps allow a webmaster to take an image and define more than one hyperlink for the image. Each hyperlinked section is called a "hotspot". To define a hotspot, webmasters open the image in a graphics program and record the coordinates of the points corresponding to the hotspot boundaries. Some Examples: –http://en.wikipedia.org/wiki/The_Club_(Literary_Club) –http://tinyurl.com/northamerica –http://commons.wikimedia.org/wiki/File:US_Locator_Blank.svg

4. CS38: Graphics Production for the Web Week 4Slide 4 of 12 Map tags

5. CS38: Graphics Production for the Web Week 4Slide 5 of 12 rect Coordinates refer to the x/y coordinates for the upper left and the lower right coordinates for the rectangle.

6. CS38: Graphics Production for the Web Week 4Slide 6 of 12 circle The x/y coordinates refer to the center of the circle. The r refers to the size of the radius (in pixels).

7. CS38: Graphics Production for the Web Week 4Slide 7 of 12 polygon Coordinates refer to the x/y coordinates for as many are needed to define the polygon.

8. CS38: Graphics Production for the Web Week 4Slide 8 of 12 Class Exercise 1.Graphics Production & ImageMaps Exercise

9. CS38: Graphics Production for the Web Week 4Slide 9 of 12 Slicing Web pages with very large graphics take longer to load than web pages with smaller graphics. One way to make a web page with a large graphic load faster is to take the large image and break it up into many smaller pieces. This process is known as slicing.

10. CS38: Graphics Production for the Web Week 4Slide 10 of 12 Slicing Examples http://physics.stanford.edu http://www.rochess.com/HTML/tables/sliced/

11. CS38: Graphics Production for the Web Week 4Slide 11 of 12 Class Exercise Slicing Exercise

12. CS38: Graphics Production for the Web Week 4Slide 12 of 12 Next Week JavaScript – Rollovers, pop-ups, etc. Animations