1

I am more into the simpler desktop programming scene (when it comes to this sort of stuff it is a hell of a lot simpler to deal with).

I have a large .png file I wish to display in the browser which is effectively a map with icons and when a user hovers over the icon I want to draw (preferably) a graphical window of sorts (can be another image pre-designed) and put styled text on this window (a basic display).

The .png is to be used in <img> tag using <map> and <area>, so <canvas> and applicable javascript functions are out of the question, it does not work, not ever with transparent double trickery (already tried it).

On a side note, why on earth has such a simple task that my 8 year old sister can do in an old IDE and Language on Windows and I can't get close in a browsers LOL!

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
GrimR
  • 13
  • 3
  • Sorry it's not clear what you ask. You mean to ask how to use `` properly, or what other alternatives you have? – Shadow The GPT Wizard Apr 12 '11 at 09:55
  • Because a web environment is _nothing at all like_ a desktop environment? Please, go ahead and show me a way to do this that will immediately work without re-build on all platforms that have graphical web browsers. – Lightness Races in Orbit Apr 12 '11 at 09:55
  • Multiple platforms is not of my concern, and there are compilers that can do cross platform using the correct libraries with only 1 build. My issues is with how it does positioning and for me how unclear it is, when I create a windows form or graphic interface it stays that way, on all computers it runs, without anything else. When I tell it to load an image in a funny way and then tell it to draw over the top, it does it, without question, because that is how it is supposed to work. But I could the way this stuff works, it is like you need some dodgy hacks to get it going. – GrimR Apr 12 '11 at 21:10

2 Answers2

1

There are fancy ways of doing this using canvas or even as a custom layer to a Google Map, but if you don't need advanced panning and zooming, basic HTML should do.

What I would do:

  • Show the large image in an img tag

  • Put it into a div container with position: relative

  • Put each icon onto the map with absolute positioning, e.g. position: absolute; left: 100px; top: 100px

  • Link every every icon's onclick event to a jQuery UI dialog.

Rough example CSS:

div.map { position: relative; width: 400px; height: 400px }
div.map .marker1 { position: absolute; left: 100px; top: 120px }

HTML:

<div class="map">
  <img src="image.png">

  <img class="marker1" onclick="$( '#dialog' ).dialog();" src="marker.png">

</div> 

<!-- jQuery UI dialog -->

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. 
       The dialog window can be moved, resized and closed with the 'x' icon.</p>
 </div>
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Hi, when you say icon's you mean the ones I was talking about onhover? which are actually built into the map itself, which is why I use image maps. But I could use a basic dialog to display the information, but I don't think that dialog can have anything graphical loaded onto it or formatted? Just basic text. – GrimR Apr 12 '11 at 21:15
0

Check out this question about a canvas quivalent of image map. From the answers, especially this link seems to hold the answer, albeit with canvas and javascript (which you couldn’t get to work).

You might also find Mark Pilgrim’s Introduction to the HTML5 Canvas useful, especially his live example, since that draws images and text onto a canvas, and handles very precise clicks.

Community
  • 1
  • 1
Martijn
  • 13,225
  • 3
  • 48
  • 58
  • I have seen all 3 before asking here. The Canvas is no good as it refuses to draw over the top of , if I load the image using canvas, then no more and but it will draw on top, one breaks the other. I tried to replicate that pie example (you can hover over the round shape with 4 buttons on it) and it uses a blank but to no avail, I just kept ending up with a blank at top, real image at bottom, hover over blank worked and it drew to the bottom real image.... lol (yes position was set the same as in the source, still did not behave right). – GrimR Apr 12 '11 at 21:18
  • Looking at HTML5 canvas, I am going to attempt to track mouse movements with JS and draw using HTML5 canvas and see what I can come up with. – GrimR Apr 13 '11 at 00:54
  • With a combination of the Intro to HTML5 and an example I found, I finally got this working after many hours! Thank you very much! (relieved big time lol). – GrimR Apr 13 '11 at 03:56