Html hiển thị hình ảnh khi nhấp chuột

Để đưa một hình ảnh đơn giản lên trang web, chúng ta sử dụng phần tử

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Các

Ghi chú. Bạn nên đọc để nhớ lại các URL tương đối và tuyệt đối trước khi tiếp tục

Vì vậy, ví dụ: nếu hình ảnh của bạn có tên là

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="dinosaur.jpg" alt="Dinosaur" />

Nếu hình ảnh nằm trong thư mục con

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Và như thế

Ghi chú. Công cụ tìm kiếm cũng đọc tên tệp hình ảnh và tính chúng cho SEO. Do đó, bạn nên đặt cho hình ảnh của mình một tên tệp mô tả;

Ví dụ: bạn có thể nhúng hình ảnh bằng URL tuyệt đối của nó

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Nhưng điều này không được khuyến khích. Bạn nên lưu trữ hình ảnh của riêng mình, điều này trong các thiết lập đơn giản có nghĩa là giữ hình ảnh cho trang web của bạn trên cùng một máy chủ với HTML của bạn. Trong các thiết lập nâng cao hơn, bạn có thể sử dụng CDN (Mạng phân phối nội dung) để phân phối hình ảnh của mình

Cảnh báo. Không bao giờ trỏ thuộc tính src của bạn vào một hình ảnh được lưu trữ trên trang web của người khác mà không được phép. Điều này được gọi là "liên kết nóng". Nó thường được coi là phi đạo đức, vì người khác sẽ trả chi phí băng thông để phân phối hình ảnh khi ai đó truy cập trang của bạn. Nó cũng khiến bạn không kiểm soát được liệu hình ảnh có bị xóa hay thay thế bằng thứ gì đó đáng xấu hổ hay không

Nói chung, bạn nên lưu trữ những hình ảnh bạn muốn sử dụng trên trang web của mình. Hãy nhớ rằng nhiều hình ảnh bạn có thể tìm thấy trên web có bản quyền. Trước khi bạn lưu trữ một hình ảnh, bạn nên đảm bảo rằng một trong những điều này được áp dụng

• Bạn sở hữu hình ảnh
• Bạn đã nhận được sự cho phép rõ ràng bằng văn bản từ chủ sở hữu hình ảnh
• Trên thực tế, bạn có nhiều bằng chứng cho thấy hình ảnh thuộc phạm vi công cộng

Mã trên của chúng tôi sẽ cho chúng tôi kết quả sau

Ghi chú. Các phần tử như

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

Ghi chú. Bạn có thể tìm thấy ví dụ đã hoàn thành từ phần này đang chạy trên GitHub (cũng xem mã nguồn. )

Thuộc tính tiếp theo chúng ta sẽ xem xét là

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

Cách dễ nhất để kiểm tra văn bản

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

Vì vậy, tại sao bạn lại thấy hoặc cần văn bản thay thế?

• Người dùng bị khiếm thị và đang sử dụng trình đọc màn hình để đọc trang web cho họ nghe. Trên thực tế, việc có sẵn văn bản thay thế để mô tả hình ảnh là hữu ích đối với hầu hết người dùng
• Như đã mô tả ở trên, chính tả của tệp hoặc tên đường dẫn có thể sai
• Trình duyệt không hỗ trợ loại hình ảnh. Một số người vẫn sử dụng trình duyệt chỉ có văn bản, chẳng hạn như Lynx, hiển thị văn bản thay thế của hình ảnh
• Bạn có thể muốn cung cấp văn bản cho các công cụ tìm kiếm sử dụng;
• Người dùng đã tắt hình ảnh để giảm khối lượng truyền dữ liệu và giảm phiền nhiễu. Điều này đặc biệt phổ biến trên điện thoại di động và ở các quốc gia có băng thông hạn chế hoặc đắt đỏ

Chính xác thì bạn nên viết gì bên trong thuộc tính

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

• trang trí. Bạn nên sử dụng cho hình ảnh trang trí, nhưng nếu bạn phải sử dụng HTML, hãy thêm một khoảng trống

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth" />
  

  8. Nếu hình ảnh không phải là một phần của nội dung, trình đọc màn hình không nên lãng phí thời gian để đọc nó
