Search code examples
javascriptangularjsimagemap

Angular JS - Image Maps and filters

I took a bit of a break from learning Angular for a while, and I'm jumping back in and am having something of an issue controlling an image map.

Basically, I've got a map with a bunch of weirdly shaped areas, and I want the mouse rollover to control a filter in an earlier ngRepeat - I know that I can set ng-mouseEnter on standard divs to change the value of a model and update my data in real time, but I have no idea how to get that working inside a map as ng-mouseEnter won't work with standard image maps.

My thought was, I set a really simple inline script function like this:

function showThis(thing) {
    return thing;
}

and have my onMouseEnter part of the image map update that function, then reference that in my filter. A quick example of what I was thinking of in code (with one of my image map areas copy-pasted, to show that it would be kind of difficult to just make invisible divs) - 

...
<script>
function showThis(thing) {
    console.log(thing);
    return thing;
};
</script>

<div class="foobars" ng-repeat="foo in fooBar | filter:showThis():true">
    <p class="foo_text">{{foo.snippet}}</p>
    <img ng-src="{{foo.imagePath}}">
</div>

<div class="images">            
    <img src="images/map/base.png" usemap="#imagemap">
        <map name='imagemap'> 
            <area shape='poly' alt='Area One' href='' coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296' onMouseEnter='showThis(1)'/> 
            <area shape='poly' alt='Area Two' href='' coords='245,170,186,194,144,176,149,136,212,110,252,123'  onMouseEnter='showThis(2)' /> 
        </map>
</div>

But that doesn't work, and I can't work out how to get the idea running. I'm clearly missing something obvious, but I don't know what - I know I could create a custom filter in the controller, but I still don't know how to associate the image map's "onMouseOver" with the filters inside the controller. Angular and this particular feature of imagemaps don't seem to work too well together to my lame eyes.

I made a plunkr here to show my broken-ass code. Where am I going wrong?

Solution

  • I forked your plunker after making some changes that, I think, solve the problem you were trying to solve...

    What @wZVanG says is correct, regarding the use of ng-mouseenter.

    Additionally, I wasn't quite sure what your plan was with showThis and your second ng-repeat, so I added a function, setSnippet that is called on mouse enter and then display the correct snippet under the image through a simple div.

    Hope that helps.