Javascriptで質問です、画像をHTML上で合成したいのですが、どうすればよいのでしょうか?。具体的には、画像があり、A、B、Cとラジオボタンを変更すれば、それにともなってフレームを変更できればと考えております。


よろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/04/07 20:09:50
  • 終了:--

回答(2件)

id:ed_tks No.1

ed_tks回答回数699ベストアンサー獲得回数02005/04/07 21:00:00

ポイント100pt

http://himajin.moo.jp/freejava/imgchange/radiochange.html

ラジオボタンで画像の切り替え

ラジオボタンで画像を切り替えるJavascriptを利用してはいかがでしょうか?

http://tksmtmt.s28.xrea.com/sample/change/

ラジオボタンで画像の切り替え

上記ページのJavascriptを用いて、画像のフレーム(枠)を切り替えるサンプルを作成してみました。


テーブルの背景はベースイメージ、前面の枠部分は内側を透過させたGIF画像としています。


見当違いでしたら申し訳ありません。

id:saluru

ありがとうございま。

2005/04/08 10:42:57
id:horosuke No.2

horosuke回答回数100ベストアンサー獲得回数02005/04/07 22:09:12

ポイント100pt

「プリクラのフレームのような感じで、人物画像に対してフレームを付与するイメージ」と理解して作りました。


人物の画像: ImageBackground.gif で指定 (じつは背景画像みたいなもの)

フレームの画像: Frame1.gif ~ Frame3.gif で、フレーム画像を指定


フレーム画像は透明領域を指定することで、人物画像に対して重ねた後あたかもフレームに入っているように見せるものです


<html><title>SAPMLE</title>

<body bgcolor=#E0E0E0>

<div style=’margin-left:100pt;margin-right:100pt;’>

<font size=+2 color=black>画像の選択</font>


<form name=”myForm”>


<div style=’background:#F0D0F0’>


<input type=”radio” name=”select” value=”Frame1” onclick=”targetImage.src=’./images/Frame1.gif’” />フレーム1


<input type=”radio” name=”select” value=”Frame2” onclick=”targetImage.src=’./images/Frame2.gif’” />フレーム2


<input type=”radio” name=”select” value=”Frame3” onclick=”targetImage.src=’./images/Frame3.gif’” />フレーム3


<input type=”radio” name=”select” value=”Blank” onclick=”targetImage.src=’./images/spacer.gif’” />なし


</div>

</form>


<table border=00 cellspacing=0 cellpadding=0 bgcolor=#666666>

<tbody><tr><td background=”./images/ImageBackground.gif”>


<IMG src=”./images/spacer.gif” name=”targetImage” width=120 height=160 border=0>

</td></tr>

</tbody></table>


<A href=”javascript:location.reload()”>リロード</a>

</div>


</body></html>


このようなものでいかがでしょう。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません