Image Map You can define a region on your image as clickable. Add usemap=“mapname” parameter to your image. Add a tag to your html where name of map tag.

Slides:



Advertisements
Similar presentations
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 2: Developing a Web Site.
Advertisements

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques ©2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.
HTML Images. The Image Tag and the Src Attribute  In HTML, images are defined with the tag.  In HTML, images are defined with the tag.  The tag is.
Chapter 5 Creating an Image Map.
Image Maps and Graphics Internet Basics and Far Beyond! Mrs. Wilson.
LIST- HYPERLINK- IMAGES
1 Setting up Your Website Using HTML and JavaScript to Develop Websites.
Image Maps. 2 What it Does n Different parts of the image activate different hyperlinks.
Hyperlinks Types of Links Link to the places in the same page Link to pages within the same site Link to the system –Caution: Will not work without.
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.
ImagesImages. Review and tag Links (relative, absolute, mailto) Open Links in a new window (target attribute)
 2003 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
Hyperlinks. Working with Linked Images  A standard practice on the Web is to turn the Web site’s logo into a hypertext link pointing to the home page.
HTML B OOT C AMP Chapter 6 Links and Webs Kirkwood Continuing Education © Copyright 2015, Fred McClurg All Rights Reserved.
Web Design I Spring 2009 Kevin Cole Gallaudet University
© 2004, Robert K. Moniot Chapter 5 Introduction to HTML, Continued.
+ Web Design Terminology Digital Communications III- Frameworks-2.1 Terminology HTML Domain Name Hot Spot Site Maps.
1 XHTML Forms A form is the mechanism to –Collect information from a browser user –Transmit collected information from a browser to a server HTML/XHTML.
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.
Create an Image Map Web Publishing & Design. Hot Spots  hot spot: An area on an object containing a hyperlink. An entire object can be a single hot spot,
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Chapter 5 Creating an Image Map.
Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.
Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
+ Web Design Terminology Digital Communications III- Frameworks-2.1 Terminology HTML Domain Name Hot Spot Site Maps.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 2 Outline frameset Element 5.10 Nested frameset s.
1 Week Four– Advance HTML 2 Dr. Fadi Safieddine. 2 Lecture Content Basic HTML Tables Using based Feedback form Creating and Using Image Maps Nested.
Lesson 8. Dividing the screen horizontally Horizontal Frames.
Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.
Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.
INTRODUCTORY Tutorial 6 Using Links on a Web Page.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Week 41 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom
Handling Image & Animation Using JavaScript HTML tag to display image: More options:
 You can also divide an image into regions that link to different documents depending on where someone clicks.  This is called an imagemap, and any.
Tables Attributes Image Map.  Tables are defined with the tag.  A table is divided into rows with the tag.  Each row is divided into data cells with.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
Basic Webpage Design Mark-up html document with images.
1 Mapping Coordinates Find the x- and y- coordinates for the images, relative to the x-axis and y-axis In a coordinate pair, the first number is the x-coordinate.
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
REEM ALMOTIRI Information Technology Department Majmaah University.
Links and Images. Links HTML uses a hyperlink to link to another document on the Web A hyperlink can be either text or a picture Links are created with.
 2003 Prentice Hall, Inc. All rights reserved. Outline Chapter 2 HTML (Hypertext Markup Language) Part II.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
Chapter 5.   A special type of inline image in which one or more areas is a hotspot (clickable) Image Map.
ITIS 1210 Introduction to Web-Based Information Systems Chapter 22 Image Maps and Interactive Forms.
Linking Using Image Maps. What is an Image Map? An image map is an image in which several areas of an image are linked to different sites The areas of.
CS 200 Image Maps. Goal for Image Map Divide one image into several regions Each region links to a different place.
Images were sourced from the following web sites: Slide 2:commons.wikimedia.org/wiki/File:BorromeanRing...commons.wikimedia.org/wiki/File:BorromeanRing...
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 2 Creating Links.
Chapter 6 Frames and Image Maps Frame sets and frames Image Maps.
CS-3432 Electronic Commerce Lecture – 9 Sikandar Shujah Toor
CSE 102 Introduction to Web Design and Programming
Programming the Web using XHTML and JavaScript
Image Maps.
HTML Image Maps Teacher: Ms. Olifer.
Basic HTML and Embed Codes
Introduction to HTML: Image Maps
Lesson 7: Video, Audio and Image Techniques
HTML Links.
Pertemuan 1b
Creating an Image Map.
Project 4 Creating an Image Map.
Note this is the page I link to.
Presentation transcript:

Image Map You can define a region on your image as clickable. Add usemap=“mapname” parameter to your image. Add a tag to your html where name of map tag is “mapname”. Three kinds – Rectangle – Circle – Polygon

Image Map Parameters of map: – Name: name of image map. Parameters of area: – Shape: shape of area: rect, circle, poly – Coords: coordinates (next slide) – Alt: Alternative text. – Href: link.

Shape Coordinates Shape types and coordinates: – shape=rect coords="left-x, top-y, right-x, bottom- y" – shape=circle coords="center-x, center-y, radius" – shape=poly coords="x1,y1, x2,y2, x3,y3,..." X Y

Add an image map to your html Add above image to the top of your page and display it. Add a map tag to somewhere in body of your html, with a name “logosmap”. Add a parameter to your image to use this map: usemap=“#logosmap"

Add an image map to your html Add a rectangle with coordinates “3, 3, 96, 74” with alternative text “Adidas Web Site”, with a link and target to Sports window. See if it works. Do the same thing to get the following result.