Question

I have image map where i am trying to open another page by using JTip but i need this page should only on mouseover. I mean i do not want any click event on mapped image.

<map name="Map" id="Map">
  <area id="das" shape="rect" class="jTip" coords="222,84,342,147" href="resources/das.aspx" />
  <area id="zirku" shape="rect" class="jTip" coords="260,150,392,205" href="resources/zirku.aspx" />
  <area shape="rect" id="mub" class="jTip" coords="337,229,489,285" href="resources/mub.aspx" />
  <area shape="rect" id="sas" class="jTip" coords="543,239,668,292" href="resources/sas.aspx" />
  <area shape="rect" id="ruw" class="jTip" coords="190,317,281,369" href="resources/ruw.aspx" />
  <area shape="rect" id="hab" class="jTip" coords="386,382,485,436" href="resources/hab.aspx" />
  <area shape="rect" id="asb" class="jTip" coords="500,480,569,532" href="resources/asb.aspx" />
</map>

and Jquery is

$(document).ready(function(){
    var toolTipActive = false;
    $("area.jTip").hover(
        function() {
            var offsetX = 10;
            var offsetY = 0;
            var areaCoords = this.coords.split(',');
            var mapPosition = $('img#image1').offset();         
            var tipTop = mapPosition.top + (areaCoords[1] * 1) + offsetY;;
            var tipLeft = mapPosition.left + (areaCoords[2] * 1) + offsetX;
            if (!toolTipActive)
                JT_show(this.href,this.id,this.alt,tipLeft,tipTop);
            toolTipActive = true;
        }, 
        function() {            
            JT_destroy();
            toolTipActive =false;
        }
    );
}); 

function JT_destroy(){
    $('div#JT').remove();
}

function JT_show(url,linkId,title,posX,posY){

    if(title == false)title=" ";

    var de = document.documentElement;

    var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;

    var hasArea = w - getAbsoluteLeft(linkId);

    var clickElementy = posY; //set y position

    var queryString = url.replace(/^[^\?]+\??/,'');

    var params = parseQuery( queryString );

    if(params['width'] === undefined){params['width'] = 250};

    if(params['link'] !== undefined){

    $('#' + linkId).bind('click',function(){window.location = params['link']});

    $('#' + linkId).css('cursor','pointer');

    }

    if(hasArea>((params['width']*1)+75)){

        $("body").append("<div id='JT' style='width:"+params['width']*1+"px'><div id='JT_arrow_left'></div><div id='JT_close_left'>"+title+"</div><div id='JT_copy'><div class='JT_loader'><div></div></div>");//right side

        var arrowOffset = getElementWidth(linkId) + 11;

        //var clickElementx = getAbsoluteLeft(linkId) + arrowOffset; //set x position

        var clickElementx = posX; //set x position

    }else{

        $("body").append("<div id='JT' style='width:"+params['width']*1+"px'><div id='JT_arrow_right' style='left:"+((params['width']*1)+1)+"px'></div><div id='JT_close_right'>"+title+"</div><div id='JT_copy'><div class='JT_loader'><div></div></div>");//left side

        var clickElementx = getAbsoluteLeft(linkId) - ((params['width']*1) + 15); //set x position

    }

    $('#JT').css({left: clickElementx+"px", top: clickElementy+"px"});

    $('#JT_copy').load(url);

    $('#JT').show();

}

function getElementWidth(objectId) {

    x = document.getElementById(objectId);

    return x.offsetWidth;

}

function getAbsoluteLeft(objectId) {

    // Get an object left position from the upper left viewport corner

    o = document.getElementById(objectId)

    oLeft = o.offsetLeft            // Get left position from the parent object

    //while(o.offsetParent!=null) {   // Parse the parent hierarchy up to the document element

    //  oParent = o.offsetParent    // Get parent object reference

    //  oLeft += oParent.offsetLeft // Add parent left position

    //  o = oParent

    //}

    return oLeft

}



function getAbsoluteTop(objectId) {

    // Get an object top position from the upper left viewport corner

    o = document.getElementById(objectId)

    oTop = o.offsetTop            // Get top position from the parent object

    while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element

        oParent = o.offsetParent  // Get parent object reference

        oTop += oParent.offsetTop // Add parent top position

        o = oParent

    }

    return oTop

}

function parseQuery ( query ) {

   var Params = new Object ();

   if ( ! query ) return Params; // return empty object

   var Pairs = query.split(/[;&]/);

   for ( var i = 0; i < Pairs.length; i++ ) {

      var KeyVal = Pairs[i].split('=');

      if ( ! KeyVal || KeyVal.length != 2 ) continue;

      var key = unescape( KeyVal[0] );

      var val = unescape( KeyVal[1] );

      val = val.replace(/\+/g, ' ');

      Params[key] = val;

   }

   return Params;

}

function blockEvents(evt) {

              if(evt.target){

              evt.preventDefault();

              }else{

              evt.returnValue = false;

              }

}

Answer 1

Try this

$(function(){

   $("#Map area").unbind('click').removeAttr("onclick")[0].onclick = null;

});