WEB/HTML
[HTML]days03-img
애플쩀
2022. 5. 16. 11:39
이미지를 누르면, 이미지만 보이는 새창을 만들기
<a href="../images/pic_trulli.jpg">
<img alt="이탈리안튤립" src="../images/pic_trulli.jpg"></a>
Html 이미지맵
1. 맵(map)을 사용하여 이미지에 클릭 가능한 영역을 만들 수 있다.
이미지의 일부를 지정하여 링크를 거는 것
2. map 태그 -이미지맵
area 태그 - 클릭 가능한 영역 (shape 와 coords 속성 포함 )
-- rect : 사각형 모양. coord 형식 : x1,y1,x2,y2
-- circle : 원모양. coord 형식 : x1,x2,r
-- poly : 다각형 모양.
-- default : 전체 지정. 이미지 전체를 선택할 때 사용한다. shape속성이 default일 경우 coords 속성x
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<style>
p{border: 1px solid gray; padding:10px;}
</style>
</head>
<body>
<img alt="workplace" src="../images/workplace.jpg" usemap="#workmap">
<map name="workmap">
<area alt="" href="ex02_computer.html" shape="rect" coords="34,44,270,350">
<area alt="" href="ex02_phone.html" shape="rect" coords="290 , 172 , 333 , 250">
<area alt="" href="ex02_coffee.html" shape="circle" coords="337, 300, 44">
</map>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="" src="../images/coffeehouse2.jpg">
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="" src="../images/mac.jpg">
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="" src="../images/cellphone.jpg">
</body>
</html>