fall2016-melissa-JQueryInteractiveExample/index.html at master · ARS327/fall2016-melissa-JQueryInteractiveExample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<!-- Text element used to print mouse position.
		 We are using jQuery to select it by its uniquely-named class.
		 The class starts with "js" to indicate that it's a javascript "hook".
		 If we decide to use another class to style this element,
		 it will be separate from the interactivity.You can comment this out later-->

	<div id="avoidIDs" class="js-mouse-coord text-field"></div>

	<!-- Element where we are attaching the interactity
		-->
	<div class="js-mouse-interaction image-container">
		<img src="images/Me_Projection1_sm.jpg" class="transluscent-image">
		<img src="images/fade-in.jpg" class="js-fade-in">
	</div>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="js/mouseInteractions.js"></script>
<!--Now Try to create your own interaction with mouse movement and something like opacity :)... Helpful Links http://javascript.info/tutorial/mouse-events
http://www.quirksmode.org/js/events_mouse.html
http://www.w3schools.com/js/js_events_examples.asp
-->
</body>
</html>