이미지 맵으로 냄비를 붙인다.
줄거리
이미지에 여러가지 묻고 싶어졌으므로, 이미지 맵 사용해 보았습니다.
색인
목표로 하는 것
이번에 사용하는 이미지는 여기.
이 맛있을 것 같은 물 밥 냄비의 "새고기"와 "두부"에 호버하면 문자가 표시되도록합니다.
이미지 맵 만들기
영역 지정
이 작업이 가장 중요하고 가장 귀찮습니다!
간단하게 하는 방법 요구한다.
이번에는 HTML Imagemap Generator를 사용했습니다.
htps //bs. d-sb. jp/이마게마 p게네라와 r/
오른쪽 상단에서 그리려는 도형을 클릭하여 영역을 지정합니다.
그러면 coord 요소가 계산됩니다.
반응형 디자인에 대응
반응형 디자인 페이지의 경우 이미지 맵이 어긋납니다.
(시험에 width: 50vw;라든지 지정해 보면 알 수 있습니다.)
그래서 재계산해 주는 플러그인 ( jQuery-rwdImageMaps ) 을 이용합니다.
htps : // 기주 b. 코 m / s와 w 바 l / j 쿠에 ry-rw
README에 따라 스크립트를 추가합니다.
호버하면 문자를 낸다
area 요소를 호버하면 div 에 들어간 title 가 표시되도록 했습니다.
이런 느낌의 index.html 가 되었습니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Clickable Map</title>
</head>
<body>
<img
src="img/food_nabe_mizutaki.png"
usemap="#img3"
alt="水炊き"
id="img3"
/>
<map name="img3">
<area
shape="poly"
coords="141,243,168,261,182,255,206,267,222,258,248,265,270,252,301,245,311,235,306,222,330,216,336,201,328,184,313,186,304,178,281,183,271,175,255,177,237,155,211,160,206,165,195,158,175,163,170,181,154,188,155,216,140,227,140,245,170,262,208,233"
href="#鳥肉"
title="鳥肉"
alt="鳥肉"
/>
<area
shape="poly"
coords="228,149,254,129,265,131,288,115,338,131,340,168,317,181,310,183,299,175,279,179,264,171,255,174,255,174"
href="#豆腐"
title="豆腐"
alt="豆腐"
/>
</map>
<script src="jquery-3.5.1.min.js"></script>
<script src="jQuery-rwdImageMaps/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function (e) {
$("img[usemap]").rwdImageMaps();
});
$("area").hover(
function () {
$(this).append(`<div>${$(this).attr("title")}</div>`);
},
function () {
$(this).find("div:last").remove();
}
);
</script>
</body>
</html>
jQuery 약자이기 때문에 코드의 더러움은 용서합니다 ...
완제품
냄비가 먹고 싶어집니다!
요약
언제나 선인님 감사합니다!
지역 지정을 더 편하게 하는 방법 생각하고 싶은 곳.
Reference
이 문제에 관하여(이미지 맵으로 냄비를 붙인다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/GabD380/items/002cc0052ca4d97cb5d9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
영역 지정
이 작업이 가장 중요하고 가장 귀찮습니다!
간단하게 하는 방법 요구한다.
이번에는 HTML Imagemap Generator를 사용했습니다.
htps //bs. d-sb. jp/이마게마 p게네라와 r/
오른쪽 상단에서 그리려는 도형을 클릭하여 영역을 지정합니다.
그러면 coord 요소가 계산됩니다.
반응형 디자인에 대응
반응형 디자인 페이지의 경우 이미지 맵이 어긋납니다.
(시험에 width: 50vw;라든지 지정해 보면 알 수 있습니다.)
그래서 재계산해 주는 플러그인 ( jQuery-rwdImageMaps ) 을 이용합니다.
htps : // 기주 b. 코 m / s와 w 바 l / j 쿠에 ry-rw
README에 따라 스크립트를 추가합니다.
호버하면 문자를 낸다
area 요소를 호버하면 div 에 들어간 title 가 표시되도록 했습니다.
이런 느낌의 index.html 가 되었습니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Clickable Map</title>
</head>
<body>
<img
src="img/food_nabe_mizutaki.png"
usemap="#img3"
alt="水炊き"
id="img3"
/>
<map name="img3">
<area
shape="poly"
coords="141,243,168,261,182,255,206,267,222,258,248,265,270,252,301,245,311,235,306,222,330,216,336,201,328,184,313,186,304,178,281,183,271,175,255,177,237,155,211,160,206,165,195,158,175,163,170,181,154,188,155,216,140,227,140,245,170,262,208,233"
href="#鳥肉"
title="鳥肉"
alt="鳥肉"
/>
<area
shape="poly"
coords="228,149,254,129,265,131,288,115,338,131,340,168,317,181,310,183,299,175,279,179,264,171,255,174,255,174"
href="#豆腐"
title="豆腐"
alt="豆腐"
/>
</map>
<script src="jquery-3.5.1.min.js"></script>
<script src="jQuery-rwdImageMaps/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function (e) {
$("img[usemap]").rwdImageMaps();
});
$("area").hover(
function () {
$(this).append(`<div>${$(this).attr("title")}</div>`);
},
function () {
$(this).find("div:last").remove();
}
);
</script>
</body>
</html>
jQuery 약자이기 때문에 코드의 더러움은 용서합니다 ...
완제품
냄비가 먹고 싶어집니다!
요약
언제나 선인님 감사합니다!
지역 지정을 더 편하게 하는 방법 생각하고 싶은 곳.
Reference
이 문제에 관하여(이미지 맵으로 냄비를 붙인다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/GabD380/items/002cc0052ca4d97cb5d9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
area 요소를 호버하면 div 에 들어간 title 가 표시되도록 했습니다.이런 느낌의
index.html 가 되었습니다.index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Clickable Map</title>
</head>
<body>
<img
src="img/food_nabe_mizutaki.png"
usemap="#img3"
alt="水炊き"
id="img3"
/>
<map name="img3">
<area
shape="poly"
coords="141,243,168,261,182,255,206,267,222,258,248,265,270,252,301,245,311,235,306,222,330,216,336,201,328,184,313,186,304,178,281,183,271,175,255,177,237,155,211,160,206,165,195,158,175,163,170,181,154,188,155,216,140,227,140,245,170,262,208,233"
href="#鳥肉"
title="鳥肉"
alt="鳥肉"
/>
<area
shape="poly"
coords="228,149,254,129,265,131,288,115,338,131,340,168,317,181,310,183,299,175,279,179,264,171,255,174,255,174"
href="#豆腐"
title="豆腐"
alt="豆腐"
/>
</map>
<script src="jquery-3.5.1.min.js"></script>
<script src="jQuery-rwdImageMaps/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function (e) {
$("img[usemap]").rwdImageMaps();
});
$("area").hover(
function () {
$(this).append(`<div>${$(this).attr("title")}</div>`);
},
function () {
$(this).find("div:last").remove();
}
);
</script>
</body>
</html>
jQuery 약자이기 때문에 코드의 더러움은 용서합니다 ...
완제품
냄비가 먹고 싶어집니다!
요약
언제나 선인님 감사합니다!
지역 지정을 더 편하게 하는 방법 생각하고 싶은 곳.
Reference
이 문제에 관하여(이미지 맵으로 냄비를 붙인다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/GabD380/items/002cc0052ca4d97cb5d9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
언제나 선인님 감사합니다!
지역 지정을 더 편하게 하는 방법 생각하고 싶은 곳.
Reference
이 문제에 관하여(이미지 맵으로 냄비를 붙인다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/GabD380/items/002cc0052ca4d97cb5d9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
