Look at the image below and then click the button underneath:
To do this, we use the line:
document.getElementById ("id_name").attribute ="value";
where id_name is the id of the element you are selecting, attribute is the attribute of the element you want to change, and value is the new value which you want to assign to the attribute to change its value to something else.
So for our image to change from the Sony X10 headphones to the alienware computer, we use the lines:
The HTML code of the original image tag we are changing is:
All we have to do then do from this point is put this above method in a function and call this function when the button 'Change Image' is clicked.
But changing an element's attribute is as simply as referencing the element by ID, adding .attribute, and then using an equal assignment statement to put the attribute's new value, using
the format document.getElementById ("id").attribute= "new_value".
Let's go back to an image tag and now let's modify other attributes, the height and width attributes.
Let's say we have an image below:
To make the above image smaller, we again use the same format.
Once this time, we change the image's height and width elements to smaller dimensions.
The HTML code of the original element is:
We then put this in a function so that the button will call this function when clicked.
If you become a little more dynamic, this application below allows you to specify the height of the image so that a user can enter the height dimension
that he wants the image to be.
Above you enter the height which you want the image to be in pixels (px).
Enter any value and the image will be that in height.
To create this, you first create an HTML text box which allows a user to enter in a height value, such as like the one shown above. You assign an id element to this element. If we assign the id of imageheight, then we can obtain the value which the user enters into the text box and store it.
We access the value entered into the text box with document.getElementById ("imageheight").value and we store it by creating a variable called height.
After we have this, we now reference the image.
The HTML for the original image is:
This gives the new height which the user specified to the image. Now all that must be done is the above lines should be placed
into a function. Once a submit button is created, it should have an onclick() function which calls the function to change the image