Question

I’ll preface by saying that I’m new at web development. I’m looking to display an image at specific coordinates on a page. For example, if the page background is a world map, and I want specific cities to flash an indicator, what would be the easiest way to go about this?

Answer 1

You can use CSS styles to achieve what you want: http://www.w3schools.com/css/default.asp

I’ll describe just a way to achieve that: use Position: absolute and top/bottom left/right properties to place the images at specific positions.

Thinking a little bit more… there’s also the HTML <map> Tag. See if it fits the bill. 🙂

Sample code:

<img src="WorldMap.jpeg" width="800" height="600" alt="Earth Planet"
     usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>