Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
PHPで商品登録のページを作っているのですが、登録をする際に画像を2つ入れて、確認ページで画像の1つを表示させて画像をクリックさせたときにもう一つの画像に切り替わるというものを作っており、下記がその確認ページのソースなのですが`
'''
<!DOCTYPE html> <html lang="ja"> <meta charset=utf-8> <body> <h3>登録商品</h3> <form method="post" action="touroku3-3-c.php"> <select name="ijyo"><option value="200">200</option><option value="400">400</option><option value="500">500</option><option value="800">800</option><option value="900">900</option></select>円以上 <input type="submit" name="" value="検索"> </form><br> <?php $f=file("touroku2.txt"); $ijyo=$_POST["ijyo"]; foreach($f as $key=>$value){ $a=explode(",",$value); $a[3]=trim($a[3]); if($a[3]>=$ijyo){ print("<div class='comment'>"); print($a[0]."<br>\n"); print("<img src='".$a[1]."' width=200 height=200><br>\n"); print($a[3]."円"); print("</div>"); } } ?> </body> </html> <style> body{ background-color:#00bfff; } div.comment{ background-color:#7fff00; float:left; margin:10px 10px; text-align:center; } ```''' 上記までは書けたのですが、画像の切替をするためにソースをどのように書いたらよいかがPHP初心者 ということもあり、調べたのですがよく分からないのでアドバイスをいただきたく存じます。ちなみにもう1つの画像は$a[2]に入っています。ちなみに下記がtouroku2.txtの中身です。 ''' ```ここに言語を入力 ピザ,pizza.jpg,pizza2.jpg,900 りんご,ringo.png,ringo2.jpg,500 イチゴ,itigo.jpg,itigo2.jpg,600
'''
バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
kei344さんも仰っているようにコードブロックで囲う部分が修正されていません。回答者には結構大事なことだったりするのでご協力お願いします。
また画像自体はphpを利用して取得しているかもしれませんが、「切り替える」部分は見た目部分なのでjavascriptの仕事です。タグを追加しておいてください。
touroku2.txtの中身はどうなっていますか？開示できる範囲で結構ですので、質問に追記してください。
まず質問文のコード部分を正しく表示されるよう修正いただけませんか。回答しようにも見辛すぎて着手する気に慣れません
すいません。修正をいたしました。まだ慣れていないためにうまく表示させることができていませんでした。
t_obaraの回答をご確認ください。というかやりとりを見ていると「サンプルソースをください」という丸投げの質問になっているように思います。回答をヒントに自分でやってみましょう。
「まだ回答を求めています」の割に自発的な追記もないので、なにを求めているのかわかりませんね。すでにある回答では解決しないのでしょうか？
回答3件
0
PHPでのみという絶対条件が入る場合には、ページの切り替えが発生するため、基本的に所望の動作ができないと思います。
そこで前出の回答では、javascriptが提示されております。
これ以上この質問で回答を求めるより、一度この質問を閉じ、javascriptで切り替える方法という質問を出し直してはいかがでしょうか。
投稿2017/07/20 09:31
総合スコア5488
0
php
1 print("<img src='".$a[1]."' width=200 height=200>"); 2 print("<img src='".$a[2]."' style='display:none;' width=200 height=200><br>\n");
こんな風に二つ置いてしまって、一つを非表示にし、クリックしたときに表示・非表示をJavascriptで入れ替えてはどうですか？
投稿2017/07/05 14:06
総合スコア4437
0
ユーザーが自由にかえていいプロパティの「data-*」形式でやるのが妥当でしょう
たとえば元画像のpathをorgsrc、新画像のpathをorgnewにいれておいて
以下のようにjavascriptで入れ替えます
javascript
1NodeList.prototype.addEventListener=function(x,y,z){ 2 Array.prototype.map.call(this,function(i){ 3 i.addEventListener(x,y,z); 4 }); 5} 6window.onload=function(){ 7 document.querySelectorAll('[data-orgsrc][data-newsrc]').addEventListener('click',function(){ 8 var orgsrc=this.getAttribute('data-orgsrc'); 9 var newsrc=this.getAttribute('data-newsrc'); 10 this.setAttribute('src',this.getAttribute('src')==orgsrc?newsrc:orgsrc); 11 }); 12}
HTML
1<img src="hoge.jpg" data-orgsrc="hoge.jpg" data-newsrc="fuga.jpg">
投稿2017/07/06 00:51
総合スコア114777
あなたの回答
tips
プレビュー
