JQueryData/Day16Image.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

<html>
<head>

		<style>
				.imgstyle{
				height:100px;
				width:100px;
				border:1px solid grey;
			}
		</style>

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


				   }

			   });
		   });
		</script>

<title>Insert title here</title>
</head>
<body>
	<img id="mainImage" alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Hydrangeas.jpg"
		height="500" width="520" style= "border:3px solid red">
<div id="galleryImages">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Hydrangeas.jpg" class="imgstyle">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Koala.jpg"class="imgstyle">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Lighthouse.jpg"class="imgstyle">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Jellyfish.jpg"class="imgstyle">
	<img alt="Nothing to Display" src="C:\Users\Ulhas\workspace\jQureyDemo\Images\Penguins.jpg"class="imgstyle">
</div>

</body>
</html>