Solved

Overlay icons on a map jpg for a demo

Posted on 2013-11-09
6
263 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

738 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