• ベストアンサー

選択された画像を onclick と $_SESSION を使って識別する方法について

画像が2種類あって、どの画像がクリックされたかを onclick() と $_SESSION[] を使って記録したいと思っているのですが、その方法が分かりません。 以下のスクリプトのようなことをしたいのですが、このスクリプトは動きません。。。($modeには何も値が入りませんでした)。 <a class="1q" id="1a" onclick="<?php $_SESSION['mode']=1 ?>" href="index.php"><img id="image1" alt="Fig1" src="images/fig1.gif"></a> <a class="2q" id="2a" onclick="<?php $_SESSION['mode']=2 ?>" href="index.php"><img id="image1" alt="Fig2" src="images/fig2.gif"></a> MODE=<?=$mode?> よいアイデアを頂けますと大変助かります。 よろしくお願い致します。

  • PHP
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 まず、サーバサイドでの処理(PHP)とクライアントでの処理(JavaScript)をわけて考えてください。 $_SESSIONに値を入れるには、サーバ側で処理を行う必要があります(ブラウザからのリクエストがあった時) ということは、index.phpに特定の値(画像の番号や名前)を投げてあげればいいのです。 (ここのindex.phpは下の画像を表示するタグも出力している) (自分自身にリンクを貼ります) ====================================================================== <?php session_start(); $mode = $_GET['imgid']; $_SESSION['mode'] = $mode; ?> <a href="./index.php?imgid=1"><img src="1.jpg"></a> <a href="./index.php?imgid=2"><img src="2.jpg"></a> <a href="./index.php?imgid=3"><img src="3.jpg"></a> <a href="./index.php?imgid=4"><img src="4.jpg"></a> ====================================================================== (余分なタグは端折ってます) こうすることで$_SESSION['mode']に選択された画像の番号が入ります。 注意点としては、直接、http://*************/index.php?imgid=10と打ち込まれると 10という存在しない画像の番号も入ってしまいますので、 直接の入力を防ぐ(リファラを参照する)や存在する番号かのチェックが必要かもしれません。

dewyamada
質問者

お礼

作成して頂いたソースコードが大変参考になり、無事に目的を達成することができました。ありがとうございました!

その他の回答 (2)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.3

#2です。 2つの画像でしたね。 >注意点としては、直接、http://*************/index.php?imgid=10と打ち込まれると >10という存在しない画像の番号も入ってしまいますので、 >直接の入力を防ぐ(リファラを参照する)や存在する番号かのチェックが必要かもしれません。 単純にimgidの内容が1であるか2であるかチェックすれば良いですね。 訂正します。

dewyamada
質問者

お礼

細かいところまでフォローをありがとうございます。 重ねてお礼申し上げます。

  • hrm_mmm
  • ベストアンサー率63% (292/459)
回答No.1

アイデアと言うより最大の欠点は、サーバーサイド実行(php)と、クライアントブラウザ上のjavascript動作(onclick)をごっちゃにしていることでしょう。 画像にリンクを張ってクリックされたら、画像名をqueryに付けた自分にジャンプして、session登録後再表示。

dewyamada
質問者

お礼

ご回答ありがとうございます。 >画像にリンクを張ってクリックされたら、画像名をqueryに付けた自分にジャンプして、session登録後再表示。 ここのところがよく分からないので、もう少し詳しく教えていただけますと大変助かります。何卒よろしくお願い致します。

