Javascript DOM Image Element load image

Description

Javascript DOM Image Element load image

View in separate window 


<!DOCTYPE html>

<html>
<head>
   <title>Loading and Documenting an Image</title>
   <script language="JavaScript">
      function LoadImage()// ww w .j  av  a  2 s .c  o  m
      {
         // Specify the image.
         var Image = document.getElementById("Image");
         Image.alt = "This is a test image.";
         Image.src = "image1.png";
         
         // Set the caption.
         var Caption = document.getElementById("Caption");
         Caption.innerHTML = "A Test Image";
      }
      
      function Clicked()
      {
         // Display a message.
         document.getElementById("demo").innerHTML = "You clicked the image.";
      }
   </script>
</head>

<body>
   
   <p id="demo"></p>
   <h1>Loading and Documenting an Image</h1>
   <figure onclick="Clicked()">
      <img id="Image"
           src=""
           alt=""
           height="200px"
           width="200px">
      <figcaption id="Caption" />
   </figure>
   <input id="btnLoad"
          type="button"
          value="Load the Image"
          onclick="LoadImage()" />
</body>
</html>



PreviousNext

Related