複数のスタンプ画像を選択する方法と必要なコード

このQ&Aのポイント
  • PHPを使用して、複数のスタンプ画像を選択する方法とその必要なコードを教えてください。
  • 質問ページでフォームを作成し、Ajaxのようなデータ送信ができない前提で、スタンプ画像から選択肢を選ばせる方法を教えてください。
  • 参考サイトを確認し、Wordpressを使用している場合に必要なコードや方法についてアドバイスをいただきたいです。
回答を見る
  • ベストアンサー

複数のスタンプ画像の選択肢をphpに送りたい

質問ページを作成したいのですが、formを作る際にgoo質問のような1目でわかるリアクションスタンプを実装したいです。 質問文は<form></form>を使い実装可能だと考えたのですが、スタンプ画像を設置した状態でその中から選択肢を選ばせる方法が分かりません。Wordpressを使っているためAjaxのようなデータの送信ができない前提で作りたい場合、どのようなコードが必要になるのでしょうか?アドバイスお願い致します。 ※参考イメージ https://imgur.com/CjdK1Hf.gif ※参考サイト https://okwave.jp/qa/q8315548.html https://okwave.jp/qa/q8315548.html

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

  • ベストアンサー
回答No.1

javascript 必要? 試してないけど・・・ <!DOCTYPE html> <title></title> <meta charset="utf-8"> <style> #fuga { list-style: none;} #fuga input[type="checkbox"] {display: none;} #fuga li input[type="checkbox"]+label>img { border: 3px transparent solid; display: inline-block; width: 60px; height: 60px; } #fuga li input[type="checkbox"]:checked+label>img { border-color: red; } </style> <body> <form id="hoge"> <ol id="fuga"> <li> <input type="checkbox" name="a0" value="1" id="a01" checked> <label for="a01"><img src="01.png" alt="01"></label> </li> <li> <input type="checkbox" name="a0" value="2" id="a02"> <label for="a02"><img src="02.png" alt="02"></label> </li> <li> <input type="checkbox" name="a0" value="3" id="a03"> <label for="a03"><img src="03.png" alt="03"></label> </li> </ol> <button onclick="console.log(document.querySelectorAll('input[name=a0]:checked'))">Test</button> </form>