• Nội dung. Nếu hình ảnh của bạn cung cấp thông tin quan trọng, hãy cung cấp thông tin tương tự trong một văn bản ngắn gọn

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0 – hoặc thậm chí tốt hơn, trong văn bản chính mà mọi người có thể nhìn thấy. Đừng viết thừa văn bản

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0. Người dùng sáng mắt sẽ khó chịu như thế nào nếu tất cả các đoạn được viết hai lần trong nội dung chính?
• liên kết. Nếu bạn đặt một hình ảnh bên trong các thẻ

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  3, để biến một hình ảnh thành một liên kết, bạn vẫn phải cung cấp. Trong những trường hợp như vậy, bạn có thể viết nó bên trong cùng một thành phần

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  3 hoặc bên trong thuộc tính

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0 của hình ảnh – tùy theo cách nào phù hợp nhất trong trường hợp của bạn
• Chữ. Bạn không nên đưa văn bản của mình vào hình ảnh. Ví dụ: nếu tiêu đề chính của bạn cần một bóng đổ, hãy sử dụng CSS cho điều đó thay vì đặt văn bản vào một hình ảnh. Tuy nhiên, nếu bạn thực sự không thể tránh làm điều này, bạn nên cung cấp văn bản bên trong thuộc tính

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0

Về cơ bản, điều quan trọng là mang lại trải nghiệm có thể sử dụng được, ngay cả khi không thể nhìn thấy hình ảnh. Điều này đảm bảo tất cả người dùng không bỏ lỡ bất kỳ nội dung nào. Hãy thử tắt hình ảnh trong trình duyệt của bạn và xem mọi thứ như thế nào. Bạn sẽ sớm nhận ra văn bản thay thế hữu ích như thế nào nếu không thể nhìn thấy hình ảnh

Ghi chú. Để biết thêm thông tin, hãy xem hướng dẫn của chúng tôi về

Bạn có thể sử dụng các thuộc tính

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

Điều này không dẫn đến nhiều khác biệt cho màn hình, trong các trường hợp bình thường. Nhưng nếu hình ảnh không được hiển thị, chẳng hạn như người dùng vừa điều hướng đến trang và hình ảnh chưa được tải, bạn sẽ nhận thấy trình duyệt đang để lại một khoảng trống để hình ảnh xuất hiện trong đó.

Đây là một điều nên làm, dẫn đến việc tải trang nhanh hơn và mượt mà hơn

Tuy nhiên, bạn không nên thay đổi kích thước hình ảnh của mình bằng các thuộc tính HTML. Nếu bạn đặt kích thước hình ảnh quá lớn, bạn sẽ nhận được hình ảnh có hạt, mờ hoặc quá nhỏ và lãng phí băng thông khi tải xuống hình ảnh không phù hợp với nhu cầu của người dùng. Hình ảnh cũng có thể trông bị méo nếu bạn không duy trì tỷ lệ khung hình chính xác. Bạn nên sử dụng trình chỉnh sửa hình ảnh để đặt hình ảnh của mình ở kích thước chính xác trước khi đưa nó lên trang web của bạn

Ghi chú. Nếu bạn cần thay đổi kích thước của hình ảnh, bạn nên sử dụng CSS để thay thế

Vì , bạn cũng có thể thêm thuộc tính

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

Điều này cung cấp cho chúng tôi chú giải công cụ khi di chuột, giống như tiêu đề liên kết

Tuy nhiên, điều này không được khuyến nghị —

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

Tốt hơn là bao gồm thông tin hỗ trợ như vậy trong văn bản chính của bài viết, thay vì đính kèm với hình ảnh

Bây giờ đến lượt bạn chơi. Phần học tích cực này sẽ giúp bạn bắt đầu và chạy với một bài tập nhúng đơn giản. Bạn được cung cấp một thẻ

<img src="images/dinosaur.jpg" alt="Dinosaur" />

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Trước đó chúng tôi đã nói không bao giờ liên kết nóng đến hình ảnh trên các máy chủ khác, nhưng điều này chỉ nhằm mục đích học tập, vì vậy chúng tôi sẽ bỏ qua điều này một lần

Chúng tôi cũng muốn bạn

• Thêm một số văn bản thay thế và kiểm tra xem nó có hoạt động không bằng cách viết sai chính tả URL hình ảnh
• Đặt hình ảnh đúng là

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

  6 và

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

  7 (gợi ý. nó rộng 200px và cao 171px), sau đó thử nghiệm với các giá trị khác để xem hiệu ứng là gì
• Đặt một

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

  8 trên hình ảnh

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
<img>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
const output = document.querySelector('.output');
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
let solutionEntry = htmlSolution;