関連するQ&A

  • javascriptで画像の移動

    お世話になります。 画像をクリックすると、クリックした画像のaltの内容をinput type="text"に表示する。 左に移動ボタン押下でクリックされた画像を1つ左に移動、 右に移動ボタン押下で1つ右に移動する。 1.移動ボタン押下で移動させるにはどうすればよいでしょうか? ※HTMLはtableタグでなくてもよいと思っております。 2.クリックした画像が分かるようにしたいのですが 何かいい方法などありますでしょうか? <html> <head> <script> var clickId =""; function down(id){ clickId = id; document.getElementById("comment").value = document.getElementById(id).alt ; } function move(d){ } </script> </head> <body> <table> <tr> <td id="p1"><a href="#" onClick="down('1');"><img id="1" alt="alt1" src="1.gif" /></a></td> <td id="p2"><a href="#" onClick="down('2');"><img id="2" alt="alt2" src="2.gif" /></a></td> <td id="p3"><a href="#" onClick="down('3');"><img id="3" alt="alt3" src="3.gif" /></a></td> </tr> <tr> <td align="left"><a href="#" onClick="move('1');"><img alt="左に移動" src="L.gif" /></a></td> <td align="right"><a href="#" onClick="move('0');"><img alt="右に移動" src="R.gif" /></a></td> </tr> </table> <input type="text" id="comment" /> </body> </html>

  • 画像を並べ替える・・・

    質問させていただきます。 下記のようなコードでページを作成しています。 この中でドラックアンドドロップで画像を入れ替える処理を 行っています。 横に入れ替えが出来るようになっているのですが、 右から左に画像を入れ替えようとすると、画像がぶれて、 画像の入れ替えがやりにくい状態になってしまいます。 わかる方いらっしゃいましたらご助言頂けないでしょうか。 http://journal.mycom.co.jp/series/scriptaculous/004/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <title>データ</title> <LINK href="css/detail_style.css" type="text/css" rel=stylesheet> <link rel="stylesheet" type="text/css" href="jslib/demo.css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="jslib/highslide/highslide.css" /> <script type="text/javascript" src="jslib/prototype.js"></script> <script type="text/javascript" src="jslib/scriptaculous.js?load=effects,dragdrop"></script> <script type="text/javascript" src="jslib/demo.js"></script> <script type="text/javascript" src="jslib/highslide/highslide-with-gallery.js"></script> </head> <body> <form name = "imagepic"> <dl id="gloop1"> <dt id="id_2336:8"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2336:8"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt><dt id="id_2349:4"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2349:4"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt><dt id="id_2359,2:"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2359,2:"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt> </dl> </form> </body> css↓↓↓↓ h1 { font-size: 1.5em; } dl { position: absolute; top: 11em; padding: 0; list-style-type: none; width: 100em; margin-left: 0; padding-left: 0.2em; background: #ddd; } dt { float: left; cursor: move; margin: 1.3em; padding: 1.2em; background: #ff9; border: 1px solid gray; } dl.empty { height: 2em; border: 1px solid silver; background: #ddd; } #gloop1 { left: 2em; } #gloop1 { top: 6em; } #gloop1 dl { background: #ff9; }

  • 画像のハイパーリンクでのonClick

    何度もすみません。 <a href="test.html" target="frame2" onclick="func(this)"><img src="on.gif" border=0 name="images0" onclick="fncChangeBar(0)"></a><br> ハイパーリンクにも画像にもクリックイベントを書いた場合、どちらから実行されるのでしょう? 同時ですか? 優先させたい場合はどのように書いたらよいのでしょう?

  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか? ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • wordpressで

    wordpressを使ってブログを作っています。しかしcssを読み込んでくれません。 index.phpの内容は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(': '); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>(RSS 2.0)" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>(Atom)" href="<?php bloginfo('atom_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body> <div id="rap"> <div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_settings('home'); ?>/"><img src="img/title.gif" alt="芦澤治療院はやさしいマッサージで施術いたします。" /></a></h1> </div> <div id="headernavi"> <div id="navi"> <ul> <li><a href="#"><img src="img/link.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/sitemap.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/inquary.gif" alt="" border="0" /></a></li> </ul></div> <div id="size"> <img src="img/sizeword.gif" alt="" /> <a href="#"><img src="img/sizesmall.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizemiddle.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizebig.gif" alt="" border="0" /></a></div> </div> </div> <div id="navcontainer"> <ul> <li class="news"><a href="#">ニュース</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="work"><a href="#">施術の案内</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="stuff"><a href="#">スタッフ</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="qa"><a href="#">よくある質問</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="inq"><a href="#">お問い合わせ</a></li> </ul> </div> <!-- end header --> <div id="content"> <div id="main"> <?php if(have_posts()):while(have_posts()):the_post();?> <div class="post"> <h2><?php the_title();?></h2> <?php the_content();?> <p class="postmetadate"> <?php the_time('Y年m月d日 H:i')?>|<?php comments_popup_link ('コメント(1)','コメント(2)','コメント(%)');?> </p> </div> <?php comments_template();?> <?php endwhile;endif;?> </div> </div> </div> </body> </html> です。 ディレクトリ構造はindex.htmlとstyle.cssは同じフォルダにあります。

    • 締切済み
    • PHP
  • 順番にクラスをつけていく方法

    順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード0にしてactiveクラスがついたときに フェードを100にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>

  • 画像の切り替えの記述形式について

    <a href="#A" onclick="document.A.src='../img/gif/B1.gif'"><img src="../img/gif/A1.gif" alt="" width="133" height="176" name="A" id="A" /></a> 画像としてA1.gifがあるのですが、A1.gifを押すと、リンク先のB1.gifが呼び出されて、変更されるというスクリプトになっています。 上のような記述をしているのですが、この場合、指定している#Aのアンカーリンクを指定しているため、画像を押す事に移動してしまいます。移動をしないようにするにはどうしたらいいですか? <a href="javascript:openURL('URL');"><img></a> このような形式で、アンカーリンクにならずに、上のような操作が可能になるという話を聞きました。 こういう場合、どのように記述したらいいですか?

  • 画像のフェードインについて・・・。

    現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。(あまり関係ないと思う部分は省いてます) 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 画像のフェードインについて・・・。

    以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。(あまり関係ないと思う部分は省いてます) こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 画像をクリックして別の画像を変えたい

    ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像(button.gif)自身が2.pngなどの画像に変わってしまいます。   <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。(確認のため <IMG SRC="1.png"> を<A HREF>~</A>より上に持ってきたら思っていた動きになりました。)  けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。