関連するQ&A

  • リストから選択したタイミングで画像を変えたい

    ドロップダウンメニューで選択したタイミングで画像が変えたいのです。 質問内容としては過去に解決した質問に近いのでリンクを貼ります。 ◆JavaScript Form OPTION value◆ http://okwave.jp/qa/q3795624.html こちらの質問の際にも記載されていた ■ドロップダウンメニューで画像が変わる(JavaScript) http://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html を私も実現したいのですが、<form>の中の画像の記載のやり方が<img>タグで あれば私も試して実現できたのですが、実際にやりたいのは<input type="image"> の方なんです。 りストから選択したら自動的に画像が変わりその画像がボタンとしてformで送信されるようにしたいのです。 <img>ならname="xxxxx"で if(fname==1){document.xxxxx.src=img0.src;} としたらできますが、<input type="image" name="xxxxx">としたらうまく画像が変わらないのです。 <button><img src="xxx.gif" name="aaa"></button>みたいにボタンタグを使えば可能なんですが 本来のボタンの上に画像が貼りつけた状態で不格好で、ボタンのサイズを小さくしても画像が途中で途切れてしまいます。 何か方法がないものでしょうか?色々と調べて試したりしても上手くいかなかったのでお知恵を借りたいのですが。

  • 「その他」を投票してくれたミナさんへ

    その他とはいったい何だったんですか? https://okwave.jp/qa/q10126437.html https://okwave.jp/qa/q10133507.html https://okwave.jp/qa/q10138442.html https://okwave.jp/qa/q10141307.html https://okwave.jp/qa/q10143479.html https://okwave.jp/qa/q10145059.html https://okwave.jp/qa/q10147123.html https://okwave.jp/qa/q10151700.html よろしくお願いします、ペコリンm(*μ_μ)m

  • 化物語、現在放送していますか。

    https://okwave.jp/qa/q9919857.html https://okwave.jp/qa/q9918769.html の質問から、放送しているらしいのですが、見つけれませんでした。

  • 【지】(形容詞に連結語尾の【지】を接続させたい場)

    皆様、新年あけましておめでとうございます。 新年もまたまたどうぞよろしくお願いします・ さて、すっかり理解したつもりだった【지】について 再度質問です: 할머니 모시느라고 고생 마났지? (訳: おばあちゃんの世話をするのに苦労が多かっただろう?) ⇒ この例文の【지】(終結語尾)を 【지 몰라】に差し替えたい場合: a) 할머니 모시느라고 고생 마났<은>지 몰라 b) 할머니 모시느라고 고생 마났<는>지 몰라 のいずれが正しいですか? ご参考まで、以前の質問です: https://okwave.jp/qa/q9813373.html https://okwave.jp/qa/q9819293.html

  • 「その他」を投票してくれたミナさんへ PART3

    その他とはいったい何だったんですか?   ① 山上徹也 https://okwave.jp/qa/q10155212.html ② 今現在 https://okwave.jp/qa/q10166610.html ③ 台風が近づいていますが… https://okwave.jp/qa/q10166826.html ④ 『オトコ』要りますか? https://okwave.jp/qa/q10168630.html ⑤ 処理水放出始まりました https://okwave.jp/qa/q10170659.html よろしくお願いします、ペコリンm(*μ_μ)m

  • 携帯電話のwebページでphpによるパスワード認証を下記ページを参考に

    携帯電話のwebページでphpによるパスワード認証を下記ページを参考にして行っています。 先日も質問させていただいたんですが。。。 参考URL http://www.kimd.jp/program/php/lesson04/sample04.html 前回質問 http://okwave.jp/qa/q6049891.html 複数のパスワードを使うのに、 if (($form_pass == $pass1) || ($form_passs == $pass2)) { とすることを教えていただいたのですが、 こんどは、パスワードを $pass1 = あいうえお; $pass2 = 下記絎け子; などのように日本語にしたいのですが、そのまましたらパスが通らなくなってしまいました。。。 上記プログラムを使用した場合の、パスワードに日本語も使用できるようにするにはどうしたらよいでしょうか??? 配布PHPを使うのがやっとの初心者ですが、よろしくお願い致します。

    • ベストアンサー
    • PHP
  • AviUtl フェードイン・アウト

    https://okwave.jp/qa/q5814517.html こちらの過去質を参考に試してみたのですが、いくらスライダーを弄っても、反映されません。 どうすればいいのでしょうか?

  • ブースター電源と分配3

    一回目の質問 https://okwave.jp/qa/q9506960.html 二回目の質問 https://okwave.jp/qa/q9507098.html お二人の回答で整理ができてきました。 これで問題なしと思いますが、ご意見をお聞かせください。 よろしくお願いします。

  • PHP 登録フォームの確認画面で画像を表示したい

    こんにちは。いつもお世話になっております。 PHPを勉強し始めたばかりのものです。 登録フォームから送った画像を、確認ページでプレビュー表示させたいです。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12141865207 の質問に辿り着きましたが、実装できませんでした。 3点質問があります。 1、sessionを使わず、$_FILESで実装することが可能なのでしょうか? 2、$_FILESから画像を表示させようとして失敗しています。一時保存場所に画像があると思うのですが、 $photo = $_FILES['UseImg']['tmp_name'] <img src ="<?php echo $photo; ?>"> これでは画像表示ができませんでした。$_FILESに関して根本的な考え違いをしているのだと思うのですが、これはどうしてなのでしょうか? 3、img要素にPHPを挿入することは可能なのでしょうか? 可能だとしたら、何故、以下の方法で動かないのでしょうか。 file.php <form enctype="multipart/form-data" action = "file2.php" method = "post" > <input type="file" name="UseImg"> <input type="submit" name="FILE送信" value="FILE送信"> </form> file2.php <?php session_start(); $_SESSION['UseImg']['type'] = exif_imagetype($_FILES['UseImg']['tmp_name']); $_SESSION['UseImg']['data'] = file_get_contents($_FILES['UseImg']['tmp_name']); echo '<img src="UseImg.php" />'; UseImg.php <?php session_start(); if (!isset($_SESSION['UseImg'])) { die('abort'); } switch ($_SESSION['UseImg']['type']) { case IMAGETYPE_JPEG: header('content-type: image/jpeg'); break case IMAGETYPE_PNG: header('content-type: image/png'); break case IMAGETYPE_GIF: header('content-type: image/gif'); break } echo $_SESSION['UseImg']['data'] 持っているPHPの本では確認画面を通さずに画像をアップロードしており、プレビューに関しては見当たりません。 いつも質問ばかりで申し訳ありませんが、この度も、宜しくお願いします。

    • ベストアンサー
    • PHP
  • プリンタドライバを抜き出す (Windows98)

    Windows98で稼働していたプリンタドライバ(パラレルポート)を を抜き出して、違うPCのWindows98にコピーして使用する事は可能でしょうか? もし可能であれば、プリンタドライバの場所が どこか教えてください。よろしくお願いします。 今回の質問と直接関連しませんが、 下記関連質問をしています。 https://okwave.jp/qa/q9378639.html https://okwave.jp/qa/q9377537.html https://okwave.jp/qa/q9376754.html

専門家に質問してみよう