• ベストアンサー

リンク元からの値によってマウスオンの画像を選ぶには

リンク元のページから値を(href="xxx.html?id=1でいいでしょうか)リンク先へ渡し、 リンク先では($id = $_GET['id']でいいでしょうか)その値を受け取り、 値によってonMouseOverで出す画像が決まるようにしたいのですが (受け取った値が1だったら画像a、2だったら画像b、という風に)。 初心者であれこれ調べているのですがこれ以上わかりません。 なるべく簡単な方法で、どうぞよろしくお願いします。

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5253/13739)
回答No.2

HTML + JavaScript でつくるなら以下のような感じですかね ========== <!DOCTYPE html> <html lang='ja'> <head> <meta charset='UTF-8'> <title>サンプル</title> <script type="text/javascript"> var GetParam = {}; if(window.location.search.length > 1) { var query = window.location.search.substring(1); var parameters = query.split("&"); for(var i = 0; i < parameters.length; i++) { var element = parameters[i].split("="); var pName = decodeURIComponent(element[0]); var pValue = decodeURIComponent(element[1]); GetParam[pName] = pValue; } } function setMouseOver(elm) { switch (GetParam["id"]) { case "1": elm.src="./red.jpg"; break; case "2": elm.src="./green.jpg"; break; default: elm.src="./blue.jpg"; break; } } </script> </head> <body> <img style="width:100px;height:100px;" src="./black.jpg" onmouseover="setMouseOver(this);" onmouseout="this.src='./black.jpg'"> </body> </html> ==========

Econo30
質問者

お礼

詳細な記述例をあげていただき、大変ありがとうございました。 GetParamというので受け取って、caseで振り分けると条件分けできるのですね。 とても勉強になり、助かりました。

その他の回答 (1)

  • t_ohta
  • ベストアンサー率38% (5253/13739)
回答No.1

質問者さんが利用できる環境はどのようなモノでしょうか。 質問のカテゴリーはHTMLで「onMouseOver」はHTMLの属性です。 一方で「$_GET['id']」はPHPでの記述方法です。 サーバサイドでPHPが利用できて、PHPのプログラムで実現させたいのでしょうか。 それともHTML(+JavaScript)でクライアントサイドだけで実現させたいのでしょうか。

Econo30
質問者

補足

ご確認いただき、ありがとうございます。質問の内容が不十分ですみません。 HTML+JavaScriptで実現する方法でご教示いただけますでしょうか。 PHPという部分すら気づきませんでした。。よろしくお願いいたします。

関連するQ&A

専門家に質問してみよう