0
私はこれで一日中壁に頭を打っていました。私はimagemapsterとブートストラップを実行しようとしています。私はどちらか一方しか動かすことができないようだ。私はそうのようnoConflict使用しようとしてきた：jquery.js no imagemapsterとブートストラップのコンフリクト
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" > < /script>
\t \t <!-- Load any Bootsrap JS files before calling jQuery.noConflict() -->
\t \t <script src="bootstrap.js"></script >
<script>
// Put jQuery 1.10.2 into noConflict mode.
var $jq1 = jQuery.noConflict(true); < /script>
\t \t <!-- Trying to use this for my imagemapster code -->
\t \t <script type="text/javascript
" src="
http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script><!--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 -->は、ここで私が働いているページへのリンクです。 imagemapsterが動作しており、ブートストラップが動作していないことに注意してください。ここでの目標は、大きな画像を反応的にすることです。 http://cjehost.com/qt/nipt/stacktest.php