У меня есть изображение с максимальной шириной 1200 пикселей и относительной шириной 85%. Наверху этой фотографии у меня есть еще одна, которая является небольшой частью первого изображения. Этот второй, который я хотел бы использовать в качестве ссылки, вот почему я вырезал его из первого и разместил его сверху.Позиционирование 2 относительных изображений с помощью CSS
Я использую абсолютные значения для позиционирования, но, тем не менее, изменяю значения, он подходит только в одну конкретную точку при изменении размера окна просмотра.
Я хочу использовать несколько частей изображения как ссылки (вроде как меню), в прилагаемом коде - для простоты - есть только одно изображение в качестве ссылки.
Я пытаюсь что-то сделать like this, но с изменяемыми по размеру изображениями.
Мой код ниже, и это то, что он выглядит сейчас с изображениями: Link with the images
Любая помощь очень ценится !! Большое спасибо!
body {
\t width: 100%;
\t background: black; \t
}
div#bgrImg { /* div with the background image */
\t max-width: 1200px;
\t width: 85%; \t
\t /* margin: 5% auto 0 auto; */
\t position: absolute;
\t left: 7.5%;
\t top: 8.3%;
}
#bgrImg img { /* the background image */
\t width: 100%; \t
}
div#signLink { /* div with the sign image */
\t max-width: 1200px;
\t width: 85%;
\t position: absolute;
\t left: 7.5%;
\t top: 26%;
}
#signLink img { /* the sign image */
\t width: 22%;
\t position:absolute;
\t left: 51.5%;
}
#signLink:hover {
\t cursor: pointer; \t
}<html>
<body>
<div id="bgrImg">
\t <img src="_images/hillBgr.jpg" />
</div>
<div id="signLink">
<a href="index.htm"><img src="_images/hillSign.png"/></a>
</div>
</body>
</html>
Вы можете посмотреть в ''
Вам не нужно использовать вырез из существующего изображения, чтобы иметь возможность использовать его в качестве ссылки; скорее используйте карты, как указано в комментарии выше. Дальнейшая релевантная информация: http://stackoverflow.com/questions/1778589/non-rectangular-css-image-links (не говорите, что эта ссылка отключена от темы только из-за противоречивого названия, но вместо этого требуется время, чтобы прочитать ее) – klaar
Большое спасибо, но после прочтения предлагаемых статей я думаю, что это неправильное решение для меня, так как не может быть в стиле с CSS. Мне нужно стилизовать области, например. hover effects ... я читал, что svg может быть решением, но я не знаю, с чего начать ... снова, любые предложения были бы очень благодарны !! благодаря! – Ollie