Monthly Archives: January 2016
Changing Color of a Dress using JavaScript and HTML
Well Girls! Lets do some fun learning now… I know every Girl likes Barbie, So Now I am Gonna show you all how can we change the color of dresses of our Barbie.
So First lets Consider the following HTML code:
Yes, I know the above code is kind of Cluttered, I will explain each line in detail with comments :
<html>
<head>
//<title> tag helps us to set up a title for the Web App i.e., shown in the tab
<title>Barbie Dress Up</title>
//<Script> tag to connect the HTML Code and JavaScript.
//Heading with second Larger font (<h1> is the largest font for headings amongst <h1>,< h2>, <h3>
<h2> Choose the Color </h2>
//img tag helps to show an image on a webpage where id is the unique identifier for the image , src is the path of the image exists and height, width helps us to regulate the size of the image (This can be done even with CSS)
<img id=”myBarbieColor” src=”Documents\Pink Mission\Dream\Game Images\CasualShopping.jpg” height=”542″ width=”542″ />
// In order to get these buttons in a row we take them in the form of a table we use <table> tag
<table>
// <tr> tag is the one which forms a row in a table
<tr>
//<td> tag is a column in a row, <button> helps us to get a button on the webpage and onclick is the action taken place on clicking the button. Here changeBarbieYellow(), changeBarbieBlue() and changeBarbieBlue() are the functions defined in javascript written in BarbieJavaScript.js page
<td> <button type=”button” onclick=”changeBarbieYellow()” > Yellow </button> </td>
<td>
<button type=”button” onclick=”changeBarbieBlue()” > Violet </button> </td>
<td>
<button type=”button” onclick=”changeBarbiePink()” > Pink </button> </td>
</tr>
</table>
</body>
</html>
JAVASCRIPT:
Now, lets discuss the java script part in detail. changeBarbieYellow(), changeBarbieBlue() and changeBarbieGreen() are the three functions we have here.
// Lets explain one of the above function in detail.
function is the keyword used to create a function in JavaScript and changeBarbieYellow() is the method name. color is the variable name. document.getElementById() is the default method used to identify the image based on the id to perform this function. This id is just like the name for an image and color.src is replacing a new image with the old image.
function changeBarbieYellow() {
var color = document.getElementById(‘myBarbieColor’);
color.src =”Documents/Pink Mission/Dream/Game Images/CasualShoppingYellow.jpg”;
}
I~wiish 