"target" attribute on areas not working with clickNavigate

Without ImageMapster, you can use target="_blank" to open a new window. ImageMapster interevenes and uses javascript to navigate. We need to simulate target options when navigating.

[NKarasek]

OK - problems with the file at github - don’t ask.

Thought I had figured out my error, pasted again - but got the same result.

New id is : 8478644

Solution:

1. replace the call to imageMapster.js in your script with " script src=“https://gist.github.com/NKarasek/8478644.js”></script " (fixup the script tags)
2. run your script - output should be a complete listing of the js file - but it wont get processed by your browser.
3. cut the content of the file displayed and paste it into a local .js file.
4. replace the reference to the 8478644.js file above with a reference to your new, local version.

Lord knows why github processed the file I sent up this way - I have asked.

Well, I have just checked gist - and it is there

https://gist.github.com/NKarasek/847864

---

OK - this is getting ridiculous - and probably I’m to blame but can’t see exactly how/why.

I’ve put the file in my own js directory for you which can be referenced via:

script type=“text/javascript” src=“http://www.tbkd.org/js/jquery.imagemapster_NZK.js”> /script>

edit the script tabs as before

Anyway - the .js file you will end up with has all four of my updates

1. Provide the ability to specify tooltip content within each “area” tag using the title attribute as in area … title=‘tooltip content’
2. Provide the ability to define dashed lines as the rendered stroke (Chrome, IE, Opera : !(FF || Safari)
3. provide the ability to link to an area’s href attribute AND use the area’s target attribute when opening the new window - feature must be FALSE if using mailto: links
4. Provide the ability to define local stroke and fillColor + fillOpacity options within each area tag.

       EXAMPLE:
            <area AfillColor      = 'e0e000'
                  AfillOpacity    = .1
                  Astroke         = 'true'
                  AstrokeColor    ='ff0000' 
                  AstrokeOpacity  = .7
                  AstrokeWidth    = 6
                  AstrokeType     = 'dashed'
                  AstrokeDash     = '12,8'
                  shape='poly'

I added comments at the top of the .js file - they should get you on track.

Sorry for the confusion - I’m still trying to figure out github.

Nick

[jamietre]

For both examples, click the word (not the state) vermont. (Btw. if you have multiple areas grouped, you’ll need to either reproduce the target/href on each one, or use a cross reference of some kind).

For just simulating “_blank” in config: http://jsfiddle.net/jamietre/ynYmX/12/

    onClick: function(data) {
        data.e.preventDefault();
        var target = $(this).attr('target');
        if (target=='_blank') {
            window.open($(this).attr('href'));
        }
        return false;
    },

This should be good enough for most situations, however, window.open does not work exactly the same as target="_blank" and might be more susceptible to ad blockers.

A more complete way is to actually let the browser do it by creating and clicking a link. This uses a function to simulate a browser click I found here: http://stackoverflow.com/questions/1421584/how-can-i-simulate-a-click-to-an-anchor-tag

Example:

    onClick: function(data) {
        data.e.preventDefault();

        var el = $(this);
        var temp = $('<a>link</a>')
            .attr('href', el.attr('href'))
            .attr('target', el.attr('target'));

        fakeClick(data.e, temp[0]);
        return false;
    },

The fakeClick function:

function fakeClick(event, anchorObj) {
    if (anchorObj.click) {
        anchorObj.click()
    } else if (document.createEvent) {
        if (event.target !== anchorObj) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            var allowDefault = anchorObj.dispatchEvent(evt);
            // you can check allowDefault for false to see if
            // any handler called evt.preventDefault().
            // Firefox will *not* redirect to anchorObj.href
            // for you. However every other browser will.
        }
    }
}