Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>jQuery Vacation Images</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="vacation.css">
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   	<script src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$("#vacationimages img").click(function()  {
		var changeSrc = $(this).attr("src");
		var changeAlt = $(this).attr("alt");
			$("#currentimg").attr("src", changeSrc); //code to show large clicked image on the right
			$("#imagedesc").text(changeAlt); 		//code to show alt under the large image in text
	});	//end of vacation mouse click verification

	$("#submitme").click(function () {
		$("#question span").text("");
		$("#mymessage").text("");
		var myname = $("#firstname").val();
		  if (myname == '')  {
		  	$("#question span").text("Must enter first name");
		  	return;
		  }
		$("#vacationimages img").click(function()  {
			var changeAlt = $(this).attr("alt");
			$(this).data('clicked', true);
			if (myname !== "" || (#vacationimages img).data('clicked'))
			{
				$("#mymessage").text(myname + " you want a " + changeAlt + " vacation"); //if image clicked and name is set this message will show under the "Submit Me" button
			}
		}) //end of Name Verification for empty field

	})   //end of Submit Me button handler

})  // END OF READY

</script>

</head>

<body>


<div id="question">
	<h2>jQuery Vacation Images</h2>
	<p>What is your first name?
	<input type="text" id="firstname" size="30">
	<span></span>
	</p>
</div>

<div id="vacationimages">
	<p>Click on the Image that best represents the kind of vacation you want</p>
	<p><img src="mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
	<p><img src="desert.jpg" alt="Desert Vacation"><br /><br /></p>
	<p><img src="ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>

<div id="bigimage">
	<img id="currentimage" src="ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
	<p id="imagedesc"></p>
</div>

<div id="showhidebuttondiv">
	<input id="showhidebutton" type="button" value="Hide Image">
</div>


<div id="submitdiv">
	<input id="submitme" type="button" value="Submit ME">
	<p id="mymessage"></p>
</div>


</body>
</html>