Display portion of an image

Let’s say there is a smaller version of the image on an HTML page with a link providing a full scale version of the image. you would like to display several detailed parts of that image. Here is color coded code how it can be done on a blog, where one does not have the option to have own style sheet.

<p>Detailed parts of Moon image:<br>
<span style="display:inline-flex; padding:0px; position:relative; no-repeat;height:180px;">
<span style="width:140px;margin:4px;background: url('/wp-content/uploads/2022/10/comp.8066.jpg') -2958px -420px;"></span>
<span style="width:199px;margin:4px;background: url('/wp-content/uploads/2022/10/comp.8066.jpg') -2200px -1160px;"></span>
<span style="width:280px;margin:4px;background: url('/wp-content/uploads/2022/10/comp.8066.jpg') -1970px -2620px;"></span>

Detailed parts of Moon image:

Credit: NASA Scientific Visualization Studio
This entry was posted in workday and tagged , . Bookmark the permalink.

Leave a Reply