reset.addEventListener('click', () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', () => {
  if (solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Nói về chú thích, có một số cách bạn có thể thêm chú thích đi kèm với hình ảnh của mình. Ví dụ, sẽ không có gì ngăn cản bạn làm điều này

<img src="images/dinosaur.jpg" alt="Dinosaur" />

cái này ổn. Nó chứa nội dung bạn cần và có thể tạo kiểu độc đáo bằng CSS. Nhưng có một vấn đề ở đây. không có gì liên kết ngữ nghĩa hình ảnh với chú thích của nó, điều này có thể gây ra sự cố cho trình đọc màn hình. Ví dụ: khi bạn có 50 hình ảnh và chú thích, chú thích nào đi với hình ảnh nào?

Một giải pháp tốt hơn là sử dụng các phần tử HTML

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Phần tử

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Ghi chú. Từ quan điểm khả năng tiếp cận, chú thích và văn bản có vai trò riêng biệt. Chú thích mang lại lợi ích cho cả những người có thể nhìn thấy hình ảnh, trong khi văn bản cung cấp chức năng giống như hình ảnh vắng mặt. Do đó, chú thích và văn bản

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Một hình không nhất thiết phải là một hình ảnh. Nó là một đơn vị nội dung độc lập mà

• Thể hiện ý nghĩa của bạn một cách cô đọng, dễ nắm bắt
• Có thể xuất hiện ở một số vị trí trong luồng tuyến tính của trang
• Cung cấp thông tin cần thiết hỗ trợ văn bản chính

Một hình có thể là một số hình ảnh, đoạn mã, âm thanh, video, phương trình, bảng hoặc thứ gì đó khác

Trong phần học tích cực này, chúng tôi muốn bạn lấy đoạn mã đã hoàn thành từ phần học tích cực trước đó và biến nó thành một hình

1. Bọc nó trong một phần tử

   <img src="images/dinosaur.jpg" alt="Dinosaur" />
   

   7
2. Sao chép văn bản ra khỏi thuộc tính

   <img
     src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341" />
   

   8, xóa thuộc tính

   <img
     src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341" />
   

   8 và đặt văn bản vào bên trong thành phần

   <img
     src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum" />
   

   5 bên dưới hình ảnh

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

<img src="images/dinosaur.jpg" alt="Dinosaur" />

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Bạn cũng có thể sử dụng CSS để nhúng hình ảnh vào trang web (và JavaScript, nhưng đó hoàn toàn là một câu chuyện khác). Thuộc tính CSS

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Hình ảnh nhúng kết quả được cho là dễ định vị và kiểm soát hơn so với hình ảnh HTML. Vậy tại sao phải bận tâm với hình ảnh HTML? . Nếu bạn chỉ muốn thêm một cái gì đó đẹp đẽ vào trang của mình để nâng cao hình ảnh, thì điều này là tốt. Mặc dù, những hình ảnh như vậy không có ý nghĩa ngữ nghĩa nào cả. Chúng không thể có bất kỳ văn bản tương đương nào, không hiển thị với trình đọc màn hình, v.v. Đây là nơi hình ảnh HTML tỏa sáng

Tổng hợp. nếu một hình ảnh có ý nghĩa, về mặt nội dung của bạn, bạn nên sử dụng một hình ảnh HTML. Nếu hình ảnh chỉ mang tính chất trang trí, bạn nên sử dụng hình nền CSS

Ghi chú. Bạn sẽ tìm hiểu thêm về hình nền CSS trong chủ đề CSS của chúng tôi

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . hình ảnh HTML

Đó là tất cả cho bây giờ. Chúng tôi có hình ảnh và chú thích chi tiết. Trong bài viết tiếp theo, chúng ta sẽ tiến dần lên, xem xét cách sử dụng HTML để nhúng nội dung video và âm thanh vào các trang web

Làm cách nào để hiển thị nội dung khi nhấp vào nút trong HTML?

Sự kiện onclick .

Ví dụ. Gọi một chức năng khi một nút được bấm. .

In HTML: .

Click a to display the date: .. .

Click a

element to change the text color: .. . Một ví dụ khác về cách thay đổi màu của một phần tử. . Nhấp để sao chép văn bản từ trường nhập liệu này sang trường nhập liệu khác Làm cách nào để đặt xem trước hình ảnh trong HTML?

Hiển thị bản xem trước của hình ảnh bằng JavaScript. .

Bước 1. Tạo Bố cục Cơ bản cho Xem trước Hình ảnh bằng HTML. Thêm phần tử div với lớp có tên image-preview-container. .

Bước 2. Thiết kế phần xem trước hình ảnh bằng CSS. .

Bước 3. Hiển thị bản xem trước của hình ảnh bằng JavaScript

Làm cách nào để tạo một hình ảnh bật lên trong CSS?

Hộp đèn tận dụng điều này bằng cách thực hiện như sau. .

Include thumbnail on page..

Wrap thumbnail in link .. .

Bao gồm hộp đèn ẩn bên dưới hình thu nhỏ với id=some-hash

Sử dụng CSS để hiển thị hộp đèn khi nó là. mục tiêu

Wrap lightbox in to unset the target on click..

Tại sao hình ảnh HTML của tôi không hiển thị?

Bạn cần nhập lại mã HTML của mình bằng chữ hoa. các tệp hình ảnh của bạn đã được tải lên máy chủ đúng cách, nhưng đường dẫn đến hình ảnh của máy chủ không chính xác .