1
+ <!DOCTYPE html>
2
+ < html lang ="ja ">
3
+ < head >
4
+ < meta charset ="utf-8 ">
5
+ < title > WAIC-CODE-0119-01</ title >
6
+ < meta name ="copyright " content ="This document is licensed under a Creative Commons 4.0 ">
7
+ < link rel ="license " href ="https://creativecommons.org/licenses/by/4.0/ ">
8
+ < meta name ="author " content ="ウェブアクセシビリティ基盤委員会(WAIC) ">
9
+ < script >
10
+ function updateImage ( imgId , isOver ) {
11
+ var theImage = document . getElementById ( imgId ) ;
12
+
13
+ if ( theImage != null ) {
14
+ if ( isOver ) {
15
+ theImage . setAttribute ( 'src' , 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiNGRjc3MDAiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjRkY3NzAwIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=' ) ;
16
+ } else {
17
+ theImage . setAttribute ( 'src' , 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=' ) ;
18
+ }
19
+ }
20
+ }
21
+ </ script >
22
+ </ head >
23
+ < body >
24
+ < h1 > WAIC-CODE-0119-01</ h1 >
25
+ < p > 以下のリンクにマウスオーバーするかTabキーでフォーカスし、画像の変化を確認してください</ p >
26
+ < a
27
+ href ="# "
28
+ onmouseover ="updateImage('link1', true); "
29
+ onfocus ="updateImage('link1', true); "
30
+ onmouseout ="updateImage('link1', false); "
31
+ onblur ="updateImage('link1', false); "
32
+ >
33
+ < img
34
+ src ="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4= "
35
+ alt =""
36
+ id ="link1 "
37
+ width ="16 "
38
+ height ="16 "
39
+ >
40
+ リンク 1
41
+ </ a >
42
+ < a
43
+ href ="# "
44
+ onmouseover ="updateImage('link2', true); "
45
+ onfocus ="updateImage('link2',true); "
46
+ onmouseout ="updateImage('link2', false); "
47
+ onblur ="updateImage('link2', false); "
48
+ >
49
+ < img
50
+ src ="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4= "
51
+ alt =""
52
+ id ="link2 "
53
+ width ="16 "
54
+ height ="16 "
55
+ >
56
+ リンク 2
57
+ </ a >
58
+ </ body >
59
+ </ html >
0 commit comments