際際滷

際際滷Share a Scribd company logo

Intro to HTML Image Maps

S
Steve Jones

The document discusses how HTML image maps use coordinate pairs to define rectangular regions of an image and link each region to a different webpage. An image map divides an image into multiple clickable areas by specifying the upper-left and lower-right coordinates of each region. It then uses these coordinate pairs in <area> tags within a <map> to associate each region with a hyperlink.

1 of 29
Intro to HTML Image MapsSteven T. JonesCopyright 2010 Steven T. Jones13/21/2010
First, We Need an ImageCopyright 2010 Steven T. Jones23/21/2010
300 Pixels Wide and 200 Pixels High (300x200) 1 3001 200Copyright 2010 Steven T. Jones33/21/2010
Giving an X Axis of 300 and a Y Axis of 200X axis: 300 pixels numbered 0-299 Y axis: 200 pixels, 0-199Copyright 2010 Steven T. Jones43/21/2010
Described with Two Pairs of Coordinates:0, 0299, 199Copyright 2010 Steven T. Jones53/21/2010
Described with Two Pairs of Coordinates:Upper left corner0, 0299, 199Copyright 2010 Steven T. Jones63/21/2010
Described with Two Pairs of Coordinates:Upper left corner0, 0LowerRightcorner299, 199Copyright 2010 Steven T. Jones73/21/2010
Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcorner299, 199Copyright 2010 Steven T. Jones83/21/2010
Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin X299, 199Copyright 2010 Steven T. Jones93/21/2010
Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin XBegin Y299, 199Copyright 2010 Steven T. Jones103/21/2010
Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin XBegin YEnd X299, 199Copyright 2010 Steven T. Jones113/21/2010
Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin XBegin YEnd XEnd Y299, 199Copyright 2010 Steven T. Jones123/21/2010
Blue Area Can Be Described in the Same Way:Copyright 2010 Steven T. Jones133/21/2010
Blue Area Can Be Described in the Same Way:Upper left cornerUpper left corner X = 0, Y = 0Copyright 2010 Steven T. Jones143/21/2010
Blue Area Can Be Described in the Same Way:Upper left corner Upper left corner X = 0, Y = 0LowerRightcornerLower rightCorner X = 99, Y = 124Copyright 2010 Steven T. Jones153/21/2010
Blue Area Can Be Described in the Same Way:Upper left corner X = 0, Y = 00,0,99,124Lower rightCorner X = 99, Y = 124Copyright 2010 Steven T. Jones163/21/2010
Coordinates Describe an HTML Map Area:<area shape="rect" coords="0,0,99,124" ... >Upper left corner X = 0, Y = 00,0,99,124Lower rightCorner X = 99, Y = 124Copyright 2010 Steven T. Jones173/21/2010
And the Yellow Area:100 2990074199Copyright 2010 Steven T. Jones183/21/2010
And the Yellow Area:100 2990074Upper LeftX = 100Y = 0100,0,299,74Lower RightX = 299 Y = 74199Copyright 2010 Steven T. Jones193/21/2010
And the Yellow Area:100 2990074Upper LeftX = 100Y = 0100,0,299,74Lower RightX = 299 Y = 74<area shape="rect" coords="100,0,299,74" ... >199Copyright 2010 Steven T. Jones203/21/2010
Green and Red Areas Too... 0,0,99,124100,0,299,74Copyright 2010 Steven T. Jones213/21/2010
Green and Red Areas Too... 0,0,99,124100,0,299,740,1250,125,99,19999,199Copyright 2010 Steven T. Jones223/21/2010
Green and Red Areas Too... 0,0,99,124100,0,299,740,125100,75100,75,299,1990,125,99,199299,19999,199Copyright 2010 Steven T. Jones233/21/2010
Green and Red Areas Too... 100 29900740124100,0,299,740,0,99,124100,75,299,1990,125,99,199199199100 2990Copyright 2010 Steven T. Jones243/21/2010
Coordinates Used in an HTML Map:<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map>Copyright 2010 Steven T. Jones253/21/2010
Coordinates Used in an HTML Map:<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map>Copyright 2010 Steven T. Jones263/21/2010
The Map Applied to the Image<img alt="imgMap (1K)" src=/slideshow/intro-to-html-image-maps/3481321/"imgMap.gif" height="200" width="300" usemap="#example" />Copyright 2010 Steven T. Jones273/21/2010
The Complete HTML<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map><img alt="imgMap (1K)" src=/slideshow/intro-to-html-image-maps/3481321/"imgMap.gif height="200" width="300 usemap="#example" />
http://www.kokomobeach.comCopyright 2010 Steven T. Jones293/21/2010

