如何使覆盖图适合其他图像
[英]How to make a overlay fit in another image
问题描述
I currently have working system where you check the checkboxes it overlays the image however, the problem I am having is getting the image postioned inside the computer screen so it's not on the very edge. 
我目前有一个工作系统，您可以在其中选中覆盖图像的复选框，但是，我遇到的问题是图像已放置在计算机屏幕内部，因此不是很靠边。 Cany Anyone help with this? 可以有人帮忙吗？
<html><head>
<style>
.overlay {
display: none;
position: absolute;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
right: -780px;
width: 452px;
height: 344px;
background: url(BLANK-COMPUTER-SCREEN.png);
}
#station_A { top: 5px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
</style>
<div id="map" >
<span id="station_A" class="overlay"><img style="background:url(/BLANK-COMPUTER-SCREEN.PNG)" src="/tn_WhiskersPrinceworkup.png" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
</form>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function () {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
</script>
2 个解决方案
解决方案1
0 已采纳 2015-07-21 00:56:59
you need to set the position:absolute to your #station_A and #station_b instead of .overlay , because you use .overlay to toggle in jQuery, so it will loose the property. 您需要将position:absolute设置为#station_A和#station_b而不是.overlay ，因为您使用.overlay在jQuery中进行切换，因此将失去该属性。
here is a snippet: 这是一个片段：
$(document).ready(function() { $("input[type='checkbox']").change(function() { var state = $(this).val(); $("#" + state).toggleClass("overlay"); }); $('#checkbox1').change(function() { if (this.checked) $('#map').fadeIn('slow'); else $('#map').fadeOut('slow'); }); });
.overlay { display: none; } .right { position: absolute; right: 0px; width: 300px; border: 3px solid #8AC007; padding: 10px; } #map { position: relative; /*right: -780px; removed for demo purposes */ width: 452px; height: 344px; background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat; } #station_A { top: 8%; /* whatever you like */ left: 5%; /* whatever you like */ position: absolute; } #station_B { top: 45%; /* whatever you like */ left: 15%; /* whatever you like */ position: absolute } .hover { color: green }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="map"> <span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span> <span id="station_B" class="overlay">Highlight image here.</span> </div> <p> <h2>Choose a Shirt</h2> <form> <input type="checkbox" name="image" value="station_A">Station Alfa <br> <input type="checkbox" name="image" value="station_B">Station Beta <input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna </form> </p>
解决方案2
0
The issue was due to a z-index problem I moved the image to the front and the button works fine now after this css change. 问题是由于z-index问题，我将图像移到了前面，并且在更改了CSS之后，按钮现在可以正常工作了。
#VneckTshirtImage
{
left: 138px;
top: 457px;
position: absolute;
width: 118px;
height: 174px;
z-index:28;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.