0

I am currently building a website that uses alot of jQuery, it involves having an interactive map.

There will be points on the map, but what I need is, when you hover over the map point, a small description is shown (perhaps in a div called .mapitem-smalldescription) and then when you CLICK on the map point, a much larger full description with pictures would be shown (in another div called, for example .mapitem-fulldescription)

I know how to do onclick and onhover events on SEPERATE map points, but I have not been able to successfuly combine them together onto a single map points.

How can I do this please?

Zach

2 Answers 2

4

Assuming that each map point will have the class mappoint:

$('.mappoint').hover(function() {
    //do something on mouseover...
}, function() {
    //do something on mouseout...
}).click(function() {
    //do something on click...
});
2

If each one of your map points had the class point this might work:

Try this: http://jsfiddle.net/nrwyz/8/ .

Code:

HTML

<div class="point">
</div>

Javascript

$(".point").live("mouseover", function() {
    //code to show description
    $(this).append('<div class="mapitem-smalldescription">Small description</div>');
});

$(".point").live("mouseout", function() {
    //code to show description
    $(".mapitem-smalldescription").fadeOut(200);
});

$(".point").live("click", function() {
    //code to full description
    $(this).append('<div class="mapitem-fulldescription">Full description</div>');

});

CSS

.point {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background-color: #550000;
}

.mapitem-smalldescription {
    width: 100px;
    height: 100px;
    background-color: #00FF00;
}

.mapitem-fulldescription {
    width: 100px;
    height: 100px;
    background-color: #FF0000;
}

EDIT: Here is a version which behaves more closely to the way you described: http://jsfiddle.net/nrwyz/23/ . Let me know if there is anything else you need modified or added.

I hope that helps!

4
  • Hey Kevin - How would I stop ".mapitem-smalldescription" from appearing when hovering over the full description? It seems as though the "hover" event is extending to ".mapitem-fulldescription" when it is appended. I tried a few things to stop it from appearing, but I can't make it work. Thanks Feb 22, 2011 at 18:02
  • To expand, the append event seems to be occuring infinitely, if you hover over the map-point at more than one location AND if you then hover over the appended div. Is there a solution to stop this as it not only causes graphical glitches, it also loads an long amount of data into the browser as its occuring infinitely. Thanks Feb 22, 2011 at 18:40
  • I'll see if I can edit the code a little to make the reult a little more desirable. I apologize for the roughness of the original code, it was just a really quick mockup. Feb 22, 2011 at 18:43
  • @Zach Nicodemous I modified my old code to allow the code to behave more closely to the way you described. Here is the JSFiddle: jsfiddle.net/nrwyz/23 . Feb 22, 2011 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.