 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.

Slides:



Advertisements
Similar presentations
Working with Images and HTML
Advertisements

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques ©2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
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.
Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.
Chapter 5 Creating an Image Map
Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.
Chapter 5 Creating an Image Map.
Image Maps and Graphics Internet Basics and Far Beyond! Mrs. Wilson.
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.
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.
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.
 You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. 
Web Design I Spring 2009 Kevin Cole Gallaudet University
HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:
© 2004, Robert K. Moniot Chapter 5 Introduction to HTML, Continued.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
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.
 A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished.
Images & Image Maps 16 th February. Images & Image Maps Web authors can add icons, logos and high impact images to their pages Images enhance web pages.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Chapter 12 FRAMES. HOW FRAMES WORK When you view a framed page in a browser, you are actually looking at several HTML documents at once. The key to making.
HTML Project 4 Creating an Image Map.
Creating Links – Lesson 31 Creating Links Lesson 3.
Graphics Basics Two forces are always at odds when you post graphics and multimedia on the Internet. Your eyes and ears want everything to be as detailed.
1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.
_______________________________________________________________________________________________________________ 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.
Site Development Foundations © 2004 ProsoftTraining All rights reserved.
Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.
Week 41 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom
Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory.
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.
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.
  This is a different use of the anchor tag; it simply gives a name to the specific point on the page where the tag occurs. The tag must be included,
Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.
REEM ALMOTIRI Information Technology Department Majmaah University.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
MSc Publishing on the Web Week 4 Image Maps. Aims and Objectives Discover what are image maps To understand the different types of image map To understand.
Chapter 5.   A special type of inline image in which one or more areas is a hotspot (clickable) Image Map.
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.
Chapter 4 HTML Tags. HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write.
Image mapping in HTML Please use the speaker notes for additional information.
Chapter 6 Frames and Image Maps Frame sets and frames Image Maps.
HTML III ECT 270 Robin Burke.
Images, Links and Multimedia
Creating Links – Lesson 3
Image Maps.
Graphics (Characteristics 1)
HTML Image Maps Teacher: Ms. Olifer.
Introduction to HTML: Image Maps
Lesson 7: Video, Audio and Image Techniques
Creating an Image Map.
Module 05: Building ASP .NET Applications
Project 4 Creating an Image Map.
Note this is the page I link to.
Presentation transcript:

 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 image can be made into an imagemap.  An imagemap is an image on a Web page that leads to two or more different links, depending on which part of the image is clicked. Modern Web browsers use client- side imagemap, but you can also create server-side imagemaps for compatibility with old browsers.

 The first thing I must say about images is that you probably won’t need – or want- to use them! It’s almost always easier, more efficient, and more reliable to use several ordinary images, placed right next to one another, with a separate link for each image.  When would you want to use an image map, then? Only when the parts of an image you want to link are so numerous or oddly arranged that it would be a big hassle to chop the image into smaller images.

 To make any type of imagemap, you need to figure out the numerical pixel coordinates of each region within the image that you want to turn into a clickable link.  An easy way to do this is to open the image with Paint and watch the coordinates at the bottom of the screen as you use the rectangle selection tool to select a rectangular region of the image.

 Once you have the coordinates written down, you're ready to create an HTML imagemap. Type the following just after the tag in your Web Page: ›  Now you need to type tag for each region of the image.

 Each tag has three attributes: › shape indicates whether the region is a rectangle (shape=“rect”), a circle=“circle”, or an irregular (shape=“poly”) › coords gives the exact pixel coordinates for the region. For rectangles, give the x,y coordinates of the top-left corner followed by the x,y coordinates of the bottom right corner. For circles, give the x,y center point followed by the radius in pixels. For polygons, list x,y coordinates of all the corners, in connect-the-dots order.

 Each tag has three attributes: › href specifies the page to which the region links. You can use any address or the name that you would use in an ordinary link tag.  After the tags, you are done defining the imagemap; insert a closing tag.  To place the actual imagemap on the page, you use an ordianry tag and add a usemap attribute: ›  Use the name you put in the tag (and don’t forget the # symbol). It is best to include the width and height attributes for any image on a Web page.

TagAttributeFunctions Inserts an image into the document. SRC="..."The URL of the image. USEMAP="..."The name of an image map specification for client-side image mapping. Used with and.... A client-side image map, referenced by. Includes one or more tags. Defines a clickable link within a client-side image map. SHAPE="..."The shape of the clickable area. Currently, RECT, POLY, and CIRCLE (or ROUND) are the valid options. COORDS="... " The left, top, right, and bottom coordinates of the clickable region within an image. HREF="..."The URL that should be loaded when the area is clicked.