セレクトボックスで数字を選び、画像への反映が可能か？

前へ 次へ
このQ&Aのポイント
  • セレクトボックス（プルダウン形式）で１～９の数字を選んでもらい、その選んだ数字に応じて、画像の中にその数字を瞬時に反映したいが、可能か？
  • 具体的には、ホームページに大きな画像があり、その画像の下にプルダウン形式で１～９の数字を選んでもらうように促している。選んだ数字に応じて、画像の中にその数字を挿入したい。
  • また、選んだ数字と画像を合わせて１枚の画像として保存する方法も教えてほしい。
回答を見る
  • ベストアンサー

プログラミングに詳しい方、教えてください。

どうしてもわからないことがありましたので、質問させて頂きます。 まず、質問内容をざっくり言うと以下の通りです。 『セレクトボックス（プルダウン形式）で１～９の数字を選んでもらい、その選んだ数字に応じて、画像の中にその数字を瞬時に反映したいが、可能か？』 …という質問なんですが、具体的に申し上げますと、 １. そのホームページには大きな画像があり（抽象的な言い方で申し訳ありません。クライアントのHPな故、制作途中は見せられないためご容赦ください）その画像の下に、好きな１～９の数字をプルダウン形式でweb訪問者に選んでもらうよう促している。 ２. プルダウンで１～９の数字をweb訪問者に一つ選んでもらう。 ３. web訪問者が数字の５を選べば、５がその大きな画像の中にその場で反映（挿入）される。もちろん他の数字を選べば、都度反映される。（挿入場所も指定したい。数字自体については、画像か文字か未定。） ４. その選んだ数字と大きな画像の二つを合わせて、１枚の画像として保存させる。(これは最悪できなくても構わないです。) 以上です。 まっっったくわからず、お手上げです。私事ですが、納期は明日でクライアントに言われた事なので、こんなことやる意味あんのか？と心の中で思いつつも(笑)、やらなければなりません。 仮に上記のやり方が不可能であっても、限りなく近いやり方があれば教えていただきたいです。無論、上記のやり方でプログラミングできるのが理想ではあります。 どなたかこんなダメ人間の僕に懇切丁寧に教えていただける方がいらっしゃいましたら、ご教示お願い致します…。

  • HTML
  • 回答数2
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.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> ネットの拾い読みで覚えただけの素人なので、解説は無しです。

eliylove
質問者

補足

javascriptでも構いません。というか一番適切な言語がどれなのかわからなかったので…すみません。javaの知識は無いに等しいですが、サンプルを載せていただくだけでも嬉しいです。とりあえずやってみます！ ありがとうございます。

その他の回答 (1)

  • aoyama984
  • ベストアンサー率45% (253/561)
回答No.1

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で指定

eliylove
質問者

補足

