User:Eleanorg/1.2/Forbidden Pixels/Html image map: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
Line 1: Line 1:
wow, can you belive it's my first time using html image map! it is as if a wondrous vista has opened before me. or something.
wow, can you belive it's my first time using html image map! it is as if a wondrous vista has opened before me. or something.
The trouble will be meaningfully associating it to the image itself - so that each area pops up either the string for embedding it, or shows the pixel as it is and where it's hosted. So I guess the map will need to be created anew alongside the image, in the same script - so that data put into the image file is also fed to the html map.
The trouble will be meaningfully associating it to the image itself - so that each area pops up either the string for embedding it, or shows the pixel as it is and where it's hosted. So I guess the map will need to be created anew alongside the image, in the same script - so that data put into the image file is also fed to the html map.
==composing a relevant image map with python==
==simple image map==


<source lang="html4strict">
<source lang="html4strict">

Latest revision as of 13:08, 19 March 2012

wow, can you belive it's my first time using html image map! it is as if a wondrous vista has opened before me. or something. The trouble will be meaningfully associating it to the image itself - so that each area pops up either the string for embedding it, or shows the pixel as it is and where it's hosted. So I guess the map will need to be created anew alongside the image, in the same script - so that data put into the image file is also fed to the html map.

composing a relevant image map with python

simple image map

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
    </style>
  </head>
  
<body>

<img src="20by10PixelsSection1.png" alt="small image" usemap="#pixelMap" />
<map name="pixelMap">
  <area shape="rect" coords="0,0,1,1," alt="firstPixel" href="http://google.com" /> <!-- area covered: top left pixel? or 4 top left pixels? -->
</map>

</body>

</html>