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
Click on the DETAILED CELLS 01, 29, 30 to go to a new page and read more about the topic:
Click on the DETAILED CELLS 1, 29, 30 to go to a new page and read more about the topic:
[ 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