Adding image source to JavaScript and HTML

Question

When I started learning JavaScript from zero, I used the w3schools website where I could easily compile the code without needing any IDE, etc... Now, I have moved on to using Visual Studio 2010 so I am gradually learning more and more.

In this example that turns a light bulb on and off, where is the bulb image stored on the w3schools website, so I can download and save it?

Now that I have a basic Visual Studio project (ASP.NET Web Application) that has a JavaScript and an HTML component, where should I store the bulb image and how should I reference it in my program?

my JavaScript code:

function changeImage()
{
    var image = document.getElementById('myImage');

    if ( image.src.match("bulbon") )
    {
        image.src = "pic_bulboff.gif";
    }
    else
    {
        image.src = "pic_bulbon.gif";
    }
}

my HTML code:

<!DOCTYPE html PUBLIC>
<html>

<head>
    <title>Title of the page</title>
    <script type="text/javascript" src="JScript3.js"></script>
</head>

<body>
    <h1>Header of the page</h1>
    <p>Content of the page</p>
    <p id = "demo">Click the light bulb to turn the light on & off</p>

    <img id = "myImage"
         onclick = "changeImage()"
         src = "pic_bulboff.gif"
         width="100" height="180">
</body>

</html>

Are you running your html off a server or just your local file system. You do not need an IDE for HTML/javascript development a simple text editor should suffice. If you are running it off your file system place the image in the same folder as your html file. — Neil DCruz, Jun 22 '16 at 18:18
Please refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match for the usage of match. It is used to match a regular expression and returns a boolean value. — Neil DCruz, Jun 22 '16 at 18:31

score 0 · Answer 1 · answered Jun 22 '16 at 18:33

0

You do not need to worry about using the Visual Studio for HTML/Javascript development.

Download the image and save it in the same folder in which the HTML file is placed. Or, you can make separate folder for image files and then write

<img src = "/images/image_name" id="myImage">

This is when the image is lying inside the folder 'images' which is placed at the same location where your HTML file is placed.

answered Jun 22 '16 at 18:33

Amita

944
1
8
20

Thank you. I just don't understand why my opening `` – Jun 23 '16 at 09:36
1

The `img` tag is called a void element, and hence it does not need to be closed. Refer [this](http://stackoverflow.com/questions/14860492/how-to-close-img-tag-properly) question for more details, @Joshua – Amita Jun 23 '16 at 10:34
Thank you, but I have tried all those suggestions. None of the following resolves the underline indication; i.e. my opening tag is still highlighted: `` also `` also `` also `` – Jun 23 '16 at 11:06
1

There could be some other sort of mistake, may be the tag above it is not closed or problem with some nested tags. If it does not cause any problem while running your application, then it could be any trivial problem as well. – Amita Jun 23 '16 at 11:20
@Joshua, if my answer has solved your problem as given in your question, please mark it as correct. – Amita Jun 25 '16 at 09:58
My problem still persists, as described in the comments. The ` – Jun 25 '16 at 17:02

Adding image source to JavaScript and HTML

1 Answers1