Scribd Logo
Upload

Welcome to Scribd!

  • X 22

    Uploaded by

    hlemorvan
    10 views18 pages

    Original Title

    x22

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    10 views18 pages

    X 22

    Uploaded by

    hlemorvan

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 18
    2ert12023 09.28, HTML Image Maps 3 w Tutorials~ Exercisese Servicesy§ QO Login schools JAVASCRIPT SQL. PYTHON. = JAVA PHP. 4.209 HTML Image Maps Lereven ] Lew J With HTML image maps, you can create clickable areas on an image. Image Maps The HTML tag defines an image map, An image map is an image with clickable areas, The areas are defined with one or more tags, Try to click on the computer, phone, or the cup of coffee in the image below: htipsuwaew.w3echools.comihtl/ntml_images_imagemap.asp ane 2ert12023 09.28, HTML Image Maps 3 w Tutorialsy —Exercisesw Servicese§ QO Log in schools usema| ‘tworkmap"> “workmap"> rect" coord href="computer..htm"> 34,44,270,350" al ‘Computer How Does it Work? The idea behind an image map is that you should be able to perform different actions depending on where in the image you click. To create an image map you need an image, and some HTML code that describes the clickable areas. ADVERTISEMENT ADVERTISEMENT The Image nitpsiiww:vdschools.comimihtm|_images_imagemap.asp ane 2ert12023 09.28, HTML Image Maps 3 w Tutorialsy —Exercisesw Servicese§ QO Log in schools The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map. ‘ip: You can use any image as an image map! Create Image Map Then, add a element. The element is used to create an image map, and is linked to the image by using the required name attribute: The name attribute must have the same value as the 's usemap attribute . The Areas Then, add the clickable areas. A clickable area is defined using an element. Shape You must define the shape of the clickable area, and you can choose one of these values * rect + defines a rectangular region nitpsiiww:vdschools.comimihtm|_images_imagemap.asp ane 2ert12023 09.28, HTML Image Maps 3 w Tutorials~ Exercisese Servicesy§ QO Login acho WTO Ww3.css SQL. PYTHON JAVA. PHP oH You must also define some coordinates to be able to place the clickable area onto the image. Shape="rect" The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis. So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top: The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top: htipsuwaew.w3echools.comihtl/ntml_images_imagemap.asp ane 2ert12023 09.28, HTML Image Maps 3 w Tutorials~ Exercisese Servicesy§ QO Login SQL PYTHON JAVA PHP WTO Ww3.cssC Now we have enough data to create a clickable rectangular area: Example 34, 44, 270, 350" href=" This is the area that becomes clickable and will send the user to the page "computer.htm": htipsuwaew.w3echools.comihtl/ntml_images_imagemap.asp site 2ert12023 09.28, HTML Image Maps 3 w Tutorials~ Exercisese Servicesy§ QO Login schools JAVASCRIPT SQL. PYTHON. = JAVA PHP. Shape="circle" To add a circle area, first locate the coordinates of the center of the circle: 337,300 Then specify the radius of the circle: 44 pixels htipsuwaew.w3echools.comihtl/ntml_images_imagemap.asp ene 2ert12023 09.28, HTML Image Maps 3 w Tutorials~ Exercisese Servicesy§ QO Login SQL PYTHON JAVA PHP WTO Ww3.cssC Now you have enough data to create a clickable circular area: Example This is the area that becomes clickable and will send the user to the page "coffee.htm": htipsuwaew.w3echools.comihtl/ntml_images_imagemap.asp me 2ert12023 09.28, HTML Image Maps 3 w Tutorials~ Exercisese Servicesy§ QO Login schools JAVASCRIPT SQL. PYTHON. = JAVA PHP. Shape="poly" The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon), This can be used to create any shape. Like maybe a croissant shape! How can we make the croissant in the image below become a clickable link? htipsuwaew.w3echools.comihtl/ntml_images_imagemap.asp ane 2ert12023 09.28, HTML Image Maps 3 w Tutorials Exercisesw Servicesey§ QO Login schools We have to find the x and y coordinates for all edges of the croissant: nitpsiiww:vdschools.comimihtm|_images_imagemap.asp one 2ert12023 09.28, HTML Image Maps 3 w Tutorials Exercisesw Servicesey§ QO Login schools The coordinates come in pairs, one for the x-axis and one for the y-axis Example < ="poly" ="140, 121,181,116, 204,160, 204,222,191, 276,140, 329,85, 355,58, 352, 37,32 2,40, 259,103,161, 128,147" ‘croissant .htm"> This is the area that becomes clickable and will send the user to the page “croissant.htm" nitpsiiww:vdschools.comimihtm|_images_imagemap.asp rote 2ert12023 09.28, HTML Image Maps 3 w Tutorials Exercisesw Servicesey§ QO Login Image Map and JavaScript A clickable area can also trigger a JavaScript function. Adda click event to the element to execute a JavaScript function: Example Here, we use the onclick attribute to execute a JavaScript function when the area is clicked nitpsiiww:vdschools.comimihtm|_images_imagemap.asp nie 2ert12023 09.28, HTML Image Maps 3 w Tutorialsy —Exercisesw Servicese§ QO Log in schools Chapter Summary * Use the HTML element to define an image map * Use the HTML element to define the clickable areas in the image map * Use the HTML usemap attribute of the element to point to an image map HTML Exercises Exercise: For image maps, specify a legal value for the area tag's shape attribute. (Any legal value will give a correct answer) nitpsiiww:vdschools.comimihtm|_images_imagemap.asp r2t8 2ert12023 09.28, HTML Image Maps 3 WW tutoriaisy Exercises» Servicessy§ Q 0 schools Log in HTML Image Tags Tag Description Defines an image Defines an image map Defines a clickable area inside an image map Defines a container for multiple image resources For a complete list of all available HTML tags, visit our HTML Tag Reference, ADVERTISEMENT nitpsiiww:vdschools.comimihtm|_images_imagemap.asp sane 2ert12023 09.28, HTML Image Maps v’ Tutorialsy —Exercisesw Servicese§ QO Log in Eee Create Chaat Website COLOR PICKER nitpsiiww:vdschools.comimihtm|_images_imagemap.asp sate 2ert12023 09.28, HTML Image Maps 3 w Tutorials Exercisesw Servicesey§ QO Login schools WEEK! cf de adie) Get Noticed Cea Try w Po ADVERTISEMENT nitpsiiww:vdschools.comimihtm|_images_imagemap.asp 1518 2ert12023 09.28, Tutorialse Exercises Services HTML Image Maps Q 0 ADVERTISEMENT Log in ADVERTISEMENT nitpsiiww:vdschools.comimihtm|_images_imagemap.asp sone 2eri2023 09.28 HTML Image Maps Tutorials» —Exercisese Servicese§ QU O SignUp Login CSS JAVASCRIPT SQL. PYTHON JAVA” PHP-—«S HOWTO W3.CSS_— CC 3 Ww SPACES UPGRADE NEWSLETTER schools GET CERTIFIED REPORT ERROR Top Tutorials HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial cH Tutorial Query Tutorial Top References HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference Wa.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference ‘Angular Reference Query Reference Top Examples Get Certified HTML Certificate htipsuwaew.w3echools.comihtl/ntml_images_imagemap.asp sme 2eri2023 09.28 HTML Image Maps 3 WW tutoriaisy — Brercisese Servieesey Q O SignUp Login schools = CSS JAVASCRIPT SQL. PYTHON JAVA” PHP-—«S HOWTO W3.CSS_— CC Wa3.cSS Examples Query Certificate Bootstrap Examples Java Certificate PHP Examples c++ Certificate Java Examples i Certificate XML Examples XML Certificate Query Examples @ @& B® © Forum asour W3Schools Is optimized for learning and training. Examples might be simplified to improve reading and learning Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2023 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS. tipsfinww.w3schools.comihtmi/him 1ages_imagemap.asp sane

    You might also like