Question

I have a pie chart, I also have a legend with words that identifies what each color on the pie chart represents. I am trying to implement a hover element, so when the user hovers over each word in the legend, it highlights that section of the pie chart (basically by swapping images). So the users have a point of reference

I have seven words in the legend, each word represents its own div (id=legend1,2,3, etc.), I can’t get the HTML code to handle dynamically change the pie chart (div class=chart), based on a hover command coming from several different divs(id=legend1,2,3,etc.). In the link added, it works if I am only using one div(legend1) to change the div (class=chart) from it’s default image to another. But trying to add multiple divs (legend2,3,etc.)stops the first legend hover effect from working.

I think this calls for javascript, but I am not sure. Can someone please help me with this, I am not too skilled in javascript, if in fact it is the case.

http://jsfiddle.net/6BfR6/46/

Answer 1

How about using this technique:

http://jsfiddle.net/KsYrH/1/

Basically nested div tags absolute positioned that can be target with parent element hover. No javascript needed.

<ol class="pie">
    <li class="slice1">Blueberries 37%
        <div class="drawing"></div></li>
    <li class="slice2">Raspberries 23% 
        <div class="drawing"></div></li>
    <li class="slice3">Cream 50% 
        <div class="drawing"></div></li>
</ol>

CSS

.pie {
    background: #eeeeee;
    width: 7em;
    padding: 0.5em;
    position: relative; /* offset drawings relative to this element */
}

.pie .drawing {
    position: absolute; /* drawings are absoluted */
    height: 20px;
    bottom: -20px;
}

ol li {
    cursor: pointer;
}

.slice1 .drawing {
    left: 0px;
    width: 74px; /* 2 x percentage */
    background: #6666cc;
}
.slice1:hover .drawing {
    background: #6666ff;
}

.slice2 .drawing {
    left: 74px;
    width: 46px; /* 2 x percentage */
    background: #cc6666;
}
.slice2:hover .drawing {
    background: #ff6666;
}


.slice3 .drawing {
    left: 120px;
    width: 100px; /* 2 x percentage */
    background: #ccaaaa;
}
.slice3:hover .drawing {
    background: #ffeeee;
}