Recommended

JavaScript Basic
JavaScript BasicJavaScript Basic
JavaScript Basic
Finsa Nurpandi
油
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
Jussi Pohjolainen
油
Php string function
Php string function Php string function
Php string function
Ravi Bhadauria
油
Java script ppt
Java script pptJava script ppt
Java script ppt
The Health and Social Care Information Centre
油
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
油
Html
HtmlHtml
Html
Lakshmy TM
油
Html forms
Html formsHtml forms
Html forms
eShikshak
油
html tags
html tagshtml tags
html tags
Kunal gupta
油
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Andres Baravalle
油
Types of operators in C
Types of operators in CTypes of operators in C
Types of operators in C
Prabhu Govind
油
Key Distribution Problem in advanced operating system
Key Distribution Problem in advanced operating systemKey Distribution Problem in advanced operating system
Key Distribution Problem in advanced operating system
Merlin Florrence
油
Android Layout.pptx
Android Layout.pptxAndroid Layout.pptx
Android Layout.pptx
vishal choudhary
油
Concept of CSS part 2
Concept of CSS part 2Concept of CSS part 2
Concept of CSS part 2
Dr. SURBHI SAROHA
油
Os lab file c programs
Os lab file c programsOs lab file c programs
Os lab file c programs
Kandarp Tiwari
油
Concept of CSS unit3
Concept of CSS unit3Concept of CSS unit3
Concept of CSS unit3
Dr. SURBHI SAROHA
油
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
Maitree Patel
油
Strings IN C
Strings IN CStrings IN C
Strings IN C
yndaravind
油
CSS Positioning Elements.pdf
CSS Positioning Elements.pdfCSS Positioning Elements.pdf
CSS Positioning Elements.pdf
Kongu Engineering College, Perundurai, Erode
油
Operators in python
Operators in pythonOperators in python
Operators in python
deepalishinkar1
油
Javascript built in String Functions
Javascript built in String FunctionsJavascript built in String Functions
Javascript built in String Functions
Avanitrambadiya
油
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
油
Library functions in c++
Library functions in c++Library functions in c++
Library functions in c++
Neeru Mittal
油
Form Validation in JavaScript
Form Validation in JavaScriptForm Validation in JavaScript
Form Validation in JavaScript
Ravi Bhadauria
油
HTML iframe
HTML iframeHTML iframe
HTML iframe
raman156413
油
Hack an ASP .NET website? Hard, but possible!
Hack an ASP .NET website? Hard, but possible! Hack an ASP .NET website? Hard, but possible!
Hack an ASP .NET website? Hard, but possible!
Vladimir Kochetkov
油
java script json
java script jsonjava script json
java script json
chauhankapil
油
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
umesh patil
油
PHP COOKIES AND SESSIONS
PHP COOKIES AND SESSIONSPHP COOKIES AND SESSIONS
PHP COOKIES AND SESSIONS
Degu8
油
Chapter 6. Business and Corporate Strategy Formulation.pdf
Chapter 6. Business and Corporate Strategy Formulation.pdfChapter 6. Business and Corporate Strategy Formulation.pdf
Chapter 6. Business and Corporate Strategy Formulation.pdf
Rommel Regala
油
Antifungal agents by Mrs. Manjushri Dabhade
Antifungal agents by Mrs. Manjushri DabhadeAntifungal agents by Mrs. Manjushri Dabhade
Antifungal agents by Mrs. Manjushri Dabhade
Dabhade madam Dabhade
油

More Related Content

