JQueryData/Demo.html at master · ulhas1991/JQueryData · 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>

<meta charset="ISO-8859-1">
<title>Insert title here</title>

<script src="jquery-3.1.1.js"></script>
<script >
$(document).ready(function() {
	$("#imageContainer img").on({
		mouseover: function(){
			$(this).css({
				'cursor': "pointer",
				'border-Color':'blue'
			});
		},
		mouseout: function(){
			$(this).css({
				'cursor': "default",
				'border-Color': "grey"
			});
		},
		click: function(){
			var data=$(this).attr("src");
			$("#mainImage").attr("src", data);
		}
	});
});


</script>

<style type="text/css">
	.imageClass{
		height: 100px;
		width: 100px;
		border-color: grey;

	}

</style>
</head>
<body>
<img alt="Nothig To Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Hydrangeas.jpg" width="520" height="500"
	style="border:2px solid gray;" id="mainImage">
<div id="imageContainer">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Jellyfish.jpg" class="imageClass">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Koala.jpg" class="imageClass">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Lighthouse.jpg" class="imageClass">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Tulips.jpg" class="imageClass">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Penguins.jpg" class="imageClass">
</div>


</body>
</html>