introduction to imagemaps n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to ImageMaps PowerPoint Presentation
Download Presentation
Introduction to ImageMaps

Loading in 2 Seconds...

play fullscreen
1 / 5

Introduction to ImageMaps - PowerPoint PPT Presentation


  • 96 Views
  • Uploaded on

HOME. CALENDAR. ASSIGNMENTS. LINKS. GOOGLE. Introduction to ImageMaps. Imagemaps allow you to create highly stylized links by placing them within an image. Imagemaps specify “hot spots” within an image that are clickable.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introduction to ImageMaps' - cameo


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introduction to imagemaps

HOME

CALENDAR

ASSIGNMENTS

LINKS

GOOGLE

Introduction to ImageMaps
  • Imagemaps allow you to create highly stylized links by placing them within an image.
  • Imagemaps specify “hot spots” within an image that are clickable.
  • Imagemaps have two components: the image, and the map specifying the hotspots.
  • We’ll use this example:
the img and map tags
The <img> and <map> tags
  • Images are tied to specific image maps using names in the tags.
  • The image requires a usemap parameter with the name of the map <img src="imap.jpg" width=200 height=292 usemap="#nav">
  • The map describes a set of areas that are clickable
    • Rect: rectangular areas require x,y coordinates for the top left and bottom right coordinates.
    • Circ: circular areas require an x,y coordinate for the center, and a value for the radius.
    • Polygon: describes any polygon using s set of x,y coordinates.
  • The unit of measure is the pixel.
the map tag
The <map> tag
  • The map describes a set of areas that are clickable
    • Rect: rectangular areas require x,y coordinates for the top left and bottom right coordinates.
    • Circ: circular areas require an x,y coordinate for the center, and a value for the radius.
    • Polygon: describes any polygon using s set of x,y coordinates.
  • The unit of measure is the pixel, so you should
    • Create the image using a specific size in pixels, OR
    • Force the image size using the ‘height’ and ‘width’ parameters of the <img> tag.
  • The map tag receives a name matching the name called out in the <img> tag.
imagemap example
Imagemap Example

<img src="imap.jpg" width=200 height=292 usemap="#nav">

<map name="nav">

<area shape="rect" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175home.html" coords="0, 0, 200, 35" target="display">

<area shape="rect" coords="0, 36, 200, 70" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175calendar.html" target="display">

<area shape="rect" coords="0, 71, 200, 105" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175assignments.html" target="display">

<area shape="rect" coords="0, 106, 200, 140" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175links.html" target="display">

<area shape="circ" coords="100, 210, 70" href="http://www.google.com" target="display"

  • </map>
imagemap example1
Imagemap Example
  • http://www.cs.ucf.edu/courses/cgs3175/example/cgs3175imagemap.html