jquery.js noConflict for imagemapster和bootstrap

时间:2017-01-06 08:23:58

标签: jquery twitter-bootstrap

我一整天都用头撞在墙上。我试图运行imagemapster和bootstrap。好像我只能跑一个或另一个。我一直试图像这样使用noConflict:



< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" > < /script>
		<!-- Load any Bootsrap JS files before calling jQuery.noConflict()  -->
		<script src="bootstrap.js"></script >
  < script >
  // Put jQuery 1.10.2 into noConflict mode.
  var $jq1 = jQuery.noConflict(true); < /script>
		<!-- Trying to use this for my imagemapster code -->
		<script type="text/javascript
" src="
http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
&#13;
&#13;
&#13;

&#13;
&#13;
 <!--this is the imagemapster code I'm trying use jquery/1.7.1 with-->
 < script type = "text/javascript" >
   $(document).ready(function() {
     function state_change(data) {
       //alert(data.state+":"+data.selected);
     }
     $('b').bind('mouseover', function() {
       $('img').mapster('tooltip', this, "The text is: " + $(this).text());
     });
     $('img').mapster({
       staticState: true,
       showToolTip: true,
       noHrefIsMask: false,
       onStateChange: state_change,
       fill: true,
       fillColor: 'ffffff',
       fillOpacity: 0,
       mapKey: "group",
       strokeWidth: 2,
       stroke: true,
       strokeColor: 'f27821',
       render_select: {
         fillColor: '000000',
         fillOpacity: 0.2
       },
       areas: [{
         key: 'top',
         stroke: false,
         fillOpacity: 0,
         toolTip: '<div class="blkBG pg6ToolTip1"><ul><li>Almost all triploid pregnancies result in miscarriage in the first or second trimester</li><li>The chance of triploidy does NOT increase with maternal age</li><li>At 10 weeks gestation, 1 in 1,000 pregnancies is affected by triploidy</li></ul></div>'
       }, {
         key: 'left',
         stroke: false,
         fillOpacity: 0,
         toolTip: '<div class="blkBG pg6ToolTip2"><div class="pg6Border"><h3>Paternal in origin:</h3></div><div class="pg6Border"><div class="half">Placenta:</div><div class="half">Large, abnormal (cystic)</div></div><div class="pg6Border"><div class="half">Fetus:</div><div class="half">Abnormal</div></div><div class="pg6Border"><div class="half">Associated with partial molar pregnancy?</div><div class="half">Yes, maternal risk for gestational trophoblastic disease (GTD)</div></div></div>'
       }, {
         key: 'right',
         stroke: false,
         fillOpacity: 0,
         toolTip: '<div class="blkBG pg6ToolTip3"><div class="pg6Border"><h3>Maternal in origin:</h3></div><div class="pg6Border"><div class="half">Placenta:</div><div class="half">Small, normal (non-cystic)</div></div><div class="pg6Border"><div class="half">Fetus:</div><div class="half">Abnormal, growth-restricted</div></div><div class="pg6Border"><div class="half">Associated with partial molar pregnancy?</div><div class="half">No, no known association</div></div></div>'
       }]
     });
   }); < /script>

<!-- begin snippet: js hide: false console: true babel: false -->
&#13;
&#13;
&#13;

这是我正在处理的页面的链接。注意imagemapster正在工作,而bootstrap则没有。我的目标是使大图像响应。 http://cjehost.com/qt/nipt/stacktest.php

1 个答案:

答案 0 :(得分:0)

这不是查询问题。它与imagemapster和bootstrap之间的脚本冲突有关。换句话说,两个脚本都使用jquery的一个实例工作,但带有usemap的图像没有响应。