What's hot (20)

Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Andres Baravalle
油
Types of operators in C
Types of operators in CTypes of operators in C
Types of operators in C
Prabhu Govind
油
Key Distribution Problem in advanced operating system
Key Distribution Problem in advanced operating systemKey Distribution Problem in advanced operating system
Key Distribution Problem in advanced operating system
Merlin Florrence
油
Android Layout.pptx
Android Layout.pptxAndroid Layout.pptx
Android Layout.pptx
vishal choudhary
油
Concept of CSS part 2
Concept of CSS part 2Concept of CSS part 2
Concept of CSS part 2
Dr. SURBHI SAROHA
油
Os lab file c programs
Os lab file c programsOs lab file c programs
Os lab file c programs
Kandarp Tiwari
油
Concept of CSS unit3
Concept of CSS unit3Concept of CSS unit3
Concept of CSS unit3
Dr. SURBHI SAROHA
油
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
Maitree Patel
油
Strings IN C
Strings IN CStrings IN C
Strings IN C
yndaravind
油
CSS Positioning Elements.pdf
CSS Positioning Elements.pdfCSS Positioning Elements.pdf
CSS Positioning Elements.pdf
Kongu Engineering College, Perundurai, Erode
油
Operators in python
Operators in pythonOperators in python
Operators in python
deepalishinkar1
油
Javascript built in String Functions
Javascript built in String FunctionsJavascript built in String Functions
Javascript built in String Functions
Avanitrambadiya
油
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
油
Library functions in c++
Library functions in c++Library functions in c++
Library functions in c++
Neeru Mittal
油
Form Validation in JavaScript
Form Validation in JavaScriptForm Validation in JavaScript
Form Validation in JavaScript
Ravi Bhadauria
油
HTML iframe
HTML iframeHTML iframe
HTML iframe
raman156413
油
Hack an ASP .NET website? Hard, but possible!
Hack an ASP .NET website? Hard, but possible! Hack an ASP .NET website? Hard, but possible!
Hack an ASP .NET website? Hard, but possible!
Vladimir Kochetkov
油
java script json
java script jsonjava script json
java script json
chauhankapil
油
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
umesh patil
油
PHP COOKIES AND SESSIONS
PHP COOKIES AND SESSIONSPHP COOKIES AND SESSIONS
PHP COOKIES AND SESSIONS
Degu8
油
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Andres Baravalle
油
Types of operators in C
Types of operators in CTypes of operators in C
Types of operators in C
Prabhu Govind
油
Key Distribution Problem in advanced operating system
Key Distribution Problem in advanced operating systemKey Distribution Problem in advanced operating system
Key Distribution Problem in advanced operating system
Merlin Florrence
油
Android Layout.pptx
Android Layout.pptxAndroid Layout.pptx
Android Layout.pptx
vishal choudhary
油
Concept of CSS part 2
Concept of CSS part 2Concept of CSS part 2
Concept of CSS part 2
Dr. SURBHI SAROHA
油
Os lab file c programs
Os lab file c programsOs lab file c programs
Os lab file c programs
Kandarp Tiwari
油
Concept of CSS unit3
Concept of CSS unit3Concept of CSS unit3
Concept of CSS unit3
Dr. SURBHI SAROHA
油
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
Maitree Patel
油
Strings IN C
Strings IN CStrings IN C
Strings IN C
yndaravind
油
CSS Positioning Elements.pdf
CSS Positioning Elements.pdfCSS Positioning Elements.pdf
CSS Positioning Elements.pdf
Kongu Engineering College, Perundurai, Erode
油
Operators in python
Operators in pythonOperators in python
Operators in python
deepalishinkar1
油
Javascript built in String Functions
Javascript built in String FunctionsJavascript built in String Functions
Javascript built in String Functions
Avanitrambadiya
油
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
油
Library functions in c++
Library functions in c++Library functions in c++
Library functions in c++
Neeru Mittal
油
Form Validation in JavaScript
Form Validation in JavaScriptForm Validation in JavaScript
Form Validation in JavaScript
Ravi Bhadauria
油
HTML iframe
HTML iframeHTML iframe
HTML iframe
raman156413
油
Hack an ASP .NET website? Hard, but possible!
Hack an ASP .NET website? Hard, but possible! Hack an ASP .NET website? Hard, but possible!
Hack an ASP .NET website? Hard, but possible!
Vladimir Kochetkov
油
java script json
java script jsonjava script json
java script json
chauhankapil
油
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
umesh patil
油
PHP COOKIES AND SESSIONS
PHP COOKIES AND SESSIONSPHP COOKIES AND SESSIONS
PHP COOKIES AND SESSIONS
Degu8
油

