Changing opacity on Mouseover

Question

The ultimate goal of my project is to make my image of circle chart interactive on mouseovers. I want the pieces of the circle to change opacity to .5 (from 1) when the user hovers them. I have an image of the chart but I'm not sure how to make areas of one single image change opacity on hover. I have tried several things:

• I image mapped the chart with each piece in its own map, but I wasn't sure how to change opacity of an area of one single image (css)(if its even possible)
• My second approach was that i sliced the chart up into individual pieces and made their opacity .5 and saved them all separately. Then, I image mapped the single image of the chart and tried to load the individual piece on hover (css)
• My final approach was saving each piece of the chart as individual images and when the image is hovered, change the opacity to .5 with css. This works perfectly except i am not sure how to position the pieces to form a perfect circle in dreamweaver.

Any direction or advise is greatly appreciated. I am willing to learn javascript or jquery to help get this done.

Thank you

EDIT Image of the chart is now attached

https://i.sstatic.net/KwIfY.jpg

Answer 1

I suggest using svg. Here is an implementation of exactly what you are trying to do, because I felt like learning d3.js today:

http://jsfiddle.net/6m26k/1/

You don't need to make the chart through code though, because you can just load the svg onto the page with html5 and use css similar to mine:

.arc.filled:hover {
   opacity: .8;
   cursor: pointer;
}

Answer 2

I'm not sure if I understood the question right regarding the current answers but if you want to make the parts of the chart interactive I have 2 approaches:

1. To achieve the effect with pure CSS I guess you need to divide the chart in individual images as you already mentioned. The positioning is quite simple. I've used in my demo below one image an let it rotate. In your case you can cut each part of the chart individually and get the right place for them with absolute positionig.

2. Again as you already mentioned you can use map area to define the parts of the chart. With a plugin like this: ImageMapster you can achieve what you want. I've used this once for the following map. It's again very simple, when hovering any part of the map it's background will be replaced by another background. In your case you could save the chart with full opacity and display on hover an image of the chart with 50% opacity.

Demo

The Demo is not very clean as I didn't spent much time in position the parts perfectly but you can see how it works.

transform: rotate(45deg);

Answer 3

Check this demo. Hover your cursor exactly on the eyes of the owl, and you will see the opacity changing. It will not change if you hover on the rest of the image.

http://jsfiddle.net/q6d57/14/

$('.eye1').on('mouseenter mouseleave', function(e) {
    $('.box2').stop(true, false).fadeToggle(1500)
});

Answer 4

Maybe create a div and put each image as the background or content of one div (in order), then create a listener for the div class to change opacity upon mouseenter or mouseleave using jQuery.

Here's a simple example (pardon any mistakes):

jQuery:

$( ".somedivclass" )
  .mouseenter(function() {
    $(this).fadeTo(200, 0.5);
  })
  .mouseleave(function() {
    $(this).fadeTo(200, 1);
  });

Here's more info on $.mouseenter(). Here's some for $.fadeTo().

Answer 5

I don't know if CSS3 transition will fit to you: http://www.w3schools.com/css/css3_transitions.asp

.chart-item { opacity: 0.5; transition:opacity 2s; }
.chart-item:hover { opacity: 1; }

Check documentation for browser support.