Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.02.26.

Slides:

Advertisements

Similar presentations

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques ©2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.

Advertisements

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.

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.

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.

COS 125 DAY 15. Agenda Second Capstone Progress Report Due Mar 24 Assignment #4 assigned –Due Thursday, March 24 Exam #3 will be on March 24 –Castro Chaps.

ImagesImages. Review and tag Links (relative, absolute, mailto) Open Links in a new window (target attribute)

Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques.

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.

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.

Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

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

Web Design I Spring 2009 Kevin Cole Gallaudet University

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

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.

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.

Discussion on Image Software. Things to Remember Case Sensitivity Different web browsers render the HTML content differently depending on browser (I.E.

Basic Webpage Design Mark-up html document with images.

Introduction to XHTML 1 Chapter 4 Introduction to XHTML: Part 1 Reference From: Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg.

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.

Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.

For the World Wide Web.  Gary Hayward is an amateur photographer and digital camera enthusiast. He has decided to create a website named CAMshots, where.

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

When I am embedding under, I do not close the li tag until I complete the items that are embedded. Looking at outlines.

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.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 2 Creating Links.

Image mapping in HTML Please use the speaker notes for additional information.

Chapter 6 Frames and Image Maps Frame sets and frames Image Maps.

Web Development & Design Foundations with HTML5 8th Edition

CSE 102 Introduction to Web Design and Programming

Programming the Web using XHTML and JavaScript

Spring 2009 Kevin Cole Gallaudet University

Session V - Chapter 9 How to Work with Images

ITI 133 HTML5 Desktop and Mobile Level I

Graphics (Characteristics 1)

HTML Image Maps Teacher: Ms. Olifer.

Events Comp 205 Fall 2017.

Basic HTML and Embed Codes

Introduction to HTML: Image Maps

How to work with images and icons Murach's HTML and CSS, 4th Edition

Lesson 7: Video, Audio and Image Techniques

Lesson 4: Hyperlinks.

Creating an Image Map.

Project 4 Creating an Image Map.

Note this is the page I link to.

Presentation transcript:

Web Design I Spring 2009 Kevin Cole Gallaudet University

Image Maps Can link shapes in an image to different URLs Each shape is an area tag Area tags are inside a map tag Shapes can be rectangle (rect), circle (circ), or polygon (poly)‏ rectcoords="left, top, right, bottom" circcoords="center-x, center-y, radius" polycoords="x1,y1, x2,y2,...,xn,yn"

Examples (20,50)‏ (120,100)‏ shape="rect" coords="20,50,120,100" (10,200)‏ 50 shape="circ" coords="10,200,50" (8,350)‏(40,350)‏ (24,300)‏ shape="poly" coords="8,350, 24,300, 40,350"

Image Map example <img src="team-photo.jpg" alt="Team photo" usemap="#members" /> <area shape="poly" alt="goalie" title="goalie" coords="82,232, 75,250, 70,260, 85,240" href="goalie-bio.html" /> <area shape="circ" alt="Puck, the mascot" title="Puck, the mascot" coords="332,100,30" href="puck-bio.html" />

Image Map example <img src="team-photo.jpg" alt="Team photo" usemap="#members" /> <area shape="poly" alt="goalie" title="goalie" coords="82,232, 75,250, 70,260, 85,240" href="goalie-bio.html" /> <area shape="circ" alt="Puck, the mascot" title="Puck, the mascot" coords="332,100,30" href="puck-bio.html" />

Use a photo editor Defining the coordinates (coords) for your areas is difficult without photo editing software The GIMP is a free application similar to Photoshop. The GIMP and Photoshop both provide tools for creating image maps. CAUTION: Both create image maps that are non-validating. You will need to make minor adjustments to make them validate correctly.

Valid image maps All parts must be inside a block element (for example, inside... )‏ tags are self-closing (no matching end tag) and appear inside... tags. requires shape=, coord=, alt=, and href= attributes. id= in should match usemap= in General structure: