mrobinson537/box-shadow-hover-resize.js

## box-shadow-hover-resize.js
<!DOCTYPE html>
<head>
<style>
body {
	background:#e2e2e2;
	color:#1c1c1c;
	font-size:2em;
}
article {
	width:1200px;
	margin:0 auto;
	height:800px;
	padding:20px;
	background:#FAFAFA;
}
header {
	margin-bottom:50px;
}

</style>

<title>Hello</title>

</head>


<body>
	<script>

		//this demonstrates what you can do in the case of an alert to produce a character turn


		//the line below gives us the screen width and height
		//document.write("Screen Height: " + screen.height + "<br /> Width:" + screen.width);

		//the line below gives us the screen width and height as well, using escape character
		//alert("Screen Height: " + screen.height + "\n Width:" + screen.width);


		//this gives us the location of the current page
		//alert(window.location);


		//the line below performs a redirect
		// window.location = "http://www.microsoft.com";


		//this changes the document title on the top tab
		//document.title = ("Here is the title.");


		//this deals with the first image

		function imageLarge()
		{
			var myimage = document.getElementById("picture").height="500";
			myimage = document.getElementById("picture").width="1200";
			myimage = document.getElementById("picture").border="1";


		}

		function imageSmall()
		{
			var myimage = document.getElementById("picture").height="300";
			myimage = document.getElementById("picture").width="1200";
			myimage = document.getElementById("picture").border="0";

		}

		//this deals with the second image

		function imageShadow()
		{
			var myimage = document.getElementById("picture2");
			myimage.style.boxShadow = "0 5px 10px black";

		}

		function imageNone()
		{
			var myimage = document.getElementById("picture2");
			myimage.style.boxShadow = "none";

		}


	</script>

<article>
<header>
<img src="images/header-image3.png" id="picture" onclick="imageLarge()" onmouseout="imageSmall()">
</header>


<img src="images/header-image2.png" id="picture2" onmouseover="imageShadow()" onmouseout="imageNone()">


</article>

</body>

</html>
	<!DOCTYPE html>
	<head>
	<style>
	body {
	background:#e2e2e2;
	color:#1c1c1c;
	font-size:2em;
	}
	article {
	width:1200px;
	margin:0 auto;
	height:800px;
	padding:20px;
	background:#FAFAFA;
	}
	header {
	margin-bottom:50px;
	}

	</style>

	<title>Hello</title>

	</head>



	<body>
	<script>

	//this demonstrates what you can do in the case of an alert to produce a character turn


	//the line below gives us the screen width and height
	//document.write("Screen Height: " + screen.height + "<br /> Width:" + screen.width);

	//the line below gives us the screen width and height as well, using escape character
	//alert("Screen Height: " + screen.height + "\n Width:" + screen.width);


	//this gives us the location of the current page
	//alert(window.location);


	//the line below performs a redirect
	// window.location = "http://www.microsoft.com";


	//this changes the document title on the top tab
	//document.title = ("Here is the title.");


	//this deals with the first image

	function imageLarge()
	{
	var myimage = document.getElementById("picture").height="500";
	myimage = document.getElementById("picture").width="1200";
	myimage = document.getElementById("picture").border="1";


	}

	function imageSmall()
	{
	var myimage = document.getElementById("picture").height="300";
	myimage = document.getElementById("picture").width="1200";
	myimage = document.getElementById("picture").border="0";

	}

	//this deals with the second image

	function imageShadow()
	{
	var myimage = document.getElementById("picture2");
	myimage.style.boxShadow = "0 5px 10px black";

	}

	function imageNone()
	{
	var myimage = document.getElementById("picture2");
	myimage.style.boxShadow = "none";

	}



	</script>

	<article>
	<header>
	<img src="images/header-image3.png" id="picture" onclick="imageLarge()" onmouseout="imageSmall()">
	</header>



	<img src="images/header-image2.png" id="picture2" onmouseover="imageShadow()" onmouseout="imageNone()">


	</article>

	</body>

	</html>