• 締切済み

Java Scriptの画像切り替えについて

       □(カーソルが置かれた下記の画像を表示)  ■    ■    ■ 画像1 画像2 画像3 上記のようなJavaScriptは よくあると思いますが… 例えば… 画像1~3の部分にカテゴリのアイコンまたは画像を配置し、 TOPの切り替わる画像の部分を カーソルが置かれたカテゴリの”最新”記事画像を表示 のように表示される画像を可変にすることはできますか? 説明ベタですみませんが… 上記のないようを理解できた方で もしわかる方がいらっしゃいましたら教えてください。

みんなの回答

  • JJDOM
  • ベストアンサー率100% (1/1)
回答No.1

イマイチ理解出来てないかもしれませんが、   □←A ■ ■ ■ 画1 画2 画3 「画1」をクリックしたら「カテゴリ1」から最新の記事画像を 「画2」をクリックしたら「カテゴリ2」から最新の記事画像を 「画3」をクリックしたら「カテゴリ3」から最新の記事画像を 「領域A」に表示させたいということでしょうか? だとしたら 画1~3のクリックイベントで 各DBから最新の記事画像のパスを取得して 領域Aの画像SRCにURLを呼び出すと言う流れでいいかと思います。 <script src="jquery.js"></script> <script> $(function(){ $("li img").click(function(){ var DB = $(this).attr("id") $("#img_a").load("db.php?cate="+DB);//db.phpで最新画像を呼ぶ }); }); </script> <p id="img_a"><img src="a.jpg" /></p> <ul> <li><img src="img1.png" id="category1"></li> <li><img src="img2.png" id="category2"></li> <li><img src="img3.png" id="category3"></li> </ul>

teto_0618
質問者

お礼

>「画1」をクリックしたら「カテゴリ1」から最新の記事画像を >「画2」をクリックしたら「カテゴリ2」から最新の記事画像を >「画3」をクリックしたら「カテゴリ3」から最新の記事画像を >「領域A」に表示させたいということでしょうか? やりたい内容は上記の通りです。 助かりました! ありがとうございますm(_ _)m

関連するQ&A

  • javascriptで画像の切り替え

    javascriptで下記のページの様にソートはしなくて構わないのでアイコンの動き、切り替えるだけをプラグイン等使わずに実装したいです。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ http://ikedaya.gejigeji.jp/anime/sinsaku_end-2011.html 詳しくは <th class="*****">をクリックしたらアイコン画像が切り替わる。 ※現状このclassにbackgroundで画像を表示しています。 1、デフォルトは上下▲▼の画像 2、押したら上▲画像 3、もう一度押したら下▼画像 それ以降は2~3の繰り返し。 ソートについては別の方がやっていただけるので動きだけをお願いしたいです。 できましたら至急教えていただきたいです;;

  • スムーズな画像の切り替え

    http://jsajax.com/About.aspx 上記のページの中段あたりにある、 画像表示の見せ方のプログラムを作成したいのですが、 これはjavascriptとajax両方を使用してるのでしょうか。 また、amazonのページの下にある同じような画像表示の見せ方は、 これとは違う方法で作成しているのでしょうか。 このようなプログラムを作成する際に、どの程度の知識が必要になりますか? よろしくお願いします。

  • ブログの表紙をつくりたい

    自分の質問が消えてしまったようなので再度書き込みます。 自分のブログの最初に開く画像を設定するにはどうすればいいのでしょうか。普通は最新の記事が 真っ先に表示されます。 これを自分のブログの画像を設定して表紙に替えたいと思うのですが。トップというカテゴリーを作成してみましたがこのカテゴリーの内容がトップとして最初にでてきません。このトップの内容の記事を表紙に設定・・・といったほうがわかりやすいかもしれません。 どうかお願いします。

  • 画像にカーソルを合わせると別の場所の画像も変えたい

    ただいまホームページ作成中です。 HP作成ソフトを使わずに手打ち(メモ帳)で作っています。 画像にカーソルを合わせるとその部分を別の画像に切り替える方法 (アイコンボタンの色を変えるような方法)は分かったのですが、 同時に別の場所の画像も切り替えたいのです。 JavaScriptについて色々調べてみたのですが、 初心者なのでなかなかうまくいきません。 よろしくお願いします。

  • cookieによる画像切り替えについて

    Cookieを使って、 「初回訪問時は画像A(リンク付)を表示し、2回目以降は画像B、画像C、画像Dの中からランダムに表示(リンク付)」するという動作を検討しているのですが、具体的な記述がわからず困っています。 上記に近いライブラリなどがあれば助かるのですが、都合の良いものが見つからないので、 ご存知の方ご教示いただけないでしょうか。 (手法はJavascriptでもjQueryでも問題ありません。)

  • ライブドアブログのカスタマイズ【画像が浮くので一直線に並べたい】

    記事本文の下側にカテゴリーやタグ、コメントなどを置くようにレイアウトをしました。 その横に並ぶように「AddClips」「ランキングバナー」「ライブドアクリップ<$ArticleToolBox$>」を配置したのですが「ランキングバナー」だけが上に浮いてしまいます。 ランキングバナーの画像が浮かないようにするにはどこの部分を書き直せば宜しいでしょうか。 カスタマイズは(デザインのカスタマイズ)>(トップページ)の欄に以下のように記入しています。 ------------------------------------------------------ 【 AddClips Code(javascript)】【<A HREF="ランキングURL"><img src="画像URL" border="0"></A>】【<$ArticleToolBox$>】 ------------------------------------------------------

  • オンマウスで、画像切り替え+別箇所の画像も同時に切り替えられのでしょうか?

    お世話になっております。 もしJavascriptのカテゴリーと違うものでしたらすみません。 オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、 オンマウス時にそのような画像切り替えをすると同時に 別部分にある画像エリアの画像、(もしくはHTML)も切り替える事は可能なのでしょうか。 別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。 何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。

  • イラストレーター9.0.2での配置画像(リンク)のアイコン

    こんにちは。イラストレーター9.0.2で画像を配置(リンク)すると リンクウィンドウに画像名、その右側にアイコンが表示されますが、 埋め込みのアイコンが黄色くなったアイコンは何を意味しているのでしょうか? 画像を配置(リンク)すると、同じ画像でも、黄色いアイコンの表示が出たりでなかったりするので、気になっています。 配置はリンクのみで、埋め込みは使いません。 どなたか御存じの方がいらっしゃいましたらよろしくお願いいたします。

  • オンクリックで画像とテキストの指定位置表示について

    フレームを使用してサムネイルをクリックしてメイン部分に拡大画像を表示しています。 また同時に、メインページにおいて、画像表示ごとに「次の画像」「前の画像」「TOPに戻る」リンクを張っています。 この場合、メインに表示させるhtmlファイルを画像枚数分作成する必要があります。 そこでこれをノーフレーム版で、かつ1枚のhtmlシートで作れればいいのですが、javascriptの変数(?)などを使って可能でしょうか。 画像は100枚くらい存在するものとし、ファイルNoにより区分しています。 なお当方javascriptの知識はありません。 これに類するもので lightbox Plus (lightboxの拡張版) http://serennz.sakura.ne.jp/toybox/lightbox/​ があって、画像内にページ送りのアイコンが表示されるようになっていてこれでもいいのですが、このアイコンの表示が画像表示のあと少しタイムラグがあるため、javascript等で作れないものかと考えてます。 よろしくお願いします。

  • アクセス毎に画像を順番に切替表示させるには

    いつもお世話になっております。タイトルの件で質問が御座います。 ページにアクセスするごとに、画像を順番に切替たく調べていましたところ、 以下のような質問・解答を見つけました。 http://oshiete1.goo.ne.jp/qa1683979.html http://oshiete1.goo.ne.jp/qa2988372.html 上記を参考にし、Javascriptは画像を表示させるHTMLには記述せず、HTML+外部jsファイルにて表示させることにしましたが、 Win IE6、IE7、Opera9.5にて画像自体が表示されず困っております。 IEにおいては、画像部分が×印になり、×印のプロパティを見ると『undefined』となっております。 他のブラウザでは問題なく表示され、アクセスごとに画像も切り替わります。 画像切替の為のjsファイルには『top_image.js』と名づけ、以下の記述をしております。 ////////////////////// <!-- var limit = 14;//Cookieの有効期限(14日間) var imgNo = 0; //以下、画像のリスト var imgList = new Array; imgList[0] = 'image/top/img_main_1.jpg'; imgList[1] = 'image/top/img_main_2.jpg'; imgList[2] = 'image/top/img_main_3.jpg'; imgList[3] = 'image/top/img_main_4.jpg'; imgList[4] = 'image/top/img_main_5.jpg'; if(document.cookie.length > 0) imgNo = parseInt(document.cookie.substring(6,99)); document.write('<img src="'+imgList[imgNo]+'" alt="">'); if( ++imgNo >= imgList.length) imgNo = 0; var d=new Date(); d.setTime(d.getTime()+24*limit*60*60*1000); document.cookie='imgNo='+ imgNo +' ; expires='+d.toGMTString(); //--> ////////////////////// また、画像を表示させるHTMLには以下のように記述しました。 ////////////////////// <script src="top_image.js" type="text/javascript"> </script> <noscript><img src="image/top/img_main_1.jpg" width="500" height="500"></noscript> ////////////////////// ブラウザによって結果が違うという事は、 Javascriptに問題があるのかと思うのですが、 原因が分かる方がいらっしゃいましたら何卒ご教授お願い致します。