Just to recap hopefully you remember that HTML elements are objects.  The attributes inside an element's opening tag are also objects so in this:

<p class="fred">

p is an object but so is class.  In HTML class is an attribute and fred is a value.  In JavaScript class is an object and the text fred is a property of that object!  I'm fairly sure they didn't use the different names just to confuse people.

The point is that any HTML attribute can be seen or changed using JavaScript.

Doing it

Open your HTML template and save it as jsatt.html.  You should already have a copy of the image whatsinside.png which you will use soon.  You also need to download this image and save it to the same folder jsatt.html is in (beginnerssite).

If you do not remember how to do any of the stuff below look at your other pages and copy the code.  The aim of this page is partly to go through all the steps you have learned so far.


Add an img element to jsatt.html with whatsinside.png as the src.  Add an alt attribute with a value describing the image.  Save and test.

Add an onmouseup attribute to the img tag which calls a JavaScript function named imageSwap().

Also add an id attribute with the value huh.  The image element should now have four attributes (each with a value).

Save it.  Open it in a browser and open the error console.  Click on the image and you should see an error because the function does not exist.

The JavaScript

Create the function imageSwap() inside a script element just under the style element.  Inside the function just put this for now:


Save and test by clicking on the image (the alert should appear).  If not use the console to spot the error.  Testing it step by step like this is a good idea.

Now delete the alert line and paste these two in it's place:

window.document.getElementById('huh').alt='How you will look if your code does not work';

Save and test by clicking.  If the image does not change but you do not get an error check that you downloaded the above image and that you spelled the file name correctly.  The console may have told you what the error was but not all do.

Swapping back by calling a new function

Create a second function by copying the first one.  Call the second one imageSwapBack().  Change the two lines of code inside the second function to change the image src and alt back to the originals. 

For the new function to do anything you need to add a second event trigger.    Create a new onmouseup event trigger which calls the second function.  Put it after the first one (still inside the img tag).  You cannot have two examples of onmouseup in one element so change the first one to onemousedown.  Test the page and when you press your mouse button down the image should change.  When you release the mouse button it should change back.

Now amend the code with onmouseover instead of onmousedown and onmouseout instead of onmouseup.  Test it.

Other attributes

The most important one would be form fields where you can obtain or set the value but any other attribute can be accessed as well,