< home >  last update > 10-16-2021   ----- HOW TO MAKE AN "IMAGE MAP" OBJECT - ON AN HTML PAGE "HOSTED" BY "GODADDY".

    This is the COPY file. Always work in a copy - of soming that is performing correcly. 


1. Make image of known dimensions. SUGGEST: - use "table" creator - in Cpanel >Table Properties ( My table is 700 pixels wide. It has 10 columns and 3 rows.)

   FOR INVESTIGATION & LEARNING  PHASE - I want a "grid" applied to an image - that I can investigate and control.
       ( Consider, WHY ARE WE BRINGING "MARS" SAMPLES - BACK TO EARTH? )
  NOTE: WINDOW'S free PAINT application - a "drawing program" - DIGITAL GRAPHICS - WILL REPORT the Height and coordinate information - I need.

2. Place text in table cells - to assist your subsequent references for User. In my table "object" - I placed cell numbers.


1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30

    ( HTML "table" result - on HTML page. )
   Say it! Above is NOT an "image"!  - It is an HTML Table "object". It has "cells" - which can be "populated" with "content". 


  3. Capture the table's screen image using "Paint" etc. - save as type = ".jpg" 
 4. Open the saved image - in Paint (a free application) - and record the rectangle coordinates - for the Cells of interest.
     Use Paint's "Select tool" and view Paint's UI "footer". FOR EXAMPLE, my " screen image" 
      - captured with "snipping tool"  - of my HTML table - created with Cpanel had 30 cells. You can open a saved screen capture - using Paint.
5. I noted the rectangular coordinate pairs of table cells 1, 29, 30 upper left corner AND lower right corner - in pixels = x1,y1,x2,y2. ( THIS IS GEOMETRY TALK. )
6. I also noted the "center of Cell's 1 & 30 - in case I want to test related HTML statements ( " area shape="circle" coords= " ) - for my image "hot spot".
 Cell  1>   0,0,69,23              center of cell 01 on my .jpg "captured image is about coordinate pair >  29,12  
 Cell 29>   557,47,626,67     center of cell 29  ????? 
 Cell 30>   627,46,770,70     center of cell 30 on my .jpg "captured image is about coordinate pair > 654,58 

          >>  imageMAP-cells03-cellTags-edited.jpg >     YES! CELL "01" IS AN OPTIONAL WAY TO REFERENCE CELL "1" .  
hhhh 


Image Map TEST1 - page object installed - WORKS good. [ Note! "Right Click" image "object" to view "image properties".  ]

Click on the DETAILED CELLS 01, 29, 30 to go to a new page and read more about the topic:

imageMAP-EXCELL 01 shape="rect" /> CELL 29 shape="rect" /> CELL 30 shape="rect" />

Image Map TEST1 - end 

Click on the DETAILED CELLS 1, 29, 30 to go to a new page and read more about the topic:  Touch User interface png images | PNGWing   
    [  https://w7.pngwing.com/pngs/393/181/png-transparent-computer-mouse-pointer-computer-icons-cursor-arrow-computer-mouse-electronics-text-hand.png ::  https://www.pngwing.com/   ]

NOTE: I added a "Target attribut" - which my husband (of 39+ years) does not like.
 ( I prefer "new Topic" pages to display in New Windows - He does not. He's a "back button/arrow" type guy. )
    - We learn - and investigate - differently. Which, I learned - on our first date - AND, working with him - at NCR Corporation - Cambridge E&M 

 "TARGET ATTRIBUTE" ON "imagemap" 
 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap_target  

 <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" target="_blank">  NOTE ATTRIBUTE AT END of HTML statement. 

-----------------------------

 " target="_blank" < TARGET ATTRIBUTE > https://www.w3schools.com/tags/att_a_target.asp

   https://hansandcassady.org/imageMAP-TEST.html

 https://www.w3schools.com/html/html_images_imagemap.asp

--------------------------- 

[end] SSSSSSSSSSSSSSSSSSS