HTML: Display indicators/images at specific coordinates on a web page

Go To StackoverFlow.com

1

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?

2012-04-04 21:47
by ti30xa


2

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>
2012-04-04 21:55
by Leniel Maccaferri
Ads