Question

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

Answer 1

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!