Я попытался использовать bootstrap с другим плагином карты изображений, который называется imagemapster.Перед использованием плагина мои изображения выровнены по центру для «класса центральных блоков», который я поместил.Но после использования плагинов карты изображений изображения просто отказываются выравнивать центр.Я пробовал другие плагины карты изображений, но результаты те же.Пожалуйста, помогите!
$(document).ready(function() {
$('img').mapster({
fillColor: 'ff0000',
fillOpacity: 0.3,
});
});
#first{
position:absolute;
left: 35%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#second{
margin-bottom: 1%;
position:absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#third{
position:absolute;
left: 65%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.carousel-inner img {
margin: auto;
}
#componentT, #componentF, #componentB{
max-height:75vh;
height:auto;
object-fit: contain;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel='stylesheet' type="text/css" href='./components.css' />
<link rel='stylesheet' type="text/css" href='../everything.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.metadata.min.js"></script>
<script type="text/javascript" src="../jquery.maphilight.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../jquery.imagemapster.js"></script>
<script type="text/javascript" src="../jquery.imagemapster.min.js"></script>
<!-- <script type="text/javascript" src="../jquery.rwdImageMaps.js"></script>
<script type="text/javascript" src="../jquery.rwdImageMaps.min.js"></script> -->
<script src='./components.js'></script>
</head>
<body>
<div class='logo'>
<img id='logo' src='../cerv2_logo.png'>
<a id='title'>Components</a>
</div>
<div class='header'>
<ul class='elements'>
<li class='header-element'>
<a class='element-text' href='../index.html'>Home</a>
</li>
<li class='header-element'>
<div class='drop'>
<a class='element-text' href='../components/components.html'>Components</a>
<div class='drop-content'>
<a href='../compressor/compresser.html'>Compressor</a>
<a href='../circuit/circuit.html'>Circuit</a>
<a href='../damper/damper.html'>Dampers</a>
<a href='../screen/screen.html'>Screen</a>
</div>
</div>
</li>
<li class='header-element'>
<a class='element-text' href='./cycles/cycles.html'>Cycle</a>
</li>
<li class='header-element'>
<a class='element-text' href='./calculations/calculation.html'>Calculations</a>
</li>
</ul>
</div>
<div class='background'>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">
<button id='first'>
Front
</button>
</li>
<li data-target="#myCarousel" data-slide-to="1">
<button id='second'>
Top
</button>
</li>
<li data-target="#myCarousel" data-slide-to="2">
<button id='third'>
Back
</button>
</li>
</ol>
<div class='carousel-inner'>
<div class="item active">
<img src='../CERV_front.JPG' alt='CERV2' usemap='#mapp' id='componentF' class='center'>
<div class="carousel-caption">
Front
</div>
<map name="mapp" id='map1'>
<area id='compresser' shape='poly' coords='163,484,161,465,180,433,218,432,260,439,270,467,269,505,262,540,232,556,184,552,161,528'
href='../compressor/compresser.html' >
<area id='circuit' href="../circuit/circuit.html" coords="186,148,281,260" shape='rect' >
<area id='LED' href="../screen/screen.html" coords="202,68,205,90,274,93,266,72" shape="poly" >
<area id="damper" href="../damper/damper.html" coords="162,277,245,372" shape="rect" >
</map>
</div>
<div class="item">
<img src='../CERV_Top.JPG' alt='CERV2' usemap='#mappp' id='componentT' class='map'>
<div class="carousel-caption">
Top
</div>
<map name="mappp" id='map1'>
</map>
</div>
<div class="item">
<img src='../CERV_back.JPG' alt='CERV2' usemap='#mapppp' id='componentB' class='map'>
<div class="carousel-caption">
Back
</div>
<map name="mapppp" id='map1'>
</map>
</div>
</div>
</div>
</div>
</body>
</html>