Как установить карту изображения в части фонового изображения?
Я знаю, как установить карту изображения для изображения переднего плана. Но на этот раз я хочу, чтобы была выбрана карта изображения для части изображения, которая задана как фоновое изображение div. Как я могу это сделать. Я много искал в web, не смог получить решение. Пожалуйста, помогите.Например,
HTML
<div class="header full" style="background:url('/hdr.jpg';?>) no-repeat; height:492px"> Все изображение задано как фоновое изображение, я хочу щелкнуть овальную часть Nestle и перенаправить на какой-то URL-адрес.
Пожалуйста, попробуйте следующий код
Используйте свое изображение и переименуйте как test.jpg, пожалуйста, поместите все в одну папку для тестирования и изменения кода для ваших нужд (это всего лишь пример)
**CSS** (style.css) .image{ background: url("test.jpg") repeat scroll 0 0 transparent; height: 185px; width: 266px; border: 1px solid; } .link{ padding-left: 26px; padding-top: 23px; position: absolute; } .link a{ padding-left: 0; display: block; height: 48px; width: 67px; } .container{ position: relative; }
HTML
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="link"> <a href=""> </a></div> <div class="image"> </div> </div>
Вот пример с объяснением: http://quackit.com/html/tutorial/html_image_maps.cfm
хорошо, вы помещаете изображение в качестве фона из-за их теперь нет такого элемента в div, чтобы щелкнуть
Если вам нужна только форма прямоугольника для ссылок на карте изображения, вы можете использовать css определенные позиции ссылок. Это достигается путем указания положения и установки прозрачности фона. Вот пример