• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

Overlay icons on a map jpg for a demo

I have a jpg image for a map.  For a demo, I looking for a quick way to throw icons on to the map at various locations.  The icons are other jpgs.   I have a key index next to the map.   When a checkbox for a key is checked, I want a set of icons to appear on the map.  When unchecked, I want them to go away.  I have multiple types of icons.

This is a VB.NET WEB App.

Any quick way to to this?
0
HLRosenberger
Asked:
HLRosenberger
  • 3
  • 3
1 Solution
 
RobOwner (Aidellio)Commented:
You can do all this with css and simple JavaScript. I did this with one of my sites to show distributors across world.
You use the absolute position style of your image elements within a relative positioned div tag.
I'll have an example when I get to laptop.
0
 
HLRosenbergerAuthor Commented:
Thanks,  That would be cool!
0
 
RobOwner (Aidellio)Commented:
here you go: http://jsbin.com/eYayafen/2
For each of the "icons", they have a background image and in this case I've used a sprite (multiple images in one, offset by their background-position style so you can choose multiple icons depending on what you need)

fairly simple html, you just add more "icon" divs as you need them:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body>
    <div id='container'>
      <div class='map'><img src="http://geology.com/world/world-map.gif" alt=""></div>
      <div class='icon' style="top: 170px; left: 160px"></div>
      <div class='icon' style="top: 270px; left: 560px"></div>
      <div class='icon' style="top: 370px; left: 360px"></div>
    </div>
  </body>
</html>

Open in new window


css:

#container {
  position: relative;
}
.map {
  position: absolute;
  background: url();
}
.icon {
  position: absolute;
  width: 42px;
  height: 44px;
  background-image: url(http://webdesignledger.com/wp-content/uploads/2009/11/icons_09_6.jpg);
  background-position: -15px -20px;
}

Open in new window

0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
HLRosenbergerAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for HLRosenberger's comment #a39636999

for the following reason:

Thanks.
0
 
RobOwner (Aidellio)Commented:
I think this was a mistake?
0
 
HLRosenbergerAuthor Commented:
Yes, my mistake.   Sorry!   And Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now