집 > 기사 > 웹 프론트엔드 > Javascript 기본 사항(삽입된 이미지의 간단한 구현)

Javascript 기본 사항(삽입된 이미지의 간단한 구현)

亚连원래의: 2018-05-21 09:43:521074검색

이제 Javascript 기본 사항(이미지 삽입의 간단한 구현)을 알려 드리겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

img 요소를 사용하면 HTML 문서에 이미지를 삽입할 수 있습니다.

이미지를 삽입하려면 src 및 alt 속성을 사용해야 합니다. 코드는 다음과 같습니다.

<img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" />

표시 효과:

1 하이퍼링크에 이미지 삽입

일반적인 사용법 img 요소는 a 요소와 함께 생성하는 것입니다. 다음 코드를 사용하는 이미지 기반 하이퍼링크:

<a href="otherpage.html">
  <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" />
</a>

브라우저가 이 이미지를 표시하는 방식에는 차이가 없습니다. 따라서 특정 이미지가 하이퍼링크를 나타낸다는 시각적 단서를 사용자에게 제공하는 것이 중요합니다. 구체적인 방법은 CSS를 활용하는 것일 수도 있고, 이미지 콘텐츠로 표현하는 것이 더 좋습니다.

이런 종류의 이미지를 클릭하면 브라우저는 상위 요소 a의 href 속성에 지정된 URL로 이동합니다. img 요소에 ismap 속성을 적용하면 서버 측 부분 응답 그래프가 생성됩니다. 즉, 이미지의 클릭 위치가 URL에 추가됩니다. 예를 들어 클릭이 이미지 상단에서 8픽셀, 왼쪽 가장자리에서 10픽셀인 경우 브라우저는 다음 주소로 이동합니다.

https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8

다음 코드는 간단한 URL이 포함된 otherpage.html의 내용을 보여줍니다. 클릭 위치의 좌표를 표시하는 스크립트:

<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The Y-coordinate is <b><span id="yco">??</span></b></p>
<script type="application/javascript">
  var coords = window.location.href.split(&#39;?&#39;)[1].split(&#39;,&#39;);
  document.getElementById("xco").innerHTML = coords[0];
  document.getElementById("yco").innerHTML = coords[1];
</script>
</body>

https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8

다음 코드는 간단한 URL이 포함된 otherpage.html의 내용을 보여줍니다. 클릭 위치의 좌표를 표시하는 스크립트:

<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The Y-coordinate is <b><span id="yco">??</span></b></p>
<script type="application/javascript">
  var coords = window.location.href.split(&#39;?&#39;)[1].split(&#39;,&#39;);
  document.getElementById("xco").innerHTML = coords[0];
  document.getElementById("yco").innerHTML = coords[1];
</script>
</body>

마우스 클릭의 효과를 볼 수 있습니다:

서버 측 파티션 응답 그래프는 일반적으로 사용자가 클릭하는 영역에 따라 서버가 차이를 낸다는 것을 의미합니다. 다른 응답 정보를 반환하는 등 이미지에 대한 응답이 있습니다. img 요소의 ismap 속성이 생략되면 마우스 클릭의 좌표가 요청 URL에 포함되지 않습니다.

2 클라이언트 측 파티션 응답 그래프 생성

클라이언트 측 파티션 응답 그래프를 생성하고 브라우저가 이미지의 다른 영역을 클릭하여 다른 URL로 이동할 수 있도록 할 수 있습니다. 이 프로세스는 서버를 통해 부트스트랩될 필요가 없으므로 요소는 이미지의 다양한 영역과 해당 영역이 나타내는 동작을 정의하는 데 사용됩니다. 클라이언트 측 파티션 응답 그래프의 핵심 요소는 지도입니다. 지도 요소에는 하나 이상의 영역 요소가 포함되어 있으며 각 요소는 이미지에서 클릭 가능한 영역을 나타냅니다.

영역 요소의 속성은 두 가지 범주로 나눌 수 있습니다. 첫 번째 범주는 사용자가 해당 영역이 나타내는 이미지 영역을 클릭한 후 브라우저가 탐색하게 되는 URL을 다룹니다. 아래 다이어그램은 다른 요소에 표시되는 해당 속성과 유사한 이러한 속성 클래스를 보여줍니다.

두 번째 카테고리에는 모양 및 좌표 속성이라는 더 흥미로운 속성이 포함되어 있습니다. 이러한 속성을 사용하여 사용자가 클릭할 수 있는 이미지의 다양한 영역을 나타낼 수 있습니다. 모양과 좌표 속성은 함께 작동합니다. coords 속성의 의미는 아래 그림과 같이 Shape 속성의 값에 따라 달라집니다.

이러한 요소를 도입한 후 예를 들어 코드는 다음과 같습니다.

<body>
  <img src="../img/example/img-map.jpg" ismap alt="Products Image" usemap="#mymap" width="580" height="266" />

<map name="mymap">
  <area href="javascript:show_page(1)" shape="rect" coords="&#39;34,60,196,230" alt="product 1" />
  <area href="javascript:show_page(2)" shape="rect" coords="&#39;210,60,370,230" alt="product 2" />
  <area href="javascript:show_page(3)" shape="rect" coords="&#39;383,60,545,230" alt="product 3" />
</map>

<script type="application/javascript">
   function show_page(num){
     //通过对话框显示产品，表示对应的跳转页面
     alert("This is product "+num);
   }
</script>
</body>

표시 효과는 동일하게 해당 제품을 클릭하면 해당 제품 이름과 함께 제품 사진이 팝업되어 점프된 제품 페이지를 나타냅니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 여러분에게 도움이 되기를 바랍니다.

Javascript 기본 사항(삽입된 이미지의 간단한 구현)

관련 기사