У меня возникла проблема с созданием следующей концепции. Я хочу, чтобы определенная часть изображения веб-сайта отображалась для ссылки на другую страницу на сайте, и я хочу, чтобы весь образ растянулся до ширины зрителя. У меня есть оба, но когда изображение растягивается, оно сбрасывает отображение. Есть ли способ автоматически компенсировать это?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* { margin: 0; padding: 0; }
#bg { position: relative; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
</head>
<body>
<img src="background.png" id="bg" usemap = #bgmap alt="">
<map name=bgmap>
<area shape=Rect Coords=410,200,595,390 Href="http://www.example.com">
</map>
</body>
</html>
у вас есть некоторые ошибки в коде
<body>
<img src="background.png" id="bg" usemap="#bgmap" alt="">
<map name="bgmap">
<area shape="Rect" Coords="410,200,595,390" href="http://www.example.com">
</map>
</body>