Solved

Overlay icons on a map jpg for a demo

Posted on 2013-11-09
6
262 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
Independent Software Vendors: 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
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 …
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

756 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