[HTML 요소] 이미지 삽입 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

[HTML 요소] 이미지 삽입 방법

高洛峰

Feb 18, 2017 pm 03:14 PM

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

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

<img  src="/static/imghwm/default1.png" data-src="../img/example/img-map.jpg" class="lazy" alt="[HTML 요소] 이미지 삽입 방법" >

표시 효과:

【HTML 元素】嵌入图像的实现方法

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

일반적인 용도 img 요소는 a 요소와 결합하여 생성하는 것입니다. 이미지 기반 하이퍼링크, 코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

<a href="otherpage.html">  
    <img src="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   ismap alt="Products Image"    style="max-width:90%"  style="max-width:90%" />  
</a>

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

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

XML/ HTML 코드클립보드에 콘텐츠 복사

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

다음 코드는 클릭한 위치의 좌표를 표시하는 간단한 스크립트가 포함된 otherpage.html의 콘텐츠를 보여줍니다.

XML/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>

볼 수 있음 효과 마우스 클릭의 경우:

【HTML 元素】嵌入图像的实现方法

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

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

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

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

【HTML 元素】嵌入图像的实现方法

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

【HTML 元素】嵌入图像的实现方法

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

XML/HTML 코드클립보드에 내용 복사

<body>  
    <img src="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   ismap alt="Products Image" usemap="#mymap"    style="max-width:90%"  style="max-width:90%" />  
  
<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>

디스플레이 효과는 마찬가지로, 해당 제품 사진을 클릭하면 해당 제품 이름이 팝업되어 점프된 제품 페이지를 나타냅니다.

위에서 언급한 [HTML 요소]에 이미지를 삽입하는 구현 방법은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠고, PHP 중국어 홈페이지도 지원해 주시길 바랍니다.

삽입된 이미지의 [HTML 요소] 구현 방법에 대한 자세한 내용은 PHP 중국어 웹사이트의 관련 기사를 참고하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS를 잘 모르는 경우 어떤 CSS가 가장 의미가 있습니까?Apr 19, 2025 am 09:56 AM

Peter-Paul 은이 질문을 게시했습니다.

클립 경로로 애니메이션Apr 19, 2025 am 09:52 AM

Clip-Path는 우리가 일반적으로 알고있는 CSS 속성 중 하나이지만 어떤 이유로 든 종종 도달하지 못할 수도 있습니다. 의미가 약간 위협적입니다

Gatsby와 함께 GraphQL 놀이터 사용Apr 19, 2025 am 09:51 AM

나는 대부분의 사람들이 이미 개츠비에 대해 들었다고 가정하고 있으며, 적어도 그것이 기본적으로 반응 사이트의 정적 사이트 생성기라는 것을 느슨하게 알고 있습니다. 일반적으로

유형 또는 테스트 : 왜 둘 다 안됩니까?Apr 19, 2025 am 09:50 AM

때때로, 토론은 타이핑 된 JavaScript의 가치에 대해 불쾌합니다. "더 많은 테스트를 작성하십시오!" 상대방을 외칩니다. "단위 테스트를 유형으로 교체하십시오!"

git의 그래픽 사용자 인터페이스Apr 19, 2025 am 09:46 AM

Lemme는 요즘 Git Guis의 주요 플레이어처럼 보이는 것을 마무리합니다.

자신의 게으른 하중을 굴리기위한 팁Apr 19, 2025 am 09:44 AM

“우리는 게으른 짐을 사용할 수 있습니다!”라고 들었을 수도 있습니다. 특히 무거운 웹 페이지를 슬림 한 방법을 찾을 때.

CSS 2019 상태 조사에서 세 가지 예측Apr 19, 2025 am 09:43 AM

CSS 상태와 같은 개발자 설문 조사를 실행하는 것은 다단계 프로세스입니다. 먼저 데이터를 수집해야합니다. 그런 다음 사용 가능한 모양으로 처리합니다.

마지막으로 ... 마침내 약속의 게시물Apr 19, 2025 am 09:39 AM

"마침내 JavaScript 약속으로 언제 발사됩니까?" 이것은 최근 워크숍에서 묻는 질문이며, 나는 약간의 게시물을 작성하기 위해 작은 게시물을 작성할 것이라고 생각했습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.