Solved

Overlay icons on a map jpg for a demo

Posted on 2013-11-09
6
264 Views
Last Modified: 2013-11-19
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
Comment
Question by:HLRosenberger
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 39636776
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
 
LVL 1

Author Comment

by:HLRosenberger
ID: 39636999
Thanks,  That would be cool!
0
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 39637782
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:HLRosenberger
ID: 39661065
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
 
LVL 43

Expert Comment

by:Rob
ID: 39661066
I think this was a mistake?
0
 
LVL 1

Author Closing Comment

by:HLRosenberger
ID: 39661080
Yes, my mistake.   Sorry!   And Thanks!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It’s quite interesting for me as I worked with Excel using vb.net for some time. Here are some topics which I know want to share with others whom this might help. First of all if you are working with Excel then you need to Download the Following …
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question