Map with hover-overs that display profile for hovered area

HTML & CSS
1

I have a client that requested to have a map of their service area that is divided up into smaller regions. When a user hovers over a region a profile of the person associated with that region is to be displayed beside the map.

What are your recommendations on the best way to implement this. Apple has made me reluctant to use Flash, so I would prefer other alternatives.

Thanks :slight_smile:

2

See Mallorys recent post here.

[URL=“http://www.apartmentx.com/”]

3

Thanks a lot. I’m going to look at these later tonight.

Thanks again.

4

Hi w1nk5.
Unfortunately you can’t do it with image maps,
which would be nice since you could assign information to non regular shaped regions.
Only some weird javascript solutions can come close to this.
As Paul O’B already said there is only some css solutions which have the may be inconvenient drawback of only being able to use box shaped regions.
Some interesting solutions you can also find here (for me the god of CSS :wink: ):

Cheers,
noRiddle

5

Yes, that’s the main problem when using the techniques for maps as you can’t follow the outline exactly although you usually get something that’s pretty close with care.

You can get irregular shapes by nesting inner elements and pulling them outside the box but usually that would be to complicated for all but for the simplest of structures.

Here’s an example that isn’t box shaped although it is made up of boxes :slight_smile:

I believe Stu (CSSplay) has some irregular shaped image maps also but they use a lot of code.

6

While I appreciate what others did with CSS and images, and Sp’s example is one I appreciated the most :)…

… the solution is wrong all together. An irregular shape should not be sensitive to hover/focus all over its surface. Yes, for playing out, that’s fine. But, for me, it should only be when hovering/focusing over an anchor (like only the anchor’s text being the active element) that another surrounding/neighbouring element changes/highlights its irregular shape as a response to that hover/focus.

This eliminates the irregular shapes problem. I would even go as far as suggesting that this is also true for me when it comes to CSS tabs.

There are desktop solutions for OS native button element to achive this goal: buttons with irregular shapes, since W’98 (?). But you don’t see them used very often!

My opinion is that if you want to try such a thing: an irregular shape catching hover/focus, this belongs (if possible?) to SVG or canvas. I even go against image maps.

That said, Paul’s last example is based on the way math integral is used to calculate areas of irregular shapes. Or, at least, any viable solution for a irregular shape active interface element should ? :slight_smile:

7

But, for me, it should only be when hovering/focusing over an anchor (like only the anchor’s text being the active element)

Yes originally only the text was hovered or active but that was an accessibility issue for motor impaired users who had trouble with menus where the target area was too small. For that reason the surrounding area was also made active which made it much easier for everyone and a more pleasant experience. (There is now a similar process for mobile sites as it’s hard to select text with fat fingers so you have larger active areas.)

This is an age old question and I understand what you are saying agree and disagree at the same time :slight_smile: Right at the origins of CSS the hover effect was criticised for straying into javascript territory as it was deemed that a hover effect (or any inter-action) was in fact a behaviour.

The line between where CSS ends and something else starts has always been blurred and especially more so since css3 transformations can do a lot of the work that was deemed to be javascript territory.

Perhaps the problem is that CSS should be redefined as it no longer fits into the strict “presentation only” category or perhaps we have to decide what “presentation” actually means. I would argue that presentation means most anything that you see on the screen and visual effects such as rollovers are indeed presentation.

There is always going to be overlap between these disciplines and the bottom line is to use the best, most accessible, and easiest to implement for the job in hand. If that happens to be javascript then that’s fine but if it can be done more easily in CSS then that’s fine also as far as I’m concerned.

8

Well, back to OP’s problem: this must be thought off as a progressive enhancement, right. As such, the use of Flash, Silverlight makes it hard to also cater for a graceful degradation. But could prove useful if the target audience is certain to use these two.

What remains, as a general solution, is CSS and/or JavaScript. I still believe using only anchors can provide a viable solution, even when accounting for the accessibility issue for motor impaired users or fat fingers, because this two are unrelated to the irregular active shape issue.

