ラジオボタンを画像にしたい

着せ替えをしてオリジナルのアバターを作成できるサイト

現在、css,JavaScript,html等でアバターを作成するウェブサイトを作成しています。
着せかえ自体は実装できてきます。今回アドバイスをもらいたいのは、着せかえの際ラジオボタンを使用しているのを画像を見て選択したものを着せ替えに反映させる方法です。
よろしくお願いします。

ソースの一部です

html
1<html>
2<meta charset="utf-8">
3
4<head>
5	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
6<style type="text/css">
7#dress {
8	position:relative;
9	height: 500px;
10}
11#dress img {
12	position: absolute;
13	top: 0;
14	left: 0;
15	right: 0;
16	bottom: 0;
17	margin:auto;
18}
19</style>
20<style type="text/css" media="print">
21.print {
22	display: none;
23}
24</style>
25
26<script type="text/javascript">
27	//服の種類選択------------------------------------------------------------------------------------------------------
28	function innerChange(){
29		radio = document.getElementsByName('inner')
30		//服なし
31		if(radio[0].checked) {
32			document.getElementById('innerColorBox01').style.display = "none";
33			document.getElementById('innerColorBox02').style.display = "none";
34			document.getElementById('innerColorBox03').style.display = "none";
35			document.getElementById("inner_message").innerHTML = "インナー未選択";
36			document.getElementById("innerColor_message").innerHTML = "-";
37			document.innerLink.src = "images/none.png";
38		}
39		//タンクトップ
40		else if(radio[1].checked) {
41			document.getElementById('innerColorBox01').style.display = "block";	//タンクトップの色を表示
42			document.getElementById('innerColorBox02').style.display = "none";	//Yシャツの色を非表示
43			document.getElementById('innerColorBox03').style.display = "none";	//七分丈の色を非表示
44			document.getElementById("inner_message").innerHTML = "タンクトップです。";	//服の種類の説明文変更
45			document.getElementById("innerColor_message").innerHTML = "白です。";	//服の色の説明文変更
46			document.innerLink.src = "images/inner_a01.png";	//画像変更
47			document.getElementsByName("innerColor_a")[0].checked = true;	//色のラジオボタンの初期値設定
48		}
49		//Yシャツ
50		else if(radio[2].checked) {
51			document.getElementById('innerColorBox01').style.display = "none";
52			document.getElementById('innerColorBox02').style.display = "block";
53			document.getElementById('innerColorBox03').style.display = "none";
54			document.getElementById("inner_message").innerHTML = "Yシャツです。";
55			document.getElementById("innerColor_message").innerHTML = "白です。";
56			document.innerLink.src = "images/inner_b01.png";
57			document.getElementsByName("innerColor_b")[0].checked = true;
58		}
59		//七分丈
60		else if(radio[3].checked) {
61			document.getElementById('innerColorBox01').style.display = "none";
62			document.getElementById('innerColorBox02').style.display = "none";
63			document.getElementById('innerColorBox03').style.display = "block";
64			document.getElementById("inner_message").innerHTML = "七分丈です。";
65			document.getElementById("innerColor_message").innerHTML = "白です。";
66			document.innerLink.src = "images/inner_c01.png";
67			document.getElementsByName("innerColor_c")[0].checked = true;
68		}
69	}
70
71	//服の色選択------------------------------------------------------------------------------------------------------
72	//タンクトップ
73	function innerColor_a01(){
74		document.innerLink.src = "images/inner_a01.png";
75		document.getElementById("innerColor_message").innerHTML = "白です。";
76	}
77	function innerColor_a02(){
78		document.innerLink.src = "images/inner_a02.png";
79		document.getElementById("innerColor_message").innerHTML = "赤です。";
80	}
81	function innerColor_a03(){
82		document.innerLink.src = "images/inner_a03.png";
83		document.getElementById("innerColor_message").innerHTML = "緑です。";
84	}
85	function innerColor_a04(){
86		document.innerLink.src = "images/inner_a04.png";
87		document.getElementById("innerColor_message").innerHTML = "青です。";
88	}
89	//Yシャツ
90	function innerColor_b01(){
91		document.innerLink.src = "images/inner_b01.png";
92		document.getElementById("innerColor_message").innerHTML = "白です。";
93	}
94	function innerColor_b02(){
95		document.innerLink.src = "images/inner_b02.png";
96		document.getElementById("innerColor_message").innerHTML = "赤です。";
97	}
98	function innerColor_b03(){
99		document.innerLink.src = "images/inner_b03.png";
100		document.getElementById("innerColor_message").innerHTML = "緑です。";
101	}
102	function innerColor_b04(){
103		document.innerLink.src = "images/inner_b04.png";
104		document.getElementById("innerColor_message").innerHTML = "青です。";
105	}
106	//七分丈
107	function innerColor_c01(){
108		document.innerLink.src = "images/inner_c01.png";
109		document.getElementById("innerColor_message").innerHTML = "白です。";
110	}
111	function innerColor_c02(){
112		document.innerLink.src = "images/inner_c02.png";
113		document.getElementById("innerColor_message").innerHTML = "赤です。";
114	}
115	function innerColor_c03(){
116		document.innerLink.src = "images/inner_c03.png";
117		document.getElementById("innerColor_message").innerHTML = "緑です。";
118	}
119	function innerColor_c04(){
120		document.innerLink.src = "images/inner_c04.png";
121		document.getElementById("innerColor_message").innerHTML = "青です。";
122	}
123</script>
124</head>
125
126<body>
127	<div id="dress">
128		<img src="images/body.gif">
129		<img src="images/none.png" name="innerLink">
130		<img src="images/none.png" name="outerLink">
131	</div>
132
133	<div class="print" id="float_left">
134		<p>■インナーの種類を選択してください。</p>
135		<p>
136			<input type="radio" name="inner" onClick="innerChange();" checked />なし
137			<input type="radio" name="inner" onClick="innerChange();" />タンクトップ
138			<input type="radio" name="inner" onClick="innerChange();" />Yシャツ
139			<input type="radio" name="inner" onClick="innerChange();" />七分丈　　　
140		</p>
141
142		<!-- 表示非表示切り替え -->
143		<div id="innerColorBox01" style="display:none;">
144			<p class="btn">
145				<input type="radio" name="innerColor_a" onClick="innerColor_a01()" value="画像1">白
146				<input type="radio" name="innerColor_a" onClick="innerColor_a02()" value="画像2">赤
147				<input type="radio" name="innerColor_a" onClick="innerColor_a03()" value="画像3">緑
148				<input type="radio" name="innerColor_a" onClick="innerColor_a04()" value="画像3">青
149			</p>
150		</div>
151		<div id="innerColorBox02" style="display:none;">
152			<p class="btn">
153				<input type="radio" name="innerColor_b" onClick="innerColor_b01()" value="画像1">白
154				<input type="radio" name="innerColor_b" onClick="innerColor_b02()" value="画像2">赤
155				<input type="radio" name="innerColor_b" onClick="innerColor_b03()" value="画像3">緑
156				<input type="radio" name="innerColor_b" onClick="innerColor_b04()" value="画像3">青
157			</p>
158		</div>
159		<div id="innerColorBox03" style="display:none;">
160			<p class="btn">
161				<input type="radio" name="innerColor_c" onClick="innerColor_c01()" value="画像1">白
162				<input type="radio" name="innerColor_c" onClick="innerColor_c02()" value="画像2">赤
163				<input type="radio" name="innerColor_c" onClick="innerColor_c03()" value="画像3">緑
164				<input type="radio" name="innerColor_c" onClick="innerColor_c04()" value="画像3">青
165			</p>
166		</div>
167	</div>
168</body>
169</html>
170

