- ベストアンサー
携帯サイトでの画像切り替え
[1],[2],[3]とそれぞれあるリンクをクリックすると表示されている画像を切り替えるという動作（例：http://www.tagindex.com/javascript/link/change3.html※これはロールオーバーですが）をしたいのですがPCではjavascriptを使って問題なく出来たのですが携帯サイトの場合javascriptが使えないのでどうすればいいのでしょうか？PHPを使えばいいというような事は聞いたのですがやり方がわからないのでご教授お願いします。
- valencia21
- お礼率71% (5/7)
- PHP
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
すみません、先ほどの回答者です。記述ミスしてました。 <?php $image_no = $_GET['image_no']; if($image_no == ""){ $image_no = 1; } switch ($image_no) { case ($image_no == 1): $image_name = "1枚目の画像の名前.jpg"; break; case ($image_no == 2): $image_name = "２枚目の画像の名前.jpg"; break; case ($image_no == 3): $image_name = "３枚目の画像の名前.jpg"; break; } ?> <html> <body> ここにHTMLで内容を記述。 <br> 画像を表示させるところに以下の記述 <img src="<?php echo $image_name;?>"> <br> 画像の切り替えリンク <a href="このファイルの名前.php?image_no=1">[1]</a> <a href="このファイルの名前.php?image_no=2">[2]</a> <a href="このファイルの名前.php?image_no=3">[3]</a> </body> </html> どのみち、Flashが確実なのは間違いないのですが、一応・・・。（汗
その他の回答 (3)
- manimani2
- ベストアンサー率70% (12/17)
前の方がおっしゃっているように、valencia21さんが考えていらっしゃることを実現するのはFlashがいいと思います。 PHPで以下のように記述したとしても、結局、画像以外の部分も読み込み直しになるので・・・。 とりあえず、サンプル書いておきます。 <?php $mode = $_GET['mode']; $image_no = $_GET['image_no']; if($image_no == ""){ $image_no = 1; } switch ($image_no) { case ($image_no == 1): $image_name = "1枚目の画像の名前.jpg"; break; case ($image_no == 2): $image_name = "２枚目の画像の名前.jpg"; break; case ($image_no == 3): $image_name = "３枚目の画像の名前.jpg"; break; } ?> <html> <body> ここにHTMLで内容を記述。 <br> 画像を表示させるところに以下の記述 <img src="<?php echo $image_name;?>"> <br> 画像の切り替えリンク <a href="このファイルの名前.php?mode=select&image_no=1">[1]</a> <a href="このファイルの名前.php?mode=select&image_no=2">[2]</a> <a href="このファイルの名前.php?mode=select&image_no=3">[3]</a> </body> </html> こんな感じです。
- memphis
- ベストアンサー率40% (975/2395)
Flashで作れば似たような感じにできると思います。 ただし、アクセスする形態がFlashに対応している必要があります。
お礼
回答ありがとうございます。 今回は最終的にFlashを使わない方向になったのですが今後はご意見を参考にFlashも考慮していきます。
ストレートに考えるなら、配列に画像のパスを入れてランダムソートでしょうか。 ちなみに、DBが使えるのであれば、SQL文でランダム関数を使って抽出する方法もあります。
お礼
回答ありがとうございます。 無事動作させる事が出来ました。
関連するQ&A
- オンマウスで画像を表示〈フレーム版〉
すぐ下に質問されてる人と似ていますが、フレームバージョンではどうなのか、わからないので質問しました。 http://www.tagindex.com/javascript/link/change3.html フレームで上下に画面を分けて、上のリンク文字にマウスをあわせると、下の画面に画像を表示したいんです。 初心者なのであまりわからないんで。。。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptによる画像切り替えについてわからなくて困っています
javascriptによる画像切り替えについてわからなくて困っています。 初心者ですので説明もわかりにくいかもしれませんが、ぜひご指導をお願いします。 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいのです。 「javascript ロールオーバー 切り替え クリック リンク」といったキーワードで検索したのですが、ロールオーバー切り替えはできるけれどリンク先に移動できなかったり、ボタン画像画像そのものが切り替わるものだったり、なかなか思ったとおりのサンプルを見つけることができません。 カスタマイズするだけの知識もないので、大変困っています。 このようなサンプルスクリプトを紹介しているところがあったら教えていただけないでしょうか？
- ベストアンサー
- JavaScript
- ボタンに画像を使えません
お世話になります。 セレクトボックスでリンクする（ボタン付き） http://www.tagindex.com/javascript/link/select2.html 上記のサイトの「input type="button"」のボタンでリンクすることはできたのですが、 <input type="image" onClick="jump()" src="画像.gif" alt="" width="201" height="46" border="0" onmouseover="this.src='画像_on.gif'" onmouseout="this.src='画像.gif'"> ↑のようにtypeをimageにして画像をボタンに使おうとしますと、 「?select=&x=92&y=33」とURLの末尾に追加されるだけでリンクができません。 上記サイトのjavascriptを「input type="image"」のボタンで使用するには どのようにすればよろしいでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像の場合のみ、下線を消す方法はありますか？
http://www.tagindex.com/stylesheet/link/text_decoration.html この方法で消せることは知ったのですが、文字の場合は下線を表示、 画像にリンクがある場合は、リンクの下線や枠を非表示にしたいです。
- ベストアンサー
- HTML
- 携帯サイトではjavascriptは使用できないのですか？
今回携帯サイトを立ち上げようと作成しました。 そこでページにjavascriptを埋め込んで、history.backで 前のページに戻るように設定しましたが、動作しませんでした。 次に他の携帯サイトを参考にフォームを作成し、プルダウンでページを飛ばせようとしましたがwebで調べているうちに、携帯のサイトでjavascriptは動かせないと書かれていました。 ただ参考に携帯サイトでは、プルダウンでリンク指定をしたページに飛ぶのですが、ソースを見るとphpで動作させています。phpは理解できないので、他の方法で動作させたいのですが、ご存知の方どうかご教示 下さるようお願いいたします。
- 締切済み
- ホームページ作成ソフト
- ファビコンの画像がうまく表示されないくて困っています。
下のサイトを参考にしてトップページにファビコンの画像が出るように したいと思って試しに使用例をコピーペーストしたのですがうまく行かないです。 ファビコンの画像拡張子もicoで間違えてないのですが http://www.tagindex.com/html_tag/page/link_favicon.html どうしたらいいのでしょうか？ 詳しい方教えてください。
- 締切済み
- レンタルサーバ・ASP
- タブメニューの画像切り替えについて
現在以下のサイトのソースでタブのjavascriptで設置しようとしているのですが うまくいかないため、質問させていただきました。 http://www.ezgate-mt.sakura.ne.jp/jquery/71.html ロールオーバーとアクティブの画像を別々にしたいため、 Javascriptのなかの 「// ロールオーバー 」以下の「_o」と書かれている部分を「_act」と 書き換えて「***_act.gif」という画像も用意しました。 ところが、たとえば番目のボタンをクリックすると画像名が 「nav-04_act_o.gif」になってしまい、画像が消えてしまいます。 ロールオーバーとアクティブの画像を別々にしたいとき どのように設定すればいいのかご教授いただけないでしょうか？ ちなみにコンテンツの切り替えは使用せずボタンの箇所のみを 使用する予定です。 どうぞよろしくお願いします。
- 締切済み
- JavaScript
- 画像の切り替えについてです。
中途半端な知識で対応できず、苦しんでおります。 http://www.kanaya440.com/contents/tips/html/007.html 上のURLのサイト中段あたりにある「グローバルメニューに応用する」方法を参考に ８枚の画像をつなげた１枚の画像を使用でロールオーバーをCSSでやって出来たのですが この方法では、画像にマウスを乗せてたところが、画像からマウスが離れると最初の画像表示に戻ってしまい また、クリックした時の画像切り替え方法が記載されてないので、できれば更に、この方法に付け加える形で… 画像をクリックした時の画像切り替えするには、どうすればよいのでしょうか？ イメージとしては、クリックした時も a:hover した時と同じ画像表示のままになるようにしたいのです。 ちなみに、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か教えて下さい。宜しくお願いします。
- ベストアンサー
- JavaScript
- 携帯サイトで画像を保存できないようにする
表題の件で質問させて下さい。 現在携帯サイトを構築しております。(アクセスしてくるのは携帯のみ) そのサイト内の画像を極力保存させたくないのですが、何かよい方法はありますでしょうか。 パソコン向けのサイトでしたらJavaScript、CSS等ありますが携帯向けのサイトでも何か方法はあるのでしょうか。 ご教授頂ければ幸いです。
- ベストアンサー
- その他（プログラミング・開発）
- javascriptで作ったロールオーバーがロールオーバーのままになってしまう
質問お願いします。 javascriptで作った画像二枚で表現するロールオーバーボタンの不具合についてです。 ieでの動作は問題なかったのですがsafari3.1.2とfirefox3.03では、 その作ったロールオーバーボタンをクリックして他のページに行き、 そしてブラウザに予め備わっている機能の戻るボタンで元のページに戻るとクリックしたロールオーバーボタンがマウスが重なっていないのにロールオーバーしたままの状態になってしまいます。 (その状態でもう一度ロールオーバーボタンにマウスを重ねると元に戻ります。) 流れを簡単に書かせていただきます。 <1.ロールオーバーボタンをクリックする> ↓ <2.他のページにリンクする> ↓ <3.リンク先のページでブラウザの戻るボタンをクリックする> ↓ <4.1のページに戻る> ↓ <5.1でクリックしたロールオーバーボタンがカーソルが触れていないのにロールオーバーした状態> ロールオーバーボタンを作る方法は二通り試したのですが、両方とも上に書いた通りの状態です。 <試した方法> 1.DreamweaberMXのビヘイビア機能で作成。 2.http://css-happylife.com/log/javascript/000157.shtmlこちらのページを参考にさせて頂いての作成。 この不具合の事を気にして色々なウェブサイトを見てみたのですが、やはりjavascriptで作っているであろうロールオーバーボタンは同じような状態のウェブサイトが、多数有りました。 この問題の解決策をご存じの方がいらっしゃいましたら、どうかご教授下さい。よろしくおねがいします。
- 締切済み
- その他（インターネット・Webサービス）
お礼
回答ありがとうございます。 上記の内容で無事動作させる事が出来ました。 今後Flashでの動作も視野に入れていきたいと思います。