Have a certain part of an image light up?

Question

I'm trying to make an interactive diagram, where the user can click on, let's say, 'Outputs', and the associated Outputs will light up on the diagram.

I've been searching for a way to do this with css or js, but can't really figure out a way to get it to work. I've considered using background-position to achieve this with an image sprite, but I think the image file will be much too large if this is what I had to do.

Is there any other way to achieve this effect that I'm missing? Any point in the right direction would be appreciated!

Thanks for any help! :-)

score 1 · Accepted Answer · answered Dec 07 '13 at 08:03

1

I would suggest that you store a map of the image areas that you need to highlight for each name and either draw round that map border on selection or possibly change the hue/saturation for either everything in the map area or everything outside of it.

answered Dec 07 '13 at 08:03

Steve Barnes

27,618
6
63
73

Thanks for the response! Do you think you could link me to some info on how to store a map of the images areas I need? I've never heard of this before :( – shan Dec 07 '13 at 08:07
1

Image maps are old html technology take a look at http://en.wikipedia.org/wiki/Image_map or google html image map. You will also find this, (http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map), answer useful. – Steve Barnes Dec 07 '13 at 08:13
Oh wow I didn't realize you meant an actual imagemap! I haven't used one of those in sooo long. Thanks for the info! This looks like just what I need. – shan Dec 07 '13 at 08:16
1

Take a look at http://www.outsharked.com/imagemapster/ looks like it could be a big help. – Steve Barnes Dec 07 '13 at 08:21

score 0 · Answer 2 · answered Dec 07 '13 at 08:27

If your diagram is made out of divs, you could try this approach:

Let's assume the user is expected to click on this div

<div id='inputBox' class='path1'></div>

And you would want the following divs to light up

<div id='pathToOut' class='path1'></div>
<div id='outputBox' class='path1'></div>

Register a click event handler with #inputBox

window.addEventListener('load',function() {
    document.getElementById('inputBox').onclick = lightPath;
},false);

The following lightPath function will handle the click event and scan the document for all elements with class 'path1'

function lightPath() {
    // get class of clicked item
    var itemClass = this.className; // eg. 'path1'

    // get all elements with same class
    var pathElems = document.body.getElementsByClassName('path1');

    // go through each element and change its border color etc..
    for(var x = 0; x < pathElems.length; x++) {
        pathElems[x].style.borderColor = 'orange';
    }
}

In this case it will simply change borders to orange. You can find a working example here http://jsfiddle.net/VAFWB/

Have a certain part of an image light up?

2 Answers2