質問編集履歴
2
html、jsを追加しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,13 +16,16 @@
|
|
|
16
16
|
<img src="../image_00.jpg" alt="イメージ画像" flag="1" class="image00" style="">
|
|
17
17
|
</figure>
|
|
18
18
|
</div>
|
|
19
|
+
<div class="list">
|
|
19
20
|
<!-- ここのaタグのホバーで画像の変更を行う -->
|
|
20
|
-
|
|
21
|
+
<ul>
|
|
21
|
-
|
|
22
|
+
<li><a href="@@@"><img src="../image_01.jpg" alt="イメージ画像" flag="1" class="image01" style=""></a></li>
|
|
22
|
-
|
|
23
|
+
<li><a href="@@@"><img src="../image_02.jpg" alt="イメージ画像" flag="1" class="image02" style=""></a></li>
|
|
23
|
-
|
|
24
|
+
<li><a href="@@@"><img src="../image_03.jpg" alt="イメージ画像" flag="1" class="image03" style=""></a></li>
|
|
24
|
-
|
|
25
|
+
<li><a href="@@@"><img src="../image_04.jpg" alt="イメージ画像" flag="1" class="image04" style=""></a></li>
|
|
25
|
-
|
|
26
|
+
</ul>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
26
29
|
<!-- ここのホバーで表示する画像を非表示にして設定している -->
|
|
27
30
|
<div style="display:none;">
|
|
28
31
|
<img src="../image_01.jpg" alt="イメージ画像" flag="1" class="image01" style="">
|
|
@@ -72,6 +75,13 @@
|
|
|
72
75
|
}
|
|
73
76
|
);
|
|
74
77
|
|
|
78
|
+
|
|
79
|
+
// 画像を元に戻す
|
|
80
|
+
function reset_image () {
|
|
81
|
+
$(".top_image img").remove();
|
|
82
|
+
$('.image00').clone(true).appendTo('.top_image figure').hide().fadeIn(400);
|
|
83
|
+
}
|
|
84
|
+
|
|
75
85
|
});
|
|
76
86
|
```
|
|
77
87
|
|
1
htmlを追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,33 @@
|
|
|
6
6
|
liタグの2つめの要素だとimage02の画像を表示…
|
|
7
7
|
といったようにliタグの数だけそれぞれの画像を表示するようにしています。
|
|
8
8
|
|
|
9
|
-
### 現在作成している
|
|
9
|
+
### 現在作成しているHTML・JavaScript
|
|
10
|
+
```html
|
|
11
|
+
<html>
|
|
12
|
+
<body>
|
|
13
|
+
<div class="top_image">
|
|
14
|
+
<figure>
|
|
15
|
+
<!-- ここの画像をホバーによって変える -->
|
|
16
|
+
<img src="../image_00.jpg" alt="イメージ画像" flag="1" class="image00" style="">
|
|
17
|
+
</figure>
|
|
18
|
+
</div>
|
|
19
|
+
<!-- ここのaタグのホバーで画像の変更を行う -->
|
|
20
|
+
<ul>
|
|
21
|
+
<li><a href="@@@"><img src="../image_01.jpg" alt="イメージ画像" flag="1" class="image01" style=""></a></li>
|
|
22
|
+
<li><a href="@@@"><img src="../image_02.jpg" alt="イメージ画像" flag="1" class="image02" style=""></a></li>
|
|
23
|
+
<li><a href="@@@"><img src="../image_03.jpg" alt="イメージ画像" flag="1" class="image03" style=""></a></li>
|
|
24
|
+
<li><a href="@@@"><img src="../image_04.jpg" alt="イメージ画像" flag="1" class="image04" style=""></a></li>
|
|
25
|
+
</ul>
|
|
26
|
+
<!-- ここのホバーで表示する画像を非表示にして設定している -->
|
|
27
|
+
<div style="display:none;">
|
|
28
|
+
<img src="../image_01.jpg" alt="イメージ画像" flag="1" class="image01" style="">
|
|
29
|
+
<img src="../image_02.jpg" alt="イメージ画像" flag="1" class="image02" style="">
|
|
30
|
+
<img src="../image_03.jpg" alt="イメージ画像" flag="1" class="image03" style="">
|
|
31
|
+
<img src="../image_04.jpg" alt="イメージ画像" flag="1" class="image04" style="">
|
|
32
|
+
</div>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
35
|
+
```
|
|
10
36
|
```JavaScript
|
|
11
37
|
$(function() {
|
|
12
38
|
// ホバーで画像を変更する
|
|
@@ -49,6 +75,7 @@
|
|
|
49
75
|
});
|
|
50
76
|
```
|
|
51
77
|
|
|
78
|
+
|
|
52
79
|
現時点では要素が増えるとJavaScriptを書き換える必要があるため、
|
|
53
80
|
ループ等で要素分の関数を記載できたらと考えています。
|
|
54
81
|
|