人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

よろしくお願いします。

●質問者: saluru
●カテゴリ:ビジネス・経営 コンピュータ
✍キーワード:HTML JavaScript フレーム ラジオボタン 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ed_tks
●100ポイント

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

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

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

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

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

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


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


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

◎質問者からの返答

ありがとうございま。


2 ● horosuke
●100ポイント

http://hatena.jp/

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


人物の画像: 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>


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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