ITIS 1210 Introduction to WebBased Information Systems Chapter
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 id=“map_name”> <area shape=“rect” coords=“ 43, 70, 97, 120” href=“…” /> </map>
Image Maps § Rectangle coords=“xl, yu, xr, yl” § Circle coords=“xc, yc, r” § Polygon coords=“x 1, y 1, x 2, y 2, … 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 Radar Maps § Scroll down to Radar and Satellite Images § Click left image § Scroll to bottom § Click bottom right image § Hover 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 (e. Bay, Amazon, etc. ) § Might be login (username and password)
Interactive Forms § Bank of America
- Slides: 11