How To Create HTML DOM Image Object Using Java Script

admin_img Posted By Bajarangi soft , Posted On 06-10-2020

In Java Script we can add image on click of button using java script, so today we discuss how to create image on click of button using java script

How To Create HTML DOM Image Object Using Java Script

Image Object

The Image object represents an HTML <img> element.

Access an Image Object

You can access an <img> element by using getElementById():

Example(1)

<img id="myImg" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">


<button onclick="get_url()">click it</button>

<p id="demo"></p>

<script>
    function get_url() {
        var x = document.getElementById("myImg").src;
        document.getElementById("demo").innerHTML = x;
    }
</script>

In above example when you click button you get url of image

Example(2)
<button onclick="add_image()">Try it</button>

<script>
    function add_image() {
        var x = document.createElement("IMG");
        x.setAttribute("src", "img_pulpit.jpg");
        x.setAttribute("width", "304");
        x.setAttribute("height", "228");
        x.setAttribute("alt", "The Pulpit Rock");
        document.body.appendChild(x);
    }
</script>

In above example when you click button it will add new image 

Image Object Properties
 

Property Description
align Not supported in HTML5. Use style.cssFloat instead.
Sets or returns the value of the align attribute of an image
alt Sets or returns the value of the alt attribute of an image
border Not supported in HTML5. Use style.border instead.
Sets or returns the value of the border attribute of an image
complete Returns whether or not the browser is finished loading an image
crossOrigin Sets or returns the CORS settings of an image
height Sets or returns the value of the height attribute of an image
hspace Not supported in HTML5. Use style.margin instead.
Sets or returns the value of the hspace attribute of an image
isMap Sets or returns whether an image should be part of a server-side image-map, or not
longDesc Not supported in HTML5.
Sets or returns the value of the longdesc attribute of an image
lowsrc Not supported in HTML5.
Sets or returns a URL to a low-resolution version of an image
name Not supported in HTML5. Use id instead.
Sets or returns the value of the name attribute of an image
naturalHeight Returns the original height of an image
naturalWidth Returns the original width of an image
src Sets or returns the value of the src attribute of an image
useMap Sets or returns the value of the usemap attribute of an image
vspace Not supported in HTML5. Use style.margin instead.
Sets or returns the value of the vspace attribute of an image
width Sets or returns the value of the width attribute of an image


Compelete Code For Creating HTML DOM Image Object Using Java Script
<!DOCTYPE html>
<html>
<head>
    <title>How To Create HTML DOM Image Object Using Java Script</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 style="color: tomato">How To Create HTML DOM Image Object Using Java Script</h1>
    </div>
    <div class="well">

        <img id="myImg" src="../image/demo5.jpg" alt="The Pulpit Rock" width="304" height="228"><br><br>
        <button class="btn btn-success" onclick="get_url()">click it</button>
        <h2 id="demo"></h2>
        <button class="btn btn-success" onclick="add_image()">Try it</button>

        <script>
            function get_url() {
                var x = document.getElementById("myImg").src;
                document.getElementById("demo").innerHTML = x;
            }
            function add_image() {
                var x = document.createElement("IMG");
                x.setAttribute("src", "../image/demo3.jpg");
                x.setAttribute("width", "304");
                x.setAttribute("height", "228");
                x.setAttribute("alt", "The Pulpit Rock");
                document.body.appendChild(x);
            }
        </script>
    </div>
</div>
</body>
</html>

 

Related Post