- ベストアンサー
セレクトボックスで数字を選び、画像への反映が可能か？
- セレクトボックス（プルダウン形式）で１～９の数字を選んでもらい、その選んだ数字に応じて、画像の中にその数字を瞬時に反映したいが、可能か？
- 具体的には、ホームページに大きな画像があり、その画像の下にプルダウン形式で１～９の数字を選んでもらうように促している。選んだ数字に応じて、画像の中にその数字を挿入したい。
- また、選んだ数字と画像を合わせて１枚の画像として保存する方法も教えてほしい。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
懇切丁寧に教えられるほど知識がありませんので、ごく簡単な原理のみのサンプル。 …って、その前にjavascriptでもいいんですよね？ 1～3までです。（かなり適当） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #image_box { position:relative; } #image_box img { width:800px; height:600px; } #number { position:absolute; font-size:200px; color:#fff; display:none; } ul.select, ul.slect li { list-style-type:none; margin:0; padding:0; } ul.select li { float:left; width:2em; text-align:center; cursor:pointer; } //--> </style> <script type="text/javascript"> <!-- function hoge(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "LI") return; var text = t.textContent || t.innerText; var val = +text * 35; if(typeof val != "number") val = 10; t = document.getElementById("number"); t.innerHTML = text; t.style.top = val + "px"; t.style.left = (val*2) + "px"; t.style.display = "block"; } //--> </script> </head> <body> <div id="image_box"> <img src="img/photo01.jpg" alt="image"> <div id="number">1</div> </div> <ul class="select" onclick="hoge(event)"> <li>1</li><li>2</li><li>3</li> <li>4</li><li>5</li><li>6</li> <li>7</li><li>8</li><li>9</li> </ul> </body> </html> ネットの拾い読みで覚えただけの素人なので、解説は無しです。
その他の回答 (1)
- aoyama984
- ベストアンサー率45% (253/561)
Javascriptでもいいのでしょうか http://homepage3.nifty.com/aya_js/js2/js216.htm http://javascriptist.net/ref/element.style.left.html http://javascriptist.net/ref/element.style.top.html http://www.kanaya440.com/contents/tips/javascript/012.html http://www.tagindex.com/stylesheet/properties/position.html 画像を下に 数字を上に 重ねる程度ならJavascriptでできます 合成して画像を作るなら PHPなどのサーバプログラムが必要です JSの基本は分かるでしょうか SELECTのChangeで表示/非表示をDisplayで指定 位置はTop/Leftで指定
補足
色々参考URLを載せていただきありがとうございます！何とかできそうです。javaは本当の基本しかわかってないです。わかってないから、HTMLのカテゴリで質問してしまったんだと思います…。ごめんなさい。 ご丁寧にありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
補足
javascriptでも構いません。というか一番適切な言語がどれなのかわからなかったので…すみません。javaの知識は無いに等しいですが、サンプルを載せていただくだけでも嬉しいです。とりあえずやってみます！ ありがとうございます。