ITIS 1210 Introduction to Web-Based Information Systems Chapter 22 Image Maps and Interactive Forms

Image Maps  Image map  Static image with “clickable” areas – “hot spots”  Acts just like a link  Click on the area, a new Web page appears  Consists of  Image overlaid with …  Image map coordinates

Image Maps  Image map coordinates file  Defines hot spots  Uses  X,Y coordinates  Standard shapes  Basic process  Display image  Overlay image with coordinate map  Browser processes hot spot links

Image Maps </map>

Image Maps  Rectangle coords=“xl, yu, xr, yl”  Circle coords=“xc, yc, r”  Polygon coords=“x1, y1, x2, y2, … xn, yn”

Image Maps  CGI  Common Gateway Interface  Communications protocol  Standard that permits the Web to communicate with other applications  Often connects a Web page with a backend database  Interaction controlled by the server

Image Maps  Coordinates of mouse click sent to server  CGI script matches mouse coordinates with image map  If match, corresponding URL forwarded to server  Server delivers Web page to browser  For example, NOAA radar

Image Maps  NOAA US Radar NOAA US Radar NOAA US Radar

NOAA Radar Maps  Scroll down to Radar and Satellite Images  Click left image  Scroll to bottom  Click bottom right image  Hover over different cities to see which radar will appear if you click

Interactive Forms  User enters data into form fields  Browser sends form data to server  CGI application passes data to appropriate software for processing  Might be a request for specific information (eBay, Amazon, etc.)  Might be login (username and password)

Interactive Forms  Bank of America Bank of America Bank of America