Solved

Pick image, show data

Posted on 2016-09-29
4
33 Views
Last Modified: 2016-09-30
I'd like to make a web page that does this...
The page has an image of a campus.
The image may need to be zoomable, depending on the size of the campus.
When a user picks a building, data about that building shows, whether in a popup or window.
The image and data is static. i.e. no interfacing w/ databases, etc.

Is there an online site I can do this from? Where I can make the page, then download the content for display on another web site.

I pay for a gig, what is a ballpark cost?
0
Comment
Question by:NVIT
  • 2
  • 2
4 Comments
 
LVL 78

Accepted Solution

by:
David Johnson, CD, MVP earned 500 total points
ID: 41822599
That is an imagemap
 <img src="planets.gif" width="145" height="126" alt="Planets" 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> 

Open in new window

http://www.w3schools.com/tags/tag_map.asp
There are several online image map creators available
0
 
LVL 23

Author Comment

by:NVIT
ID: 41822729
David,

After clicking the link, can it show a popup, similar to a tooltip (not sure if that's the correct terms)?
0
 
LVL 78

Expert Comment

by:David Johnson, CD, MVP
ID: 41823865
just add a target="_blank" attribute to your links (anchor tags)
0
 
LVL 23

Author Closing Comment

by:NVIT
ID: 41824047
Thanks!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

747 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now