cherrymalia.github.io/icons.html at main · cherrymalia/cherrymalia.github.io · 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
	<title>Assignment 5</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<span>
		<img src="img/twitter.jpg" class="twitter" width="100" height="100">
		<img src="img/funimation.jpg" class="funimation" width="100" height="100">
		<img src="img/crunchyroll.png" class="crunchyroll" width="100" height="100">
		<br>
		<img src="img/youtube.png" class="youtube" width="100" height="100">
		<img src="img/tiktok.png" class="tiktok" width="100" height="100">
		<img src="img/netflix.jpg" class="netflix" width="100" height="100">
	</span>

	<script>
		$("span").mousemove(function(event) {
  		$("p.location").last().text("Mouse X: " + event.clientX + ", Y: " + event.clientY);
		});

		$("img.twitter").mouseenter(function(){
    	$("p.in").text("In: Twitter");
		$(this).fadeTo("fast", 0.5);
		});
		$("img.funimation").mouseenter(function(){
    	$("p.in").text("In: Funimation");
		$(this).fadeTo("fast", 0.5);
		});
		$("img.crunchyroll").mouseenter(function(){
    	$("p.in").text("In: Crunchyroll");
		$(this).fadeTo("fast", 0.5);
		});
		$("img.youtube").mouseenter(function(){
    	$("p.in").text("In: YouTube");
		$(this).fadeTo("fast", 0.5);
		});
		$("img.tiktok").mouseenter(function(){
    	$("p.in").text("In: TikTok");
		$(this).fadeTo("fast", 0.5);
		});
		$("img.netflix").mouseenter(function(){
    	$("p.in").text("In: Netflix");
		$(this).fadeTo("fast", 0.5);
		});

		$("img.twitter").mouseleave(function(){
    	$("p.out").text("Out: Twitter");
		$(this).fadeTo( "fast", 1.0);
		});
		$("img.funimation").mouseleave(function(){
    	$("p.out").text("Out: Funimation");
		$(this).fadeTo( "fast", 1.0);
		});
		$("img.crunchyroll").mouseleave(function(){
    	$("p.out").text("Out: Crunchyroll");
		$(this).fadeTo("fast", 1.0);
		});
		$("img.youtube").mouseleave(function(){
    	$("p.out").text("Out: YouTube");
		$(this).fadeTo( "fast", 1.0);
		});
		$("img.tiktok").mouseleave(function(){
    	$("p.out").text("Out: TikTok");
		$(this).fadeTo( "fast", 1.0);
		});
		$("img.netflix").mouseleave(function(){
    	$("p.out").text("Out: Netflix");
		$(this).fadeTo( "fast", 1.0);
		});

  		$("img.twitter").dblclick(function() {
  		window.open("https://twitter.com/");
		});
		$("img.funimation").dblclick(function() {
  		window.open("https://funimation.com/");
		});
		$("img.crunchyroll").dblclick(function() {
  		window.open("https://crunchyroll.com/");
		});
		$("img.youtube").dblclick(function() {
  		window.open("https://youtube.com/");
		});
		$("img.tiktok").dblclick(function() {
  		window.open("https://tiktok.com/");
		});
		$("img.netflix").dblclick(function() {
  		window.open("https://netflix.com/");
		});

		$("img.twitter").click(function(){
		$("img.clicked").attr("src", "img/twitter.jpg").width("300").height("300");
		});
		$("img.funimation").click(function(){
		$("img.clicked").attr("src", "img/funimation.jpg").width("300").height("300");
		});
		$("img.crunchyroll").click(function(){
		$("img.clicked").attr("src", "img/crunchyroll.png").width("300").height("300");
		});
		$("img.youtube").click(function(){
		$("img.clicked").attr("src", "img/youtube.png").width("300").height("300");
		});
		$("img.tiktok").click(function(){
		$("img.clicked").attr("src", "img/tiktok.png").width("300").height("300");
		});
		$("img.netflix").click(function(){
		$("img.clicked").attr("src", "img/netflix.jpg").width("300").height("300");
		});

	</script>

	<p class="in">In: </p>
	<p class="out">Out: </p>
	<p class="location">Mouse X: , Y: </p>
	<img class="clicked"/>
</body>
</html>