Recently uploaded (20)

Chapter 6. Business and Corporate Strategy Formulation.pdf
Chapter 6. Business and Corporate Strategy Formulation.pdfChapter 6. Business and Corporate Strategy Formulation.pdf
Chapter 6. Business and Corporate Strategy Formulation.pdf
Rommel Regala
油
Antifungal agents by Mrs. Manjushri Dabhade
Antifungal agents by Mrs. Manjushri DabhadeAntifungal agents by Mrs. Manjushri Dabhade
Antifungal agents by Mrs. Manjushri Dabhade
Dabhade madam Dabhade
油
Knownsense 2025 Finals-U-25 General Quiz.pdf
Knownsense 2025 Finals-U-25 General Quiz.pdfKnownsense 2025 Finals-U-25 General Quiz.pdf
Knownsense 2025 Finals-U-25 General Quiz.pdf
Pragya - UEM Kolkata Quiz Club
油
Quizzitch Cup_Sports Quiz 2025_Prelims.pptx
Quizzitch Cup_Sports Quiz 2025_Prelims.pptxQuizzitch Cup_Sports Quiz 2025_Prelims.pptx
Quizzitch Cup_Sports Quiz 2025_Prelims.pptx
Anand Kumar
油
Unit No 4- Chemotherapy of Malignancy.pptx
Unit No 4- Chemotherapy of Malignancy.pptxUnit No 4- Chemotherapy of Malignancy.pptx
Unit No 4- Chemotherapy of Malignancy.pptx
Ashish Umale
油
20250402 ACCA TeamScienceAIEra 20250402 v10.pptx
20250402 ACCA TeamScienceAIEra 20250402 v10.pptx20250402 ACCA TeamScienceAIEra 20250402 v10.pptx
20250402 ACCA TeamScienceAIEra 20250402 v10.pptx
home
油
Conrad "Accessibility Essentials: Introductory Seminar"
Conrad "Accessibility Essentials: Introductory Seminar"Conrad "Accessibility Essentials: Introductory Seminar"
Conrad "Accessibility Essentials: Introductory Seminar"
National Information Standards Organization (NISO)
油
MIPLM subject matter expert Sascha Kamhuber
MIPLM subject matter expert Sascha KamhuberMIPLM subject matter expert Sascha Kamhuber
MIPLM subject matter expert Sascha Kamhuber
MIPLM
油
YSPH VMOC Special Report - Measles Outbreak Southwest US 4-6-2025 ver 5.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 4-6-2025 ver 5.pptxYSPH VMOC Special Report - Measles Outbreak Southwest US 4-6-2025 ver 5.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 4-6-2025 ver 5.pptx
Yale School of Public Health - The Virtual Medical Operations Center (VMOC)
油
NURSING PROCESS AND ITS STEPS .pptx
NURSING PROCESS AND ITS STEPS .pptxNURSING PROCESS AND ITS STEPS .pptx
NURSING PROCESS AND ITS STEPS .pptx
PoojaSen20
油
Recruitment in the Odoo 17 - Odoo 17 際際滷s
Recruitment in the Odoo 17 - Odoo 17 際際滷sRecruitment in the Odoo 17 - Odoo 17 際際滷s
Recruitment in the Odoo 17 - Odoo 17 際際滷s
Celine George
油
McElaney "What is inclusive publishing and why do we care about accessibility...
McElaney "What is inclusive publishing and why do we care about accessibility...McElaney "What is inclusive publishing and why do we care about accessibility...
McElaney "What is inclusive publishing and why do we care about accessibility...
National Information Standards Organization (NISO)
油
A-Z GENERAL QUIZ | THE QUIZ CLUB OF PSGCAS | 14TH MARCH 2025.pptx
A-Z GENERAL QUIZ | THE QUIZ CLUB OF PSGCAS | 14TH MARCH 2025.pptxA-Z GENERAL QUIZ | THE QUIZ CLUB OF PSGCAS | 14TH MARCH 2025.pptx
A-Z GENERAL QUIZ | THE QUIZ CLUB OF PSGCAS | 14TH MARCH 2025.pptx
Quiz Club of PSG College of Arts & Science
油
Design approaches and ethical challenges in Artificial Intelligence tools for...
Design approaches and ethical challenges in Artificial Intelligence tools for...Design approaches and ethical challenges in Artificial Intelligence tools for...
Design approaches and ethical challenges in Artificial Intelligence tools for...
Yannis
油
3. AI Trust Layer, Governance Explainability, Security & Compliance.pdf
3. AI Trust Layer, Governance Explainability, Security & Compliance.pdf3. AI Trust Layer, Governance Explainability, Security & Compliance.pdf
3. AI Trust Layer, Governance Explainability, Security & Compliance.pdf
Mukesh Kala
油
Unit 3: Combustion in Spark Ignition Engines
Unit 3: Combustion in Spark Ignition EnginesUnit 3: Combustion in Spark Ignition Engines
Unit 3: Combustion in Spark Ignition Engines
NileshKumbhar21
油
General Quiz at ChakraView 2025 | Amlan Sarkar | Ashoka Univeristy | Prelims ...
General Quiz at ChakraView 2025 | Amlan Sarkar | Ashoka Univeristy | Prelims ...General Quiz at ChakraView 2025 | Amlan Sarkar | Ashoka Univeristy | Prelims ...
General Quiz at ChakraView 2025 | Amlan Sarkar | Ashoka Univeristy | Prelims ...
Amlan Sarkar
油
Analysis of Conf File Parameters in Odoo 17
Analysis of Conf File Parameters in Odoo 17Analysis of Conf File Parameters in Odoo 17
Analysis of Conf File Parameters in Odoo 17
Celine George
油
The basics of sentences session 9pptx.pptx
The basics of sentences session 9pptx.pptxThe basics of sentences session 9pptx.pptx
The basics of sentences session 9pptx.pptx
heathfieldcps1
油
How to Setup Company Data in Odoo 17 Accounting App
How to Setup Company Data in Odoo 17 Accounting AppHow to Setup Company Data in Odoo 17 Accounting App
How to Setup Company Data in Odoo 17 Accounting App
Celine George
油
Chapter 6. Business and Corporate Strategy Formulation.pdf
Chapter 6. Business and Corporate Strategy Formulation.pdfChapter 6. Business and Corporate Strategy Formulation.pdf
Chapter 6. Business and Corporate Strategy Formulation.pdf
Rommel Regala
油
Antifungal agents by Mrs. Manjushri Dabhade
Antifungal agents by Mrs. Manjushri DabhadeAntifungal agents by Mrs. Manjushri Dabhade
Antifungal agents by Mrs. Manjushri Dabhade
Dabhade madam Dabhade
油
Knownsense 2025 Finals-U-25 General Quiz.pdf
Knownsense 2025 Finals-U-25 General Quiz.pdfKnownsense 2025 Finals-U-25 General Quiz.pdf
Knownsense 2025 Finals-U-25 General Quiz.pdf
Pragya - UEM Kolkata Quiz Club
油
Quizzitch Cup_Sports Quiz 2025_Prelims.pptx
Quizzitch Cup_Sports Quiz 2025_Prelims.pptxQuizzitch Cup_Sports Quiz 2025_Prelims.pptx
Quizzitch Cup_Sports Quiz 2025_Prelims.pptx
Anand Kumar
油
Unit No 4- Chemotherapy of Malignancy.pptx
Unit No 4- Chemotherapy of Malignancy.pptxUnit No 4- Chemotherapy of Malignancy.pptx
Unit No 4- Chemotherapy of Malignancy.pptx
Ashish Umale
油
20250402 ACCA TeamScienceAIEra 20250402 v10.pptx
20250402 ACCA TeamScienceAIEra 20250402 v10.pptx20250402 ACCA TeamScienceAIEra 20250402 v10.pptx
20250402 ACCA TeamScienceAIEra 20250402 v10.pptx
home
油
Conrad "Accessibility Essentials: Introductory Seminar"
Conrad "Accessibility Essentials: Introductory Seminar"Conrad "Accessibility Essentials: Introductory Seminar"
Conrad "Accessibility Essentials: Introductory Seminar"
National Information Standards Organization (NISO)
油
MIPLM subject matter expert Sascha Kamhuber
MIPLM subject matter expert Sascha KamhuberMIPLM subject matter expert Sascha Kamhuber
MIPLM subject matter expert Sascha Kamhuber
MIPLM
油
YSPH VMOC Special Report - Measles Outbreak Southwest US 4-6-2025 ver 5.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 4-6-2025 ver 5.pptxYSPH VMOC Special Report - Measles Outbreak Southwest US 4-6-2025 ver 5.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 4-6-2025 ver 5.pptx
Yale School of Public Health - The Virtual Medical Operations Center (VMOC)
油
NURSING PROCESS AND ITS STEPS .pptx
NURSING PROCESS AND ITS STEPS .pptxNURSING PROCESS AND ITS STEPS .pptx
NURSING PROCESS AND ITS STEPS .pptx
PoojaSen20
油
Recruitment in the Odoo 17 - Odoo 17 際際滷s
Recruitment in the Odoo 17 - Odoo 17 際際滷sRecruitment in the Odoo 17 - Odoo 17 際際滷s
Recruitment in the Odoo 17 - Odoo 17 際際滷s
Celine George
油
McElaney "What is inclusive publishing and why do we care about accessibility...
McElaney "What is inclusive publishing and why do we care about accessibility...McElaney "What is inclusive publishing and why do we care about accessibility...
McElaney "What is inclusive publishing and why do we care about accessibility...
National Information Standards Organization (NISO)
油
A-Z GENERAL QUIZ | THE QUIZ CLUB OF PSGCAS | 14TH MARCH 2025.pptx
A-Z GENERAL QUIZ | THE QUIZ CLUB OF PSGCAS | 14TH MARCH 2025.pptxA-Z GENERAL QUIZ | THE QUIZ CLUB OF PSGCAS | 14TH MARCH 2025.pptx
A-Z GENERAL QUIZ | THE QUIZ CLUB OF PSGCAS | 14TH MARCH 2025.pptx
Quiz Club of PSG College of Arts & Science
油
Design approaches and ethical challenges in Artificial Intelligence tools for...
Design approaches and ethical challenges in Artificial Intelligence tools for...Design approaches and ethical challenges in Artificial Intelligence tools for...
Design approaches and ethical challenges in Artificial Intelligence tools for...
Yannis
油
3. AI Trust Layer, Governance Explainability, Security & Compliance.pdf
3. AI Trust Layer, Governance Explainability, Security & Compliance.pdf3. AI Trust Layer, Governance Explainability, Security & Compliance.pdf
3. AI Trust Layer, Governance Explainability, Security & Compliance.pdf
Mukesh Kala
油
Unit 3: Combustion in Spark Ignition Engines
Unit 3: Combustion in Spark Ignition EnginesUnit 3: Combustion in Spark Ignition Engines
Unit 3: Combustion in Spark Ignition Engines
NileshKumbhar21
油
General Quiz at ChakraView 2025 | Amlan Sarkar | Ashoka Univeristy | Prelims ...
General Quiz at ChakraView 2025 | Amlan Sarkar | Ashoka Univeristy | Prelims ...General Quiz at ChakraView 2025 | Amlan Sarkar | Ashoka Univeristy | Prelims ...
General Quiz at ChakraView 2025 | Amlan Sarkar | Ashoka Univeristy | Prelims ...
Amlan Sarkar
油
Analysis of Conf File Parameters in Odoo 17
Analysis of Conf File Parameters in Odoo 17Analysis of Conf File Parameters in Odoo 17
Analysis of Conf File Parameters in Odoo 17
Celine George
油
The basics of sentences session 9pptx.pptx
The basics of sentences session 9pptx.pptxThe basics of sentences session 9pptx.pptx
The basics of sentences session 9pptx.pptx
heathfieldcps1
油
How to Setup Company Data in Odoo 17 Accounting App
How to Setup Company Data in Odoo 17 Accounting AppHow to Setup Company Data in Odoo 17 Accounting App
How to Setup Company Data in Odoo 17 Accounting App
Celine George
油

