Jaisone
commented
11 years ago Hi
Can you help me by showing how we can simulate "target" on ImageMapster since i need to create _parent links real bad.. Any help much appreciated
Thanks
Closed jamietre closed 3 years ago
Jaisone
commented
11 years ago Hi
Can you help me by showing how we can simulate "target" on ImageMapster since i need to create _parent links real bad.. Any help much appreciated
Thanks
jamietre
commented
11 years ago 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.
}
}
}Hi James
Thank you very much for the codes but im still unable to make it work, im using one of the samples provided and also im a newbie to javascript...
This is the code im using for the project...hope you can help out..Thank you
image.mapster(
{
fillOpacity: 0.4,
fillColor: "000000",
strokeColor: "cccccc",
strokeOpacity: 0.8,
strokeWidth:2,
stroke: true,
isSelectable: true,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
clickNavigate: true,
onClick: function (e) {
var newToolTip = defaultDipTooltip;
$('#selections').html(xref[e.key]);
if (e.key==='asparagus') {
newToolTip = "OK. I know I have come down on the dip before, but let's be real. Raw asparagus without any of that " +
"delicious ranch and onion dressing slathered all over it is not so good.";
}
image.mapster('set_options',{areas: [{
key: "mb-01",
toolTip: newToolTip
}]
});
},
showToolTip: true,
toolTipClose: ["area-mouseout", "area-click"],
areas: [
{
key: "mb1",
toolTip: defaultDipTooltip
},
{
key: "mb2c",
toolTip: defaultDipTooltip2
},
{
key: "mb2a",
toolTip: defaultDipTooltip3
},
{
key: "mkb2",
toolTip: defaultDipTooltip4
},
{
key: "mkb1",
toolTip: defaultDipTooltip5
},
{
key: "car1",
toolTip: defaultDipTooltip6
},
{
key: "mb3-5",
toolTip: defaultDipTooltip7
},
{
key: "mb6",
toolTip: defaultDipTooltip8
},
{
key: "mb7",
toolTip: defaultDipTooltip9
},
{
key: "mb8-9",
toolTip: defaultDipTooltip10
},
{
key: "mb10",
toolTip: defaultDipTooltip11
},
{
key: "mb10a",
toolTip: defaultDipTooltip12
},
{
key: "mb11",
toolTip: defaultDipTooltip13
},
{
key: "mb15",
toolTip: defaultDipTooltip14
},
{
key: "mb16",
toolTip: defaultDipTooltip15
},
{
key: "mkb3",
toolTip: defaultDipTooltip16
},
{
key: "asparagus",
strokeColor: "FFFFFF"
}
]
});
});
</script>
It doesn't look like you used either of the examples I posted here in the code you provided, so I am not sure why you'd expect anything to have happened. You need to take the code I provided for onClick event, and substitute that code into your own work.
Yours:
onClick: function (e) {
var newToolTip = defaultDipTooltip;
$('#selections').html(xref[e.key]);
...Take the onClick code I posted (one of the two options) and add it into your own config.
Jaisone
commented
11 years ago Im really sorry, i posted the un-modified codes, this are the code. my apologies
image.mapster(
{
fillOpacity: 0.4,
fillColor: "000000",
strokeColor: "cccccc",
strokeOpacity: 0.8,
strokeWidth:2,
stroke: true,
isSelectable: true,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
clickNavigate: true,
onClick: function(e) {
debugger;
e.e.preventDefault();
var target = $(this).attr('target');
if (target=='_blank') {
window.open($(this).attr('href'));
}
return false;
},
showToolTip: true,
toolTipClose: ["area-mouseout", "area-click"],
areas: [
{
key: "mb1",
toolTip: defaultDipTooltip
},
{
key: "mb2c",
toolTip: defaultDipTooltip2
},
{
key: "mb2a",
toolTip: defaultDipTooltip3
},
{
key: "mkb2",
toolTip: defaultDipTooltip4
},
{
key: "mkb1",
toolTip: defaultDipTooltip5
},
{
key: "car1",
toolTip: defaultDipTooltip6
},
{
key: "mb3-5",
toolTip: defaultDipTooltip7
},
{
key: "mb6",
toolTip: defaultDipTooltip8
},
{
key: "mb7",
toolTip: defaultDipTooltip9
},
{
key: "mb8-9",
toolTip: defaultDipTooltip10
},
{
key: "mb10",
toolTip: defaultDipTooltip11
},
{
key: "mb10a",
toolTip: defaultDipTooltip12
},
{
key: "mb11",
toolTip: defaultDipTooltip13
},
{
key: "mb15",
toolTip: defaultDipTooltip14
},
{
key: "mb16",
toolTip: defaultDipTooltip15
},
{
key: "mkb3",
toolTip: defaultDipTooltip16
},
{
key: "asparagus",
strokeColor: "FFFFFF"
}
]
});
});
</script>
</head>
<body>
<img src="basement-1.jpg" width="976" height="559" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area target="_blank" shape="poly" name="mb1" coords="237,248,204,250,191,252,182,256,177,264,174,273,173,283,173,311,174,393,173,423,174,441,179,461,186,479,196,499,209,518,217,529,231,540,238,544" href= "https://www.google.com"/>
<area shape="rect" name="mb2c" coords="254,250,318,323" href="https://www.google.com" />
sorry about the debugger -- remove that line :)
Are you getting any errors? It looks correct.
Jaisone
commented
11 years ago Hi Again, Thank you for your support on this..
I have tried removing the debugger line but it still opens the same way, maybe im missing something..ive put in the full codes for your view
$(document).ready(function () {
var image = $('img');
var xref = {
};
var defaultDipTooltip = 'MB-01 - Sushi King';
var defaultDipTooltip2 = 'MB-02C - Kinsahiya';
var defaultDipTooltip3 = 'MB-02A - Secret Recipe';
var defaultDipTooltip4 = 'MKB-02 - Spinnluxe';
var defaultDipTooltip5 = 'MKB 1-01 - Maloevera';
var defaultDipTooltip6 = 'Car Park Counter';
var defaultDipTooltip7 = 'MB-03,04&05 - <br/>Zen Shabu Shabu';
var defaultDipTooltip8 = 'MB-06 - Hong Kong Kim Gary Restaurant';
var defaultDipTooltip9 = 'MB-07 - Nandos';
var defaultDipTooltip10 = 'MB08,09,09A&1-09<br/> - SDS Café';
var defaultDipTooltip11 = 'MB-10 - Shihlin';
var defaultDipTooltip12 = 'MB-10A - TBC';
var defaultDipTooltip13 = 'MB-11,12,13&14 -<br/> Sizlling StoneGrill';
var defaultDipTooltip14 = 'MB-15 - CITY ONE CAR CARE CENTRE';
var defaultDipTooltip15 = 'MB-16 - Kapitan Mart Sdn. Bhd.';
var defaultDipTooltip16 = 'MKB-3 - Auntie Annes';
image.mapster(
{
fillOpacity: 0.4,
fillColor: "000000",
strokeColor: "cccccc",
strokeOpacity: 0.8,
strokeWidth:2,
stroke: true,
isSelectable: true,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
clickNavigate: true,
onClick: function(e) {
e.e.preventDefault();
var target = $(this).attr('target');
if (target=='_blank') {
window.open($(this).attr('href'));
}
return false;
},
showToolTip: true,
toolTipClose: ["area-mouseout", "area-click"],
areas: [
{
key: "mb1",
toolTip: defaultDipTooltip
},
{
key: "mb2c",
toolTip: defaultDipTooltip2
},
{
key: "mb2a",
toolTip: defaultDipTooltip3
},
{
key: "mkb2",
toolTip: defaultDipTooltip4
},
{
key: "mkb1",
toolTip: defaultDipTooltip5
},
{
key: "car1",
toolTip: defaultDipTooltip6
},
{
key: "mb3-5",
toolTip: defaultDipTooltip7
},
{
key: "mb6",
toolTip: defaultDipTooltip8
},
{
key: "mb7",
toolTip: defaultDipTooltip9
},
{
key: "mb8-9",
toolTip: defaultDipTooltip10
},
{
key: "mb10",
toolTip: defaultDipTooltip11
},
{
key: "mb10a",
toolTip: defaultDipTooltip12
},
{
key: "mb11",
toolTip: defaultDipTooltip13
},
{
key: "mb15",
toolTip: defaultDipTooltip14
},
{
key: "mb16",
toolTip: defaultDipTooltip15
},
{
key: "mkb3",
toolTip: defaultDipTooltip16
},
{
key: "asparagus",
strokeColor: "FFFFFF"
}
]
});
});
</script>
</head>
<body>
<img src="basement-1.jpg" width="976" height="559" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area target="_blank" shape="poly" name="mb1" coords="238,247,205,249,192,251,183,255,178,263,175,272,174,282,174,310,175,392,174,422,175,440,180,460,187,478,197,498,210,517,218,528,232,539,239,543" href= "https://www.google.com.my/"/>Are you getting any errors? Do the jsfiddle examples I posted work for you? It's hard for me to guess what is wrong
szepeviktor
commented
10 years ago it would be great to build in the target="_blank" feature
NKarasek
commented
10 years ago A very small change to jQuery.imageMapster.js (six lines of code) and a new config option in your source script provides the functionality you are asking for. IM will look inside each "area" tag for a "target" attribute and, if the new config option is true (hrefHonorTarget), AND clickNavigate is true AND there is a real href (not '#'), IM will call window.open using the target attribute specified. In the past, IM used window.location.href to call the new URL - which placed the results in the current window regardless of the area's target attribute. If hrefHonorTarget is false, the existing behaviour will be retained.
Note that the results of using window.open are not consistent across all browsers. There is a lot of discussion on the web regarding this topic - not necessary to repeat it all here :-)
Contact me, or comment in this forum, if you would like more information.
szepeviktor
commented
10 years ago Thanx. Please let me when this will be implemented.
NKarasek
commented
10 years ago Hello Szépe,
I have just sent an email to Jamie - letting him know of my additions to IM.
As Jamie's code is totally open-source, I feel I can send you the .js file I have modified.
Please note my comments on github. Give it a try using the new js file and see if it does what you have been asking for :-)
Usage:
That's all.
Actually, you don't even need the config option - the default is true. Include it only if you want to revert to the existing method by setting it to false.
Note that dashed strokes are also supported in this version.
Cheers,
Date sent: Wed, 15 Jan 2014 17:54:16 -0800 From: Szépe Viktor notifications@github.com Send reply to: jamietre/ImageMapster reply@reply.github.com To: jamietre/ImageMapster ImageMapster@noreply.github.com Copies to: NKarasek Nick@TBKD.org Subject: Re: [ImageMapster] "target" attribute on areas not working with clickNavigate (#70)
Thanx.
Please let me when this will be implemented.
Reply to this email directly or view it on GitHub. No virus found in this message. Checked by AVG - www.avg.com Version: 2014.0.4259 / Virus Database: 3681/7005 - Release Date: 01/15/14
Cheers,
Nick Karasek
Karatedo Yondan, Renshi, Shidooin Iaido Shodan Triangle Bushin Kan Dojo www.tbkd.org (919) 812-6933 The following section of this message contains a file attachment prepared for transmission using the Internet MIME message format. If you are using Pegasus Mail, or any other MIME-compliant system, you should be able to save it or view it from within your mailer. If you cannot, please ask your system administrator for assistance.
---- File information ----------- File: jquery.imagemapsterNZK.js Date: 15 Jan 2014, 21:24 Size: 173251 bytes. Type: Unknown
szepeviktor
commented
10 years ago The code is missing.... You can paste it here: https://gist.github.com/ and share the link Or open a Pull Request: https://github.com/jamietre/ImageMapster/pulls
NKarasek
commented
10 years ago Tried the paste option - got a link - was invalid - might need a few minutes to get to the servers - will try again shortly. N
szepeviktor
commented
10 years ago NKarasek
commented
10 years ago 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:
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>
Anyway - the .js file you will end up with has all four of my updates
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
bradkelleykc
commented
9 years ago Coming to this conversation late. It's very important to note that linking with the onClick event won't work if the clickNavigate property is set to true; I assume that's why it defaults to false. In the original post above, the poster has it set to true, so I assume this is the mysterious reason it wasn't working. Had the same trouble on my end, and I don't think this was documented at the Docs pages for the onClick handler or clickNavigate property. Hope this helps someone, because this was quite perplexing on my end.
kimdaley
commented
9 years ago I am very new to jquery. I am using imagemapster to create an interactive map. I've set it all up and it is working in Chrome and Safari as well as my mobile browser. I haven't tried it on ie yet. I can't seem to get the map to work in Firefox. When looking in the console, it appears that it has something to do with the way I am calling image.mapster from my external js file. Any suggestions would be great! the page is here: www.myusara.com/sample-map/
pathana
commented
5 years ago @NKarasek Thank you Nick this works great!!
techfg
commented
3 years ago Full support for href & target handling has been added in #354
Without ImageMapster, you can use
target="_blank"to open a new window. ImageMapster interevenes and uses javascript to navigate. We need to simulatetargetoptions when navigating.