IMG 요소를 사용하면 HTML 문서에 이미지를 포함시킬 수 있습니다.
이미지를 포함하려면 SRC 및 ALT 속성을 사용해야합니다. 코드는 다음과 같습니다.
<img src = "../ img/example/img-map.jpg"/>
디스플레이 효과 :
1 하이퍼 링크에 이미지를 포함시킵니다
IMG 요소의 일반적인 사용법은 A 요소와 함께 이미지 기반 하이퍼 링크를 만드는 것입니다. 코드는 다음과 같습니다.
<a href = "OtherPage.html"> <img src = "../ img/example/img-map.jpg"ismap/> </a>
브라우저 가이 이미지를 표시하는 방식은 다르지 않습니다. 따라서 특정 이미지가 하이퍼 링크를 나타내는 시각적 신호를 사용자에게 제공하는 것이 중요합니다. 특정 접근법은 CSS를 사용하는 것입니다. 이는 이미지 내용에서 표현하는 것이 좋습니다.
이 이미지를 클릭하면 브라우저가 부모 요소 a의 HREF 속성으로 지정된 URL로 이동합니다. ISMAP 속성을 IMG 요소에 적용하면 서버 측 브랜치 응답 맵이 생성됩니다. 즉, 이미지를 클릭 한 위치가 URL에 첨부됩니다. 예를 들어, 클릭 위치가 이미지 상단에서 8 픽셀이고 왼쪽 가장자리의 10 픽셀 인 경우 브라우저는 다음 주소로 이동합니다.
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
다음 코드는 Click 위치의 좌표를 표시하는 간단한 스크립트가 포함 된 OtherPage.html의 내용을 보여줍니다.
<body> <p> x 좌표는 <b> <span id = "xco"> ?? </span> </b> </p> <p> y-cordinate is <b> <span id = "yco"> ?? </span> </b> </p> <script type = "application/javascript"> var coords = Window.location.href.split ( '?') [1] .split ( ','); document.getElementById ( "XCO"). innerHtml = 좌표 [0]; document.getElementById ( "yco"). innerHtml = 좌표 [1]; </script> </body>
브라우저 가이 이미지를 표시하는 방식은 다르지 않습니다. 따라서 특정 이미지가 하이퍼 링크를 나타내는 시각적 신호를 사용자에게 제공하는 것이 중요합니다. 특정 접근법은 CSS를 사용하는 것입니다. 이는 이미지 내용에서 표현하는 것이 좋습니다.
이 이미지를 클릭하면 브라우저가 부모 요소 a의 HREF 속성으로 지정된 URL로 이동합니다. ISMAP 속성을 IMG 요소에 적용하면 서버 측 브랜치 응답 맵이 생성됩니다. 즉, 이미지를 클릭 한 위치가 URL에 첨부됩니다. 예를 들어, 클릭 위치가 이미지 상단에서 8 픽셀이고 왼쪽 가장자리의 10 픽셀 인 경우 브라우저는 다음 주소로 이동합니다.
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
다음 코드는 Click 위치의 좌표를 표시하는 간단한 스크립트가 포함 된 OtherPage.html의 내용을 보여줍니다.
<body> <p> x 좌표는 <b> <span id = "xco"> ?? </span> </b> </p> <p> y-cordinate is <b> <span id = "yco"> ?? </span> </b> </p> <script type = "application/javascript"> var coords = Window.location.href.split ( '?') [1] .split ( ','); document.getElementById ( "XCO"). innerHtml = 좌표 [0]; document.getElementById ( "yco"). innerHtml = 좌표 [1]; </script> </body>
마우스 클릭의 효과를 볼 수 있습니다.
서버 측 파티션 응답 그래프는 일반적으로 다른 응답 정보를 반환하는 등 이미지의 사용자 클릭 영역에 따라 서버가 다르게 응답 함을 의미합니다. IMG 요소의 ISMAP 속성이 생략되면 마우스 클릭의 좌표는 요청 URL에 포함되지 않습니다.
2 클라이언트 파티션 응답 다이어그램을 만듭니다
클라이언트 파티션 응답 맵을 작성하고 이미지의 다른 영역을 클릭하여 브라우저가 다른 URL로 이동할 수 있습니다. 이 프로세스는 서버를 통해 부팅 할 필요가 없으므로 요소는 이미지의 개별 영역과 그들이 나타내는 동작을 정의하는 데 사용됩니다. 클라이언트 파티션 응답 그래프의 핵심 요소는 하나 이상의 영역 요소를 포함하는 맵이며, 각각은 클릭 할 수있는 이미지의 영역을 나타냅니다.
영역 요소의 속성은 두 가지 범주로 나눌 수 있습니다. 첫 번째 카테고리는 해당 영역이 나타내는 이미지 영역이 사용자가 클릭 한 후 브라우저가 탐색 할 URL을 처리합니다. 다음 그림은이 유형의 속성을 소개하는데,이 속성은 다른 요소에서 보이는 해당 속성과 유사합니다.
두 번째 범주에는 더 흥미로운 속성이 포함되어 있습니다 : Shape and Cords 속성. 이러한 속성을 사용하여 사용자가 클릭 할 수있는 각 이미지 영역을 표시 할 수 있습니다. 모양과 좌표 속성이 함께 작동합니다. 코디 속성의 의미는 아래 그림과 같이 모양 속성의 값에 따라 다릅니다.
이러한 요소를 소개 한 후 코드는 다음과 같습니다.
<body> <img src = "../ img/example/example/img-map.jpg"ismap usemap = "#mymap"/> <map name = "mymap"> <area href = "javaScript : show_page (1) shape = "rect"coords = " '210,60,370,230" /> <area href = "javaScript : show_page (3)"shape = "rect"coord = "383,60,545,230" /> < /map> <Script type = "Application /Javascript"> function _page (num) {// 경고 ( "이것은 제품입니다"+num); } </script> </body>해당 제품 사진을 클릭하면 해당 제품 이름이 팝업되어 점프 된 제품 페이지를 나타내는 것을 제외하고는 디스플레이 효과가 동일합니다.
위의 기사 JavaScript Basics_Simple Embedded Images의 구현은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.