When I said the text alone should be considered for the active part, it seems I spoke too soon. It’s true what you’re saying, looking at accessibility, but it still can be solved w/o resorting to other elements than anchors, and be as beautyful and accessible as large shapes, including irregular ones.

Anchors can be placed at resonable distances and have resonable paddings, can have resonable large text or resonable active images inside (to be regarded as different from those shapes I’m refering to in the above paragraph) by the use of image replacement techniques so that the problems for motor impaired users or fat fingers users will be solved using these anchors alone, w/o trying to make them fill the larger parent.

What I liked most (but also gave me some doubt about whether it’s will always be truly semantic or not) about Sp’s solution is the fact that you have two systems in one: a graphical interface (like a image map) and a text interface (like a menu). Brilliant I must say! My hat’s off to one very smart Stomme poes ! :slight_smile:

9

Since the original question was to put information beside the map and not changing the appearance of the map itself
and since I do not agree with everything being said here,
I anticipate the publication of my researches about image maps in parts.
To do the desired effect with an image map

<code>
<html>
<head>

<title>Image Map Test</title>

<style type=“text/css”>
img {border: none;}
map {position: relative; display: block;} /* block to make it work in webkit browsers*/
area {display: block; cursor: crosshair;} /* to make it work in webkit browsers*/
.doit {position: absolute; top: -126px; left: 160px; display: none;}
area:hover + div {display: block;}
</style>

</head>

<body>

<p>Image map test with css hover function: </p>

<img src=“http://www.w3schools.com/tags/planets.gif” width=“146” height=“126” alt=“” title=“” usemap=“#planetmap” />

<map name=“planetmap”>
<area shape=“rect” coords=“0,0,82,130” alt=“” title=“” nohref=“nohref” />
<div class=“doit”>
<img src=“http://www.w3schools.com/images/sun.gif” alt=“” />
</div>
<area shape=“circle” coords=“90,58,3” alt=“” title=“” nohref=“nohref” />
<div class=“doit”>
<img src=“http://www.w3schools.com/tags/merglobe.gif” alt=“” />
</div>
<area shape=“circle” coords=“124,58,8” alt=“” title=“” nohref=“nohref” />
<div class=“doit”>
<img src=“http://www.w3schools.com/images/venglobe.gif” alt=“” />
</div>
</map>
<div><p>Hallo Sonne</p></div>
</body>
</html>
</code>

It works in Gecko, in Webkit, in Presto,
meaning Firefox, Chrome and Safari, Opera (all latest releases)
but not in Trident / IE, (I only tried IE7).

You can do some more fancy stuff with it but important is:
You can use any shape, also polygone ones (which I find really nice to do nice stuff) and you can put any HTML in the boxes displaying beside the map,
the boxes, btw., being free in their positioning.

The code seems to be simple and it indeed is (another advantage of this approach) but it took quite a long time to figure it all out and test it in different browsers.

Explanation:
One can look upon the fact that this works in different ways.
The map and area tags normally don’t take space on a HTML/XHTML page, they just describe the before posted image but they are still there and they are elements of the DOM.
The fact that “map” doesn’t only accept “area” as a child element but actually any block element seems to be not widely known (I didn’t find any approaches like mine on the internet).
All browsers who support the adjacent sibbling selector being the “+” should be able to do what my code does. Unfortunately at least IE7 doesn’t, even though it supports the adjacent selector. (I didn’t try IE8 and I actually don’t care for IE6 anymore).
May be someone comes up with an idea in terms of IE7 ?
But I have to say that I tried everything you can imagine and with a kind of exclusion procedure I tried to find out on which properties and attributes area reacts anyway.
It turned out that IE doesn’t accept any property being assigned to area except “border”, weird enough…
There is a lot more to say about this research but would be out of the scope of this thread and this forum in general.

Conclusion:
If one can afford to ignore IE7, my solution should be a consistent and nice one (may be with a small Javascript workaround for IE).