色々参考URLを載せていただきありがとうございます！何とかできそうです。javaは本当の基本しかわかってないです。わかってないから、HTMLのカテゴリで質問してしまったんだと思います…。ごめんなさい。 ご丁寧にありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • パワーポイントに挿入した画像の取り出し

    パワーポイントに、jpgの画像を挿入しました。 元の画像を消去してしまった為、 挿入した画像をできるだけ元の解像度に近い形でjpg（または他の画像形式でも）のファイルで 取り出すことはできるでしょうか。 ●パワーポイントのファイルを「名前を付けて保存」→「web」形式 ●画像をコピーして、Photoshopに貼り付け の方法は行いましたが、 解像度が耐えられません。 上記2つの方法以外で、何か方法があるでしょうか。

  • Excelの数値の反映のさせ方

    現状（紙での請求書） ---------------------------------- ｜　5　｜　4　｜　3　｜　2　｜　 ---------------------------------- 上記のように、ますの中に数字が入っています。 Excelで複数枚（表紙一枚、内訳複数枚）のシートの合計を反映する場合、一つのセルに数字を入れるのは理解出来るのですが、上記のように、ますの中（別々のセル）に、合計の数字を一文字づつ割り振る事は出来るでしょうか？ やりたい事は、市販の請求書は、数字を書く所がます目になっているので、見た目、同じような感じで、出来ないかなという事です。 よろしくお願いします。

  • Powerpoint 2010のビデオについて

    スライドにYouTubeの動画を張り付けたいのですが、挿入タブの中のビデオのプルダウンメニューの中に「Web サイト​​からビデオ」がありません。「Web サイト​​からビデオ」を表示させるにはどうすれば宜しいでしょうか？

  • ＰＨＰの初心者です。書き方をご教授お願いします。

    初めまして、PHPを最近始めた初心者なのですが、 2点ほど教えて頂きたいことがございます。 ＊　ウェブページでプルダウンを使い選択させた文字をPHPに組み込むことはできますか？ ＊組み込めた場合、2種類のプルダウンで選択させた文字をPHPで数字に置き換え 　　比較させ、数字の大きいほうを選択させ処理を出すのにはどのような関数を使えばよいの 　　でしょうか？ 　　（例）　　 　　　　　　　【プルダウンメニュー1】　　　　　　　　　　　【プルダウンメニュー2】　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　徒歩・・・・・・　1　　　　　　　　　　　　　　○・・・　1 　　　　　　　　　　自転車・・・・　2　　　　　　　　　　　　　　△・・・　2 　　　　　　　　　　車・・・・・・・・　3　　　　　　　　　　　　　　□・・・　3　　　　　　　　　　　　　　　 　　　　　　　　　　電車・・・・・・　4　　　　　　　　　　　　　　×・・・　4 　　　　　　　　　　飛行機・・・・　５　　　　　　　　　　　　　　☆・・・　5　　 　　　上記の2種類のプルダウンメニューを選択させ、例えば車（3）と○（1）を比較させ、3＞1に 　　　なり、3を選択させ処理を行う。という場合についてのPHPの書き方をご教授下さい。 　　　よろしくお願いします。

  • htmlやCGIでのデータの送信について

    今ホームページを作っています。 登録のフォームがあって、その中にプルダウン形式で選んでもらうものがあります。 その選択されたデータをリストとして表示させるのと、それの画像を表示させたいのですが上手くいきません。 実際とは違いますが例として、 プルダウン形式で「りんご、みかん、いちご」のうち「りんご」を選択してもらったとして、そのデータをリストとして表示するページで「りんご」とそのまま表示させるのと、「りんごの画像」を表示させたいのです。 色々と試してみて「りんご」とそのまま表示させるのはできたのですが、画像のほうがプルダウン形式で選択されたデータを引っ張ってきて「http://アップロード先のurl/データ名.jpg」にしてるのですが、データ名が「りんご」なので日本語になってしまい、ファイル名はもちろん英語なので表示させることができません。 すごく初歩的な質問で恐縮なのですが、どなたか教えて頂けないでしょうか・・・。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Word文書にweb画像を挿入したいのですがエラーが出ます

    Web上で公開されている画像をWord（バージョン・2002 SP-1、OSはWindows XPです)に挿入しようとしているのですがエラーメッセージが出て挿入できません。どなたか解決方法を教えていただけますでしょうか。行った操作および状況は以下の通りです。 1. Web上の画像をデスクトップに新しい画像ファイルとして保存 2. Wordの「挿入」→「図」→「ファイル」からデスクトップに保存したファイルを選択 3. 変換元のファイル形式を問う「ファイルの変換」というBOXが開き、10数種のファイル形式が選択肢として表示される。 4. 変換元ファイルはjpeg形式なので「JPEG形式」を選択して「OK」ボタンを押すと「ファイルのインポート中にエラーが発生しました」のメッセージが表示される。 Web画像をpaintにとりこんでその画像を挿入してみようと試みましたが、paintへのとりこみ時にも「このファイルは読み取れません。このビットマットファイルは無効であるか、現在サポートされていない形式です」とのメッセージが出てとりこみに失敗しました。 ちなみに「マイピクチャ」に保存されている画像は問題なく挿入できます。

  • phpの表の作り方について

    PHPでの表の作り方について質問です。 ＰＨＰで時間割を作成できるようにしたいのですが、どうすればいいかわかりません… (1)画像の様に表を作成 (2)ボタンを押して、別のウィンドウが表示し教科を選択するか、プルダウンで教科を選択できるようにする (3)選択された教科が表に反映するようにする。 上記のようにしたいのですが、何か参考になるサイトか本があれば教えてください。 できればソースを少し載せてくれるとありがたいです。

    • ベストアンサー
    • PHP
  • ワードに挿入したgifファイルの画像をPDF化すると画像がたまにぼやける

    Word2002のファイルにgif形式の画像ファイルを挿入して、 マニュアルを作成しています。 作成したマニュアルをAdobe Acrobat 6.0でPDFファイルに 変換し、画像を見ると、比較的見やすい画像と何かぼやけ た感じの見づらい画像に分かれます。 Wordに挿入しているgif形式の画像は、もともとは Print Screenで撮影したものをPhotoshop　Elements　 3.0で加工し、Web形式で保存したファイルです。 画像を全般を見やすいようにする方法をご存知の方 ご回答お待ちしております。 どうぞよろしくお願いします。

  • 自動反映した結果を別シートへ自動反映する方法。

    ご質問失礼致します。 以前こちらにてエクセルの自動反映の方法について質問させていただいたところ、 無事に解決することが出来ました。 (こちらになります、http://okwave.jp/qa/q9009135.html ありがとうございました！) 今回質問させていただきたいのは、 更に自動反映したシートの結果を、別のシートに区分けして反映させることが可能かどうか、 ということになります。 そういったことは可能なのでしょうか？ 自分で試行錯誤してみたのですが上手くいかず、 ご教授していただけますと大変嬉しく思います。 添付画像が今作っている資料と似たものになるのですが、 リストというシートより○○というシートへプルダウンメニューより入力を自動入力させてあります。 ○○というシートの中の区分と言う項目で区切り、（【あいう】と【えお】） それぞれ別のシートに反映させたいと思っております。

  • 【エクセル】シート1の複数セルをシート2に反映

    エクセルについて、教えて頂きたいです。 まず添付のエクセル画像を見て頂けますでしょうか。 ＜質問内容＞ まず添付画像は左側の「シート1」と、右側の「シート2」の2つから成っています。 シート1のA2セルは、ご覧の通り入力規則による「リスト」になっておりまして、 「A」「B」「C」の3つからプルダウン選択できるようになっています。 この状態でやりたいことがあるのですが、 例えばここで、 シート1のプルダウンで「B」を選択したとき、 シート2の「B」の行「B3、C3、D3セル」を自動的に参照して、 シート1の「B2、C2、D2セル」に「200　600　1,100」の数字が反映される方法を、 教えて頂けませんでしょうか。 ぜひとも宜しくお願いします（m_ _m） 　※ちなみに、シート名を「A」「B」「C」と記載してINDIRECT関数で反映させる方法は 　　存じておりますが、シートを1つに収めたいと思っております。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する