質問編集履歴

2

タグにワードプレスを追加しました

2018/04/17 07:05

投稿

KaoriAbe
KaoriAbe

スコア10

test CHANGED
File without changes
test CHANGED
File without changes

1

自分で書いたコードを追加しました

2018/04/17 07:05

投稿

KaoriAbe
KaoriAbe

スコア10

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,16 @@
13
13
 
14
14
 
15
15
  ```ここに言語を入力
16
+
17
+ HTML
18
+
19
+ <script>
20
+
21
+ jQuery(document).ready(function(e) {jQuery('img[usemap]').rwdImageMaps();});
22
+
23
+ </script>
24
+
25
+
16
26
 
17
27
  <div class="clickablemap">
18
28
 
@@ -32,6 +42,74 @@
32
42
 
33
43
  ```
34
44
 
45
+ ```ここに言語を入力
46
+
47
+ JavaScriot
48
+
49
+
50
+
51
+ var mapimg = new Array(4);
52
+
53
+ mapimg[0] = 'フルパス/img/3tutomoe.png';
54
+
55
+ mapimg[1] = 'フルパス/img/3tutomoe01.png';
56
+
57
+ mapimg[2] = 'フルパス/img/3tutomoe02.png';
58
+
59
+ mapimg[3] = 'フルパス/img/3tutomoe03.png';
60
+
61
+ function mapover() {
62
+
63
+ document.getElementById('link1').onmouseover = function() {
64
+
65
+ document.getElementById('c_map').src = mapimg[1];
66
+
67
+ }
68
+
69
+ document.getElementById('link1').onmouseout = function() {
70
+
71
+ document.getElementById('c_map').src = mapimg[0];
72
+
73
+ }
74
+
75
+ document.getElementById('link2').onmouseover = function() {
76
+
77
+ document.getElementById('c_map').src = mapimg[2];
78
+
79
+ }
80
+
81
+ document.getElementById('link2').onmouseout = function() {
82
+
83
+ document.getElementById('c_map').src = mapimg[0];
84
+
85
+ }
86
+
87
+ document.getElementById('link3').onmouseover = function() {
88
+
89
+ document.getElementById('c_map').src = mapimg[3];
90
+
91
+ }
92
+
93
+ document.getElementById('link3').onmouseout = function() {
94
+
95
+ document.getElementById('c_map').src = mapimg[0];
96
+
97
+ }
98
+
99
+ }
100
+
101
+ if(window.addEventListener) {
102
+
103
+ window.addEventListener("load",mapover,false);
104
+
105
+ } else if(window.attachEvent) {
106
+
107
+ window.attachEvent("onload",mapover);
108
+
109
+ }
110
+
111
+ ```
112
+
35
113
  ロールオーバーはこのやりかたです。
36
114
 
37
115
  https://www.webdlab.com/labs/clickablemap/