Intro to HTML Image Maps

  • 1. Intro to HTML Image MapsSteven T. JonesCopyright 2010 Steven T. Jones13/21/2010
  • 2. First, We Need an ImageCopyright 2010 Steven T. Jones23/21/2010
  • 3. 300 Pixels Wide and 200 Pixels High (300x200) 1 3001 200Copyright 2010 Steven T. Jones33/21/2010
  • 4. Giving an X Axis of 300 and a Y Axis of 200X axis: 300 pixels numbered 0-299 Y axis: 200 pixels, 0-199Copyright 2010 Steven T. Jones43/21/2010
  • 5. Described with Two Pairs of Coordinates:0, 0299, 199Copyright 2010 Steven T. Jones53/21/2010
  • 6. Described with Two Pairs of Coordinates:Upper left corner0, 0299, 199Copyright 2010 Steven T. Jones63/21/2010
  • 7. Described with Two Pairs of Coordinates:Upper left corner0, 0LowerRightcorner299, 199Copyright 2010 Steven T. Jones73/21/2010
  • 8. Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcorner299, 199Copyright 2010 Steven T. Jones83/21/2010
  • 9. Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin X299, 199Copyright 2010 Steven T. Jones93/21/2010
  • 10. Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin XBegin Y299, 199Copyright 2010 Steven T. Jones103/21/2010
  • 11. Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin XBegin YEnd X299, 199Copyright 2010 Steven T. Jones113/21/2010
  • 12. Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin XBegin YEnd XEnd Y299, 199Copyright 2010 Steven T. Jones123/21/2010
  • 13. Blue Area Can Be Described in the Same Way:Copyright 2010 Steven T. Jones133/21/2010
  • 14. Blue Area Can Be Described in the Same Way:Upper left cornerUpper left corner X = 0, Y = 0Copyright 2010 Steven T. Jones143/21/2010
  • 15. Blue Area Can Be Described in the Same Way:Upper left corner Upper left corner X = 0, Y = 0LowerRightcornerLower rightCorner X = 99, Y = 124Copyright 2010 Steven T. Jones153/21/2010
  • 16. Blue Area Can Be Described in the Same Way:Upper left corner X = 0, Y = 00,0,99,124Lower rightCorner X = 99, Y = 124Copyright 2010 Steven T. Jones163/21/2010
  • 17. Coordinates Describe an HTML Map Area:<area shape="rect" coords="0,0,99,124" ... >Upper left corner X = 0, Y = 00,0,99,124Lower rightCorner X = 99, Y = 124Copyright 2010 Steven T. Jones173/21/2010
  • 18. And the Yellow Area:100 2990074199Copyright 2010 Steven T. Jones183/21/2010
  • 19. And the Yellow Area:100 2990074Upper LeftX = 100Y = 0100,0,299,74Lower RightX = 299 Y = 74199Copyright 2010 Steven T. Jones193/21/2010
  • 20. And the Yellow Area:100 2990074Upper LeftX = 100Y = 0100,0,299,74Lower RightX = 299 Y = 74<area shape="rect" coords="100,0,299,74" ... >199Copyright 2010 Steven T. Jones203/21/2010
  • 21. Green and Red Areas Too... 0,0,99,124100,0,299,74Copyright 2010 Steven T. Jones213/21/2010
  • 22. Green and Red Areas Too... 0,0,99,124100,0,299,740,1250,125,99,19999,199Copyright 2010 Steven T. Jones223/21/2010
  • 23. Green and Red Areas Too... 0,0,99,124100,0,299,740,125100,75100,75,299,1990,125,99,199299,19999,199Copyright 2010 Steven T. Jones233/21/2010
  • 24. Green and Red Areas Too... 100 29900740124100,0,299,740,0,99,124100,75,299,1990,125,99,199199199100 2990Copyright 2010 Steven T. Jones243/21/2010
  • 25. Coordinates Used in an HTML Map:<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map>Copyright 2010 Steven T. Jones253/21/2010
  • 26. Coordinates Used in an HTML Map:<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map>Copyright 2010 Steven T. Jones263/21/2010
  • 27. The Map Applied to the Image<img alt="imgMap (1K)" src=/slideshow/intro-to-html-image-maps/3481321/"imgMap.gif" height="200" width="300" usemap="#example" />Copyright 2010 Steven T. Jones273/21/2010
  • 28. The Complete HTML<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map><img alt="imgMap (1K)" src=/slideshow/intro-to-html-image-maps/3481321/"imgMap.gif height="200" width="300 usemap="#example" />
AboutCopyright
息 2025 際際滷