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:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Barbie Dress Up</title>
// http://DocumentsPink%20MissionDreamBarbieJavaScript.js
<h1> Choose the Occasions </h1>
<h2> Choose the Occasions </h2>
<h3> Choose the Occasions </h3>
<p> Hello </p>
<h1> Choose the Occasion </h1>
<!– <img id=”myBarbie” onclick=”changeBarbieDress()” src=”C:\Users\Sirisha\Documents\Pink Mission\Dream\Game Images\Swim.jpg” /> –>
<img id=”myBarbieColor” src=”Documents\Pink Mission\Dream\Game Images\CasualShopping.jpg” height=”542″ width=”542″ />
<table>
<tr> Shopping Barbie </tr>
<tr>
<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>
Yes, I know the above code is kind of Cluttered, I will explain each line in detail with comments :
<html>
<head>
//Title of the Web App shown in the tab
<title>Barbie Dress Up</title>
//Script tag to connect the HTML Code and JavaScript.
// http://DocumentsPink%20MissionDreamBarbieJavaScript.js
//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 doen 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
<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.
function changeBarbieYellow() {
var color = document.getElementById(‘myBarbieColor’);
color.src =”C:/Users/Sirisha/Documents/Pink Mission/Dream/Game Images/CasualShoppingYellow.jpg”;
}
function changeBarbieBlue() {
var color = document.getElementById(‘myBarbieColor’);
color.src =”C:/Users/Sirisha/Documents/Pink Mission/Dream/Game Images/CasualShoppingBlue.jpg”;
}
function changeBarbiePink() {
var color = document.getElementById(‘myBarbieColor’);
color.src =”C:/Users/Sirisha/Documents/Pink Mission/Dream/Game Images/CasualShopping.jpg”;
}
// 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 