spookybird

2018/08/22 06:36

コードをコードブロックに入れてください。コードブロックがわからなければ「markdown コードブロック」で調べてみてください。

KakudateDai

2018/08/22 06:41

すいません！修正ました！

spookybird

2018/08/22 06:44

問題となっている事象が再現できるソースコードをご提示ください。DOMの構造もわかりませんしやりたいこともよくわかりません。

KakudateDai

2018/08/22 07:12

ソースコードを変更しました。服の種類を選択するラジオボタンを画像を表示させ、それを選択することで、着せかえを実行したいです

行動規範の内容に同意します

回答1件

ベストアンサー

inputにIDを振って、labelのforでidを指定することで、それぞれがひも付きます。
（画像クリックでラジオボタンが選択されます。）
もちろんidですので、ページで一意にしてください。

CSS・レイアウトはご自由に。

html
1<p>
2  <input id="unset" type="radio" name="inner" onClick="innerChange();" checked /><label for="unset"><img ~~~></label>
3  <input id="tanktop" type="radio" name="inner" onClick="innerChange();" /><label for="tanktop"><img ~~~></label>
4  <input id="tshirt" type="radio" name="inner" onClick="innerChange();" /><label for="tshirt"><img ~~~></label>
5  <input id="seven" type="radio" name="inner" onClick="innerChange();" /><label for="seven"><img ~~~></label>
6</p>