• ベストアンサー

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

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

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

  • ベストアンサー
  • mtaka2
  • ベストアンサー率73% (867/1179)
回答No.1

> http://jsajax.com/About.aspx​ > 上記のページの中段あたりにある、 > 画像表示の見せ方のプログラム jQuery のプラグイン jCarousel で表示してますね。 JavaScriptレベルであり、AJAX は使ってません。 http://blog.jokerstyle.org/archives/411 > このようなプログラムを作成する際に、どの程度の知識が必要になりますか? JavaScriptライブラリ「jQuery」は、機能が充実していますので、 この程度なら、HTMLとCSSについての知識は必要ですが、「プログラムを作成」する知識はほとんど不要です。 質問者さんが挙げられたページの場合、画像のスライド表示に関するJavaScriptの記述は、HTMLソースで42行目~47行目付近の > <script type="text/javascript"> > $(function() { > $('#listimg').jcarousel(); > //$('#listimg a').fancybox(); > }); > </script> の部分、実質3行だけです。

hukazuo
質問者

お礼

ありがとうございました。 意外と簡単な方法だったのですね。。 無事導入できました。

関連するQ&A

  • 画像の切り替えについてです。

    中途半端な知識で対応できず、苦しんでおります。 http://www.kanaya440.com/contents/tips/html/007.html 上のURLのサイト中段あたりにある「グローバルメニューに応用する」方法を参考に 8枚の画像をつなげた1枚の画像を使用でロールオーバーをCSSでやって出来たのですが この方法では、画像にマウスを乗せてたところが、画像からマウスが離れると最初の画像表示に戻ってしまい また、クリックした時の画像切り替え方法が記載されてないので、できれば更に、この方法に付け加える形で… 画像をクリックした時の画像切り替えするには、どうすればよいのでしょうか? イメージとしては、クリックした時も a:hover した時と同じ画像表示のままになるようにしたいのです。 ちなみに、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か教えて下さい。宜しくお願いします。

  • Ajaxについて教えてください。(定義と実装方法について)

    Ajaxについて教えてください。 (定義について) http://www.atmarkit.co.jp/fwcr/rensai/imasara03/imasara03_1.html (サンプル集) http://jsajax.com/default.aspx 【定義について】 >>Ajaxは略語で、正式名称は「Asynchronous JavaScript + XML」となります。Asynchronousは「非同期」という意味 とされいるようなのです。他にも調べてみると、 「Javascriptを使い,Webページとは非同期(Asynchronous)にXML形式(もしくはテキスト形式)のデータ通信を行う手法」といった風にかかれています。 この「Webページとは非同期」という部分がわからないのですが、どういったものを指しているのでしょうか? 【実践方法について】  Ajaxの実装はどういった手順で行うものなのでしょうか?  参考でみたホームページで、ライトボックスをみて感動したので、早速使ってみたいと思いました。いざAjaxサンプルページに載っている、ライトボックスのコードをコピー&ペーストで、自分のPC上で試してみたのですが、動かず悩んでいます。(汗)  調べていくうちに、ライブラリが必要なようなのですが、どのように実装することで、ライトボックスは使用できるようになるのでしょうか?    AjaxサンプルのURLにjQueryを使い倒せ!ということから、jQueryという、Ajax用のライブラリがあるのでしょうか?

    • ベストアンサー
    • AJAX
  • jquery

    質問させていただきます。 javascriptはまったくの素人の為正直さっぱりわからないのですが http://jsajax.com/jQueryPopupWindowArticle1110.aspx こちらのpopupwindowを設置したく試行錯誤して なんとか表示されるようにはなったのですが、 一度クリックして開き、閉じると2度目が開かない状況です 。何か思い当たることがある方いらっしゃいましたら よろしくお願い致します。

  • 画像バイナリデータの処理について

    お世話になります。 ブラウザから、画像データをアップロードし、サーバのデータベース(MySQL)にバイナリデータとして記録した画像データを、AJAXで取得し、ブラウザでJavascriptを使用して表示させたいと考えています。 現在、バイナリデータをAJAXで取得するところまで作成したのですが、” $.' ",#...”といったデータとなっており、文字列として表示されてしまっています。 これをJavascriptで画像データとして認識させる方法はございますでしょうか? よろしくお願いいたします。

  • 画像の入手先

    パワーポイントなどで資料を作成する際、ネットで画像を探すのですが 中々気に入ったものが見つかりません。 たとえば以下のURLのPCの綺麗な画像(ノートPCやサーバなど)はどこかのサイトなどからダウンロードできるのでしょうか? それとも独自に作成しているのでしょうか? http://www.softether.com/jp/vpn2/overview/about.aspx もしダウンロードできるサイトがあるのなら知りたいです。 よろしくお願いいたします。

  • JavaScriptでの画像切替について。

    以下のようなことをしたいのですが、方法が分からず困っています。 http://www.astellas.com/jp/ メニューの上にマウスがくると、下の画像が切り替わる。 http://www.mos.co.jp/index.html メニューの上にマウスがくると、プルダウンのメニューが表示される。 上の2つを「名前をつけてページを保存」で保存して、ソースとファイルを見てみたところ、JavaScriptで実現しているみたいなのですが、jsファイルのソースを見てもさっぱり分かりませんでした。 JavaScriptはDreamweaverの[挿入]-[イメージオブジェクト]で使える程度です。 上の2つを実現するのは、今は諦めたほうが良いでしょうか? JavaScript以外でも実現可能だったら教えていただけないでしょうか? (※FLASHは除く。例えばCSSなど) よろしくお願いします。

  • 携帯サイトでの画像切り替え

    [1],[2],[3]とそれぞれあるリンクをクリックすると表示されている画像を切り替えるという動作(例:http://www.tagindex.com/javascript/link/change3.html※これはロールオーバーですが)をしたいのですがPCではjavascriptを使って問題なく出来たのですが携帯サイトの場合javascriptが使えないのでどうすればいいのでしょうか?PHPを使えばいいというような事は聞いたのですがやり方がわからないのでご教授お願いします。

    • ベストアンサー
    • PHP
  • Ajaxで画像表示

    こんにちわ。 現在PHPとAjaxを使用し、サーバーのサイトパス上にある画像を表示するプログラムを作成しておりますが、どうも上手くいきません。 画像パスがサイトパス上と言う事もあり、画像をバイナリ読込み&出力する方法を試しているのですが、思い通りの結果が得られません。 そもそもAjaxでサイトパス上にある画像を表示する事ができるのかも不明なのですが。。。 どなたかご存知の方がおりましたら、教えて下さい。よろしくお願い致します。

    • ベストアンサー
    • PHP
  • 画像のロールオーバーとアクティブページでの画像ロールオーバーについて

    javascriptでの画像のロールオーバーについて質問させてください。 現在、あるサイトを作成中なのですが、グローバルナビゲーションメニューにjavascriptで画像のロールオーバーを設定したいと思っています。 このスクリプト自体はwebで簡単に見つかったのですが、これにプラスアルファで現在見ているページ(アクティブページ)のメニュー画像をロールオーバー(ロールオーバーをオンマウス状態に)させる方法が見つかりません。 あらゆるサイトでよく見るので簡単に見つかると思ったのですが・・・ どなたかこの両方の機能を実装できるjavascriptを御存知の方がいらっしゃいましたらご紹介ください。

  • 画像をクリックしてディレクトリを変更したい

    Javascriptの知識はまったくないのですが、日本語のページと英語のページを双方行き来出来るようにしようと、色々調べて以下を使うと出来るという所まで辿り着きました。 <span id="link">(※)</span> <script language="JavaScript"><!-- url=window.location+""; url=url.replace("http://aaaaaaa.com/","http://aaaaaaa.com/en/"); document.getElementById("link").innerHTML="<a href=\""+url+"\">英語ページへ</a>"; --> </script> このままだと希望通りの動きをするのですが、これの「英語ページへ」の部分を画像にすると、画像は表示されず、Javascriptをオフの時に表示させるメッセージ部分が表示されてしまいます。 テキスト部分を以下に置き換えましたがダメでした。 <img src="http://aaaaaaa.com/images/language/jp.png"/> どうすれば画像を表示し、クリックしてディレクトリを移動する事が出来るのでしょうか? よろしくお願いいたします。

専門家に質問してみよう