开发者

How do I add OnClick function that goes to a page link (url) with javascript/jquery

开发者 https://www.devze.com 2023-04-07 14:51 出处:网络
Ok I am using the fantastic map plugin found here: http://jvectormap.owl-hollow.net/#maps I am a noob ... can\'t figure out how to implement the parameter mentioned in the \"reference\" part on the

Ok I am using the fantastic map plugin found here:

http://jvectormap.owl-hollow.net/#maps

I am a noob ... can't figure out how to implement the parameter mentioned in the "reference" part on the documention which states you can use "onRegionClick".

Can anyone tell me how to implement this so that when I click on a region ( A State on the US Map ) it goes to a URL?

If this helps at all, my current working example shows the info I want on the 开发者_StackOverflowpage using the Parameter I want, but only in a div (div is called #location ) on the existing page. I would like it to got to a url instead.

<script>
$(function(){
    $('#main').vectorMap({
        map: 'usa_en',
        color: '#aaaaaa',
        hoverColor: false,
        hoverOpacity: 0.5,
        colors: {pa:'#F00, ny:'#F00, },
        backgroundColor: 'false',
        onRegionClick: showmyinfo       
    });
});

function showmyinfo(event,label){
    switch (label)
    {
        case 'pa':
            $('#location').html('<h3>PA Locations:</h3><ul><li>Location 1</li><li>123 This Street</li><li>Havertown, PA 19083</li></ul>');
            break;
        case 'ny':
            $('#location').html('<h3>NY Locations:</h3><ul><li>Location 1</li><li>123 This Street</li><li>Brooklyn, NY 11249</li></ul>');
            break;
    }
}
</script>

Any help greatly appreciated


Maybe doing this would work:

$(function(){
    $('#main').vectorMap({
        ..
        onRegionClick: function (event, code) {
            window.location = 'page.php?code=' + code;
        }
    });
});


I found this to work for me.

onRegionClick: function(event, code){
                        if (code == "US-AZ") {window.location = '/url1'}
                        if (code == "US-TX") {window.location = '/url2'}
                        if (code == "US-CA") {window.location = '/url3'}
                        if (code == "US-NV") {window.location = '/url4'}
                        if (code == "US-LA") {window.location = '/url5'}
},


i just had the same problem. but i found a solution:

$(document).ready (function() {
$('#map').vectorMap( {
    map: 'germany_en',
    backgroundColor: 'red',
    hoverColor: 'black',
    onRegionClick: function(event, code) {
        if (code === 'th') {
            window.location = 'index.php?id=2'
        }
        else if (code === 'mv') {
            window.location = 'index.php?id=3'
        }
        else if (code === 'rp') {
            window.location = 'index.php?id=4'
        }
    }
});
});

now you can create a separate url for every region (identified by its code).

the form "index.php?id=2" comes from TYPO3, so you should adapt it to what you're using...

greetings

0

精彩评论

暂无评论...
验证码 换一张
取 消