Thanks for reading my “outpourings” … :wink:
Cheers,
noRiddle

10

first time i ever heard of that honestly…
:eye:

11

That only if you think you can get away with it for a real paying client :slight_smile:

While you have the right to not agree with everything being said here, you’re missing on so many points.

The main one being: what value does your IE ignorant solution (wow, you’re bold) has for (the rest of, something like a HALF!!!) users that don’t accept author CSS?

How does your solution qualifies as a progressive enhancement? Where’s your graceful degradation? Where’s your accessibility concern? Finally, for that (cheap) effect you really think image map is really necessary?

And more :slight_smile: finally, given the complexity that is implied with image map, when there will be “small changes” that will turn your whole world upside down, will you be able to provide a fast and reliable solution?

And to give you a reason to give us a better solution: if you were shooting for an F, that home work you provided maybe all you need. Maybe :slight_smile:

Off Topic:

No SPF user was hurt during the making of this post. It only may appear so to those that can’t take a constructive and honest criticism.

12

Come on noonnope,
where did I say I wanted to ignore IE ?
I just said that I don’t care for IE6 anymore and I think I have got the right to do that.
Further on:

  1. My above posted code was never meant to be a conclusive solution, I only intended to bring sth up which has never been done afaIk (didn’t find any hint on the web).
  2. What else do you want than such little code ?, if I look at all the CSS solutions they are bloated. Not that I care for that since I am one of those developers who doesn’t care for philosophies but for results and, imho very important, for valid code.
  3. The so much sung about graceful degradation is not the topic here, it is important when we talk about Javascript but if you want degradation for non CSS users, what is this supposed to constitute ? If you switch CSS off you still see all the descriptions which would otherwise only appear when hovering over the respective areas.
  4. Accessability ?, that was may be inherent in the first place with the idea of the questioner to display information when hovering over certain areas. But I don’t see any problem here since you are able to assign key values to the areas so you can tab through them.
  5. To call the desired effect a “cheap” effect is, to put it mildly, a boldness.
    The effect is a well known and nice idea and why not solve it with an image map (which as shown above unfortunately doesn’t work for all browsers).
  6. And again: There is no complexity with image maps at all ! Where do you see it ?
    Did you read the code and try it out ? Changes are done in seconds ! I really can’t quite follow you…

Generally talking:
If developers and other web involved people would have less artificial philosophies and were more aimed on what really counts, the problems with web developement would be less.
What I consider what “really counts” ?
Beautiful pages, interesting pages, user friendly pages and valid code of which the latter cannot be overestimated to achieve, one day, a consistent and cross browser operable internet.

As to your “off topic”: I would never get hurt by somebody arguing with words as long as they stay within the scope of politeness, fighting with words is our cultural achievement and as in the physical world there is all kinds of weapons, knifes, swords, epees, pistols… As long as you don’t come with a pistol when all the others have knifes you are fair.
I hope you think the same way…

noRiddle

13

:slight_smile: It’s not only you, dear forum colleague, who didn’t hear about that approach before. I am estonished myself.
But it works, play around with it a bit…

Cheers,
noRiddle

14

I am very intrigued by that - like others, I wasn’t aware that <map> could take anything other than <area> within it, and I really like the simplicity of the solution except that it doesn’t work IE6/7/8, which rules out too many users to make it a workable real-world solution.

OK, here’s a possible solution: http://getdown.org.uk/sitepoint/imagemap/test.htm

The HTML is very straightforward:

<div id="imagemap">
<ul>
<li id="red"><a href="#"><span><img src="red.png"></span></a></li>
<li id="blue"><a href="#"><span><img src="blue.png"></span></a></li>
<li id="green"><a href="#"><span><img src="green.png"></span></a></li>
<li id="brown"><a href="#"><span><img src="brown.png"></span></a></li>
</ul>
</div>

It’s the CSS that’s a bit more complicated:

#imagemap {width:600px; height:500px; background:url(base.png) no-repeat right; position:relative;}
li {list-style-type:none;}
li a {display:block; position:absolute;}

ul span {display:none;}
li a:hover span {display:block; width:200px; height:200px; position:absolute;}

li#red a {top:0; left:200px; width:300px; height:100px;}
li#red a:hover span {top:150px; left:-200px;}

li#blue a {top:200px; left:550px; width:50px; height:300px;}
li#blue a:hover span {top:-50px; left:-550px;}

li#green a {top:100px; left:300px; width:250px; height:200px;}
li#green a:hover span {top:50px; left:-300px;}

li#brown a {top:350px; left:250px; width:250px; height:50px;}
li#brown a:hover span {top:-200px; left:-250px;}

In this case, I’ve used a base image of h=500 and w=400, but I want the additional images (h=w=200) to appear to the left of the base image, and vertically centred. So the main <div> is w=200+400=600 and h=500.

Each of the li#whatever a lines gives the height and width of the relevant patch (hotspot) on the base image, and the top and left positions (remembering that the left needs to be increased by 200px to allow for the extra space to the left of the image).

Each of the li#whatever a:hover span lines gives the movement needed from the position of that li to where the image is going to be displayed (which is always left:0; top:150px;) - so add the two ‘top’ measurements for each pair and it will always give 150, add the two ‘left’ measurements for each pair and it will always give 0.

This should work in all browsers, although it’s downside is that it does restrict you to rectangular areas - but there’s no reason why you shouldn’t use composite areas (or even just have multiple areas that give the same output!)

15

I would recommend using an image map as they are fairly easy to use.

If the regions are irregular shapes, you can set the shape attribute to “poly” and hand type the the coordinates or if it is too irregular to hand type coords, there are image map makers on the web you can use by opening the image in the app. and as you trace or click around the region borders, the app creates the html code for the map for you. If you have Photshop, I think it has an image map maker feature.

16

I’ve had a play with this. But this won’t work for non javascript users although they’re likely to be very small in numbers.

I have attached the inage I used. It’s an inage with 4 coloured quadrants for each region. When you mouseover each region, the region’s profile is displayed next to the map.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #container {
                width: 600px
            }
            #container img {
                border: none
            }
            #mapContainer {
                width: 200px;
                float: left
            }
            .profileContainer {
                width: 380px;
                float: right;
                display: none
            }
        </style>
        <script type="text/javascript">
        window.onload=function() {
            profileElems = document.getElementById('container').getElementsByTagName('p');
        }

        function showProfile(elemId) {
            for(i=0; i < profileElems.length; i++) {
                profileElems[i].style.display = 'none';
            }
            document.getElementById(elemId).style.display = 'block';
        }
        </script>
    </head>
    <body>

        <div id="container">
            <div id="mapContainer">
                <img src="regionMap.jpg" alt="" usemap="#regionMap" />
            </div>
            <p class="profileContainer" id="profileRed">This is red's profile</p>
            <p class="profileContainer" id="profileBlue">This is blue's profile</p>
            <p class="profileContainer" id="profilePink">This is pink's profile</p>
            <p class="profileContainer" id="profileGreen">This is green's profile</p>
        </div>

        <map name="regionMap" id="regionMap">
            <area shape="rect" coords="0,0,100,100" href="" alt="" onmouseover="showProfile('profileRed');" />
            <area shape="rect" coords="100,0,200,100" href="" alt="" onmouseover="showProfile('profileBlue');" />
            <area shape="rect" coords="0,100,100,200" href="" alt="" onmouseover="showProfile('profilePink');" />
            <area shape="rect" coords="100,100,200,200" href="" alt="" onmouseover="showProfile('profileGreen');" />
        </map>

    </body>
</html>
17

@Stevie D
I like this approach. Among many other solutions with CSS, this is not one of the least.
The CSS is not that big actually.
You know, because of not being able to use irregular shaped areas I figured out my example above.
Sure, it is not supported by IE6 and IE7 (IE8 I don’t know, didn’t evaluate it) but together with a javascript solution for IE browsers it is a neat solution with little code
and… who knows, may be I’ll find sth to make it work in IE too, wouldn’t be the first time that someone finds a work around for IEs :wink:

@wwwAngel
I am curious about your solution, waiting for the pic to be approved…

noRiddle

18

The image I used is a quick and simple 200px x 200px with 4 coloured quadrants 100px x 100px each I whipped up in Photoshop. In the mean time you can use any image cropped to 200 x 200px.

19

Dear noRiddle,

Browsing through my posts, will see I’m pretty mild person. That is until users with incomplete training start throwing code monsters around in the face of those with less knowledge. A dangerous thing.

Since

  • you provided an INVALID code
  • you provided a solution asking to ignore IE (which is asking to only address to roughly half of web users)
  • you never outlined the benefits of your approach, but purely played with what good will Mozilla Foundation, Microsoft Corp and the rest have building their UA to support your INVALID code
  • your solution is far superseded by a previous one, in all areas

I believe your best move is to step back, think harder about your solution and provide a good one.

Stop playing with words. You’ve said:

If one can afford to ignore IE7, my solution should be a consistent and nice one (may be with a small Javascript workaround for IE).

Even more, you failed to at least point out a JS solution. Where this does leave your solution. In the same gutter with almost 80% of the web dev incomplete solutions. Chasing wild goose? Well, put the right name on it, at least.

Two things:

  • For your #1 assertion: you’ve said
    > I anticipate the publication of my researches about image maps in parts.
    Is that only to give us the impression that you really thought about it so that we won’t put it under scrutiny? 'Cos it didn’t work.
  • For your #2 assertion: very important: your code is NOT VALID. I, for one KNOW so. Can you explain to the class why I gave you an F and keep saying your solution is NOT VALID?

Start here, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>

<title>Image Map Test</title>

<style type="text/css">
img {border: none;}
map {position: relative; display: block;} /* block to make it work in webkit browsers*/
area {display: block; cursor: crosshair;} /* to make it work in webkit browsers*/
.doit {position: absolute; top: -126px; left: 160px; display: none;}
area:hover + div {display: block;}
</style>

</head>

<body>

<p>Image map test with css hover function: </p>

<img src="http://www.w3schools.com/tags/planets.gif" width="146" height="126" alt="" title="" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,130" alt="" title="" nohref="nohref" />
<div class="doit">
<img src="http://www.w3schools.com/images/sun.gif" alt="" />
</div>
<area shape="circle" coords="90,58,3" alt="" title="" nohref="nohref" />
<div class="doit">
<img src="http://www.w3schools.com/tags/merglobe.gif" alt="" />
</div>
<area shape="circle" coords="124,58,8" alt="" title="" nohref="nohref" />
<div class="doit">
<img src="http://www.w3schools.com/images/venglobe.gif" alt="" />
</div>
</map>
<div><p>Hallo Sonne</p></div>
</body>
</html>

Throw this in the validator, see what you get. Look at errors, not warnings. I didn’t care to make your example better outside putting a DTD on it.

There is so much more to say about your “artificial philosophies” (by the way, it’s the first time rigorous knowledge is called that :wink: ) on graceful degradation, accessibility, “cheap effect” - which is to say you DON’T NEED IMAGE MAP to achieve such a simple task, cross browser,

Beautiful pages, interesting pages, user friendly pages and valid code
all being not found in your image map example, that I can’t possibly keep it in one single post.

Web dev, just because it can be done by almost everyone, it’s not something outside rigorous. Only the knowledge of some devs sits there. We need to take care as they don’t pass on such rigorous-less knowledge to unsuspecting users asking for help. Hence my not so mild tone.

Waiting for your response.

20

According to the w3c validator the above piece of code is invalid and so partly explains why it doesn’t work in some browsers.

I think any web developer worth his/her salt will have to cater for ie7 users as well.