Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using onClick in an area definition to specify webpage target window #280

Closed
TonyHinkel opened this issue May 8, 2017 · 1 comment · Fixed by #354
Closed

Using onClick in an area definition to specify webpage target window #280

TonyHinkel opened this issue May 8, 2017 · 1 comment · Fixed by #354
Milestone

Comments

@TonyHinkel
Copy link

Hello and thanks to anyone that has a suggestion...

My project is a city map of neighborhoods along with a list of consolidated areas that include several individual neighborhoods. Each individual neighborhood in the city as well as lines in the list of consolidated areas are defined in the markup portion. I'm trying to cause a click within any defined area to open up a webpage in a new window (as in target="_blank"). Below are one relevant line from the markup (for one of my "consolidated" areas) as well as my script.

Currently ImageMapster functionality works fine except that the webpage opens in the same window as my imagemap and replaces it. I've tried using onClick: within the 'Central Charm' area in the script, for instance, to include some variation of but can't seem to get the syntax right. No matter how I try to use onClick it kills ImageMapster (highlighting disappears) although the referenced page does open in a new window (probably just from the markup). What's aggravating is that I thought I had it working with a test file but lost that and now can't recreate it. Any suggestions would be appreciated and I'm very much of a noob. Thanks!

<area target="_blank" alt="Central Charm" title="Central Charm" data-key="Central Charm" href="http://www.tkhrealty.com/listing-report/Central-Charm/290059" coords="26,503,203,520" shape="rect">

<script>
$(function(){
    $('img').mapster();
	$('#hoods').mapster({
    mapKey: 'data-key',
	clickNavigate: true, 
    render_highlight: {
       fillColor: 'ad07af',
	   fillOpacity: 0.5
    },	
	areas: [
            {
			    key: 'Central Charm',
				includeKeys: 'North Capitol Hill,Capitol Hill,City Park West,Cheesman Park,City Park,Congress Park,South Park Hill,Hale,Montclair',
                render_highlight: {
                   fillColor: 'ad07af'
                }
            },
            {
			    key: 'Northern Class',
				includeKeys: 'Whittier,Skyland,Five Points,North Park Hill,Cole,Clayton',
                render_highlight: {
                   fillColor: 'ad07af'
                }
            },
(...several more areas defined...)					
           ]		
    });
});

</script>
@techfg
Copy link
Collaborator

techfg commented Jan 25, 2021

Full support for href & target handling has been added in #354

@techfg techfg closed this as completed Jan 25, 2021
@techfg techfg added this to the 1.5.0 milestone Jan 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants