At my “:hover emulation for IE5+”:http://users.hszk.bme.hu/~hj130/css/list_menu/hover/index.html
solution, I used the same idea in my “hot spot example”:http://users.hszk.bme.hu/~hj130/css/list_menu/hover/example_hotspot/index.html
.
This way the tooltips are “half sticky”. You can mouseover the tooltip but it hides when you mouseout. I think in many situation this is easier for the user as clicking a close button to hide the tooltip.
I did something similar to this a couple weeks ago (http://infinity-stuff.com/blog/20060313/interactive-images/), obviously not as nice as this but the same kind of idea.
Its nice to see accessibility and neat effects combined together to make something great.
Reminds me of “an article”:http://www.data-travelers.de/2006/03/21/imagelist.html I wrote about a month ago – and my “old website”:http://www.f2w.de/article.php showing off that knowledge for more than half a year, too. ;)
Note: Currently the domain name (data-travelers.de) is moving to another IP address, thus the link’ll be valid again in a few hours.
Copy & paste the code below to embed this comment.
Brian LePore
I found while tabbing through the sticky example that the map would only show for every third press of the tab key. It seemed the first time it is pressed the sticky is shown and points to the Wikipedia link. The second the sticky is not shown and the link points to “[removed]void(0);” (presumably the close sticky button). The third press presents is to the same link as the first example, but no sticky (presumably to the Wikipedia link within the sticky). Can the modified code for the sticky version be updated to avoid following these links?
A simple (although not very elegant) way around the tabbing in the sticky map example would be to add tabindex attributes to all the anchor tags within the DTs.
If the HTML comment at the top of the source in the “stickymap example”:http://www.alistapart.com/d/cssmaps/stickymap/index.html is removed and the page is loaded in IE7b2, the tooltip layout breaks. The close button (a cross image) moves outside the tooltip, and if there is no image within the tooltip, text flows outside it on the right-hand side.
The HTML comment at the top of the source causes IE6 (as well as IE7b2) to switch to quirks mode. This must be part of the problem. To test if IE is in standards-compliance or quirks mode, type
[removed]alert(document.compatMode);
into the address bar after loading a page. ‘BackCompat’ means quirks, ‘CSS1Compat’ means standards.
for sure good article, nice map, more accessible than others but
sorry but there is still a big problem. When i turn off the image but not the css, the map and the spot desappear
What could make this kind of a map even better, would be the ability to search within the grids. I was working on a similar thing a few years back. But as the client was less interested we gave it up.
Imagine me just searching for a street in a map and the particular streets gets highlighted.
After google earth, there are very few things i now desire in a map. Cheers!
It seems to me that online maps fall into two categories: cases where the map is used to organise and present some information, and cases where the map IS the information.
For the former case, the technique presented in this article could no doubt be very useful. For the latter case – which will cover a lot of Google/Yahoo maps usage – it’s a lot less applicable: There’s a huge amount of visual information in the map, to which we might add a few identified points.
For example, if I were using Google Maps to display the position of a particular building, it’s pointless trying to describe all the visual information that Google makes available. Just leave it alone, but add a text description of how to get to the place – if you were visually impaired and wanted to go there, where should you tell a taxi driver to take you? What bus/train would you catch? (This infirmation may be useful to sighted visitors too!)
Copy & paste the code below to embed this comment.
Gareth Adams
Worth pointing out that (at least in IE<7) element.class1.class2.[…].classN is reduced down to element.classN
This means that your dl.map.on rule would apply to all <dl class=‘on’> elements on the page (although you can appreciate the relative chances of this aren’t high)
@“Ismael”:http://www.alistapart.com/comments/cssmaps?page=4#32 and “Bob”:http://www.alistapart.com/comments/cssmaps?page=4#37: thanks for catching that. We’ve made the change.
Copy & paste the code below to embed this comment.
Igor Beuermann
You will certainly recognise me as a novice ;-) but I’m trying. Also, I know my question would be better posted to some JavaScript page. But would you so kind and explain me the meaning of the double dollar sign ‘$$’ as in
this.$$handleEvent(event) === false or
handlers[handler.$$guid] = handler;
I hope I’m not troubling you too much (as novices always do).
Copy & paste the code below to embed this comment.
chris hansen
In Safari I’ve noticed that my CSS is loading after the tooltip images… Firefox and IE are fine… any suggestions? Should I move the CSS for the map inline?
Copy & paste the code below to embed this comment.
H. Fiedler
Great bit of programming!
When I use the examples here, they work great.
When I copy it to my own PC and run it, the IE popup blocker interferes. Any way to fix this?
Great article, thank you. Shortly after reading it, a project came up that seemed perfect for a non-API environment. We’re trying this method for a quiz, where the map & tool tips hold the answers. http://salmonnation.com/place/where_bioregion_quiz.html
The backgroudn map is a dummy of course, which I’m using to help me place the x,y of the location points. I’ll just upload a new background image when done.
After looking at the code for a few hours, I can’t figure out why all the points seem to be off by approx x6,y-12 pixels. Your ideas? Also, something is busted in PC IE, where the map doesn’t display at all.
external files are http://salmonnation.com/includes/map.css and http://salmonnation.com/includes/mapevents.js
First of all, thank you for creating this script. I have been successful in implementing the map, but would like to substitute an onmouseout timer for the close button. I abandoned the close image because my dd content will vary in width, and using dd width:auto; with the img float:right; makes the entire dd stretch across the screen.
My goal is to have an interactive pop-up that will disappear once I stop interacting with it. I have added an onmouseout event to the dd, but it only recognizes the first line in the dd. I know this is a long-shot, but do you have any suggestions?
Got this working in most browswers, except for Safari is still rendering as though without CSS. Any ideas? http://salmonnation.com/place/where_bioregion_quiz.html
50 Reader Comments
Back to the ArticleJanos Horvath
At my “:hover emulation for IE5+”:http://users.hszk.bme.hu/~hj130/css/list_menu/hover/index.html
solution, I used the same idea in my “hot spot example”:http://users.hszk.bme.hu/~hj130/css/list_menu/hover/example_hotspot/index.html
.
This way the tooltips are “half sticky”. You can mouseover the tooltip but it hides when you mouseout. I think in many situation this is easier for the user as clicking a close button to hide the tooltip.
Nick Presta
I did something similar to this a couple weeks ago (http://infinity-stuff.com/blog/20060313/interactive-images/), obviously not as nice as this but the same kind of idea.
Its nice to see accessibility and neat effects combined together to make something great.
Fabian Wolf
Nice stuff .. sounds familiar.
Reminds me of “an article”:http://www.data-travelers.de/2006/03/21/imagelist.html I wrote about a month ago – and my “old website”:http://www.f2w.de/article.php showing off that knowledge for more than half a year, too. ;)
Note: Currently the domain name (data-travelers.de) is moving to another IP address, thus the link’ll be valid again in a few hours.
cu, w0lf.
Brian LePore
I found while tabbing through the sticky example that the map would only show for every third press of the tab key. It seemed the first time it is pressed the sticky is shown and points to the Wikipedia link. The second the sticky is not shown and the link points to “[removed]void(0);” (presumably the close sticky button). The third press presents is to the same link as the first example, but no sticky (presumably to the Wikipedia link within the sticky). Can the modified code for the sticky version be updated to avoid following these links?
Seth Duffey
A simple (although not very elegant) way around the tabbing in the sticky map example would be to add tabindex attributes to all the anchor tags within the DTs.
Dave Higgins
If the HTML comment at the top of the source in the “stickymap example”:http://www.alistapart.com/d/cssmaps/stickymap/index.html is removed and the page is loaded in IE7b2, the tooltip layout breaks. The close button (a cross image) moves outside the tooltip, and if there is no image within the tooltip, text flows outside it on the right-hand side.
Odd.
Dave Higgins
The HTML comment at the top of the source causes IE6 (as well as IE7b2) to switch to quirks mode. This must be part of the problem. To test if IE is in standards-compliance or quirks mode, type
[removed]alert(document.compatMode);
into the address bar after loading a page. ‘BackCompat’ means quirks, ‘CSS1Compat’ means standards.
Jim Callender
Good article, I will be experimenting with this. Good to see with API’s, accesibility is still an option.
levy aurelien
for sure good article, nice map, more accessible than others but
sorry but there is still a big problem. When i turn off the image but not the css, the map and the spot desappear
rohan dsouza
What could make this kind of a map even better, would be the ability to search within the grids. I was working on a similar thing a few years back. But as the client was less interested we gave it up.
Imagine me just searching for a street in a map and the particular streets gets highlighted.
After google earth, there are very few things i now desire in a map. Cheers!
Chris Hunt
It seems to me that online maps fall into two categories: cases where the map is used to organise and present some information, and cases where the map IS the information.
For the former case, the technique presented in this article could no doubt be very useful. For the latter case – which will cover a lot of Google/Yahoo maps usage – it’s a lot less applicable: There’s a huge amount of visual information in the map, to which we might add a few identified points.
For example, if I were using Google Maps to display the position of a particular building, it’s pointless trying to describe all the visual information that Google makes available. Just leave it alone, but add a text description of how to get to the place – if you were visually impaired and wanted to go there, where should you tell a taxi driver to take you? What bus/train would you catch? (This infirmation may be useful to sighted visitors too!)
ismael celis
In the Init method, shouldn’t the line
var DTs = DLs.getElementsById( ‘dt’ );
be
var DTs = DLs.getElementsByTagName( ‘dt’ );
?
Seth Duffey
Yes that does appear to be a typo in the article. View the full source of the javascript to see the entire init method.
Priit Laes
Can someone create a “mapMaker.reinit()” function which will fix the tooltips after the city list has been dynamically changed? ;)
Seth Duffey
The code below should do what you need:
reinit: function(){
mapMaker.on = false;
var i=0;
mapMaker.DLs = document.getElementsByTagName(‘dl’);
while (mapMaker.DLs.length > i) {
if (mapMaker.DLs.className == ‘map on’){
mapMaker.DLs.className = ‘map’;
i++;
};
};
mapMaker.init();
},
Gareth Adams
Worth pointing out that (at least in IE<7) element.class1.class2.[…].classN is reduced down to element.classN
This means that your dl.map.on rule would apply to all <dl class=‘on’> elements on the page (although you can appreciate the relative chances of this aren’t high)
bob sfog
In the Init method, shouldn’t the line
var DTs = DLs.getElementsById( “˜dt’ );
be
var DTs = DLs.getElementsByTagName( “˜dt’ );
?
is it should
http://www.replicahours.com
David B
Great article Seth. I thought you(and others!) might like to see what we did with our maps, http://www.travbuddy.com/world_display.php
Aaron Gustafson
@“Ismael”:http://www.alistapart.com/comments/cssmaps?page=4#32 and “Bob”:http://www.alistapart.com/comments/cssmaps?page=4#37: thanks for catching that. We’ve made the change.
Steven Kumar
Perfect.
Peter Brown
Title? (Function to show/hide all tooltips?)
Maik Lehmann
Good article, I will be experimenting with this in my nexts projects.
Thanks for this great idea!
Greets Maik
Michael Müller
Thank you very much for this article. I’m just trying to integrate a map on my site and your article is really helpful in this case.
Igor Beuermann
You will certainly recognise me as a novice ;-) but I’m trying. Also, I know my question would be better posted to some JavaScript page. But would you so kind and explain me the meaning of the double dollar sign ‘$$’ as in
this.$$handleEvent(event) === false or
handlers[handler.$$guid] = handler;
I hope I’m not troubling you too much (as novices always do).
Igor
chris hansen
In Safari I’ve noticed that my CSS is loading after the tooltip images… Firefox and IE are fine… any suggestions? Should I move the CSS for the map inline?
http://fearlessfilms.net/ffnew/locations.html
Thanks!
H. Fiedler
Great bit of programming!
When I use the examples here, they work great.
When I copy it to my own PC and run it, the IE popup blocker interferes. Any way to fix this?
H. Fiedler
Never mind. When I publish the map, it works fine.
You can try it at
http://www.api-usa.com/api_rep_map.htm
Thanks!
Andrew Fuller
Great article, thank you. Shortly after reading it, a project came up that seemed perfect for a non-API environment. We’re trying this method for a quiz, where the map & tool tips hold the answers. http://salmonnation.com/place/where_bioregion_quiz.html
The backgroudn map is a dummy of course, which I’m using to help me place the x,y of the location points. I’ll just upload a new background image when done.
After looking at the code for a few hours, I can’t figure out why all the points seem to be off by approx x6,y-12 pixels. Your ideas? Also, something is busted in PC IE, where the map doesn’t display at all.
external files are http://salmonnation.com/includes/map.css and http://salmonnation.com/includes/mapevents.js
Paul Amato
First of all, thank you for creating this script. I have been successful in implementing the map, but would like to substitute an onmouseout timer for the close button. I abandoned the close image because my dd content will vary in width, and using dd width:auto; with the img float:right; makes the entire dd stretch across the screen.
My goal is to have an interactive pop-up that will disappear once I stop interacting with it. I have added an onmouseout event to the dd, but it only recognizes the first line in the dd. I know this is a long-shot, but do you have any suggestions?
Thank you in advance for any help you can offer.
Paul
Andrew Fuller
Got this working in most browswers, except for Safari is still rendering as though without CSS. Any ideas? http://salmonnation.com/place/where_bioregion_quiz.html