• ベストアンサー
  • 暇なときにでも

jqueryのimgpreviewというプラグイン

いつもお世話になってます。 マウスオーバー時に画像を表示できるようにしようと思っています。 (イメージはこんな感じです→http://www.css-lecture.com/template/2009/0407/) これを実装するには「imgPreview.js」というものをダウンロードしなければいけないようなのですが、ダウンロードページに行ってダウンロードファイルをクリックしても「古いものだからこちらへ」みたいなメッセージあり、そこからリンク先へ行ってもimgPreview.jsらしきものがどこにもありません。 「ここにあるよ!」とお教えいただければ即解決なのですが、もしimgPreview.jsが存在しないなら別の方法をご教授願いたいです。ちなみに、初心者ですので専門的なことはわかりません・・・。 やりたいことは、テキストにマウスオーバーで画像を表示させることです。 どなたかお詳しい方、お知恵をお貸しください。よろしくお願い致します。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数1358
  • ありがとう数1

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

  • ベストアンサー
  • 回答No.1
  • fujillin
  • ベストアンサー率61% (1594/2576)

探してはいないので、どこで配布されているのかはわかりませんが、 少なくとも、ご提示のサイトにありますよ。  http://www.css-lecture.com/template/2009/0407/js/imgpreview.js (ページのソースを見れば、わかると思います)

共感・感謝の気持ちを伝えよう!

質問者からのお礼

fujillinさん、ありがとうございます。 これほど早く解決するとは思いませんでした。 いったい今までどこを探していたのやら…お恥ずかしい限りです。 本当にありがとうございました。

関連するQ&A

  • jqueryプラグインを探しています。

    ttp://akaitaro.com/ 上記のサイトのように、画像の部分にマウスオーバーすると画像の上にテキストが表示できるようなプラグインを探しています。 探してみたのですがなかなか見当たらないのですが、どなたかご存知の方がいれば教えていただけないでしょうか。

  • リンク画像をホバーアニメーションで暗くする方法

    html、css、js等でリンクの設定された画像を、マウスオーバーでゆっくりと暗くなりテキストが表示される方法はありませんでしょうか。 ・マウスオーバーでゆっくり画像が暗くなり、テキストが表示される ・画像を押すとリンク先へ移動する ・マウスを画像から離すと元に戻る もし上記のものが難しければ、ゆっくりと別の画像に入れ替わる方法はありませんでしょうか。 どなたかご教授お願い致します。

    • ベストアンサー
    • HTML
  • CSSの画像のマウスオーバーの質問です

    こんにちは [画像A]にリンクをはって、マウスオーバーの時に、[画像B]に切り替わるようにしたいのですが、できません。 ドリームウィーバーのビヘイビアパネル→スワップイメージを使うとできました。 しかし、CSSを使って、マウスオーバー時に画像を切り替えたいのです。 テキストを入れて、テキストインデント、-9999でテキストを飛ばして背景に「画像A」を持ってきて、a:hoverで「画像B」をいれて、マウスオーバーを切り替える。これもできました。 しかし、 <body> <a href="#"><img src="images/gazou.jpg" width="100" height="100" /></a> </body>      ↑ このような画像のリンクにCSSを使ってマウスオーバーの画像切り替えをしたいのです。 どなたか、ご存知の方教えてください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • jQuery:マウスオーバーで画像が切り替わる

    下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ================================== 1)メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 (スライドショーはなし) 2)メイン画像にはテキスト(説明文)も入れられる 3)メイン画像の下には、サムネイル画像も表示できる ================================== 参考になるサイト等、ご存知でしたら教えていただけば幸いです。

    • 締切済み
    • CSS
  • CSS マウスオーバーでテキストの上に画像を表示させるには?

    CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる(テキストが見えない状態にする)方法というのはありますか? background-image を使うとテキストが見えてしまいます・・ マウスオーバーで 画像1→画像2 と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像 と表示させる方法は見つかりませんでした。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • アンカーにマウスオーバーして吹き出しを表示させたい

    http://english.chakin.com/ のように、あるリンクにマウスオーバーすると、 それの吹き出し(注釈?)が、ちょっと右下に表示されるようにするには、 どうやってJS/CSSをくめばいいのでしょうか? なお、それについて書いてあるページをご存じでしたら、 それもお教え頂ければ幸いです。 以上、よろしくお願い申し上げます。

  • リンク画像のマウスオーバー時の下線を消したい。(a:hover 関連。

    テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。 どうやったら、切り分けられますでしょうか。 現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。 どなたかご助言よろしくお願いします。

    • ベストアンサー
    • HTML
  • マウスオーバーでフェードインする画像

    背景画像の上にabsolute等で自由に配置でき、通常時は透明で非表示。マウスオーバーすることでフェードインして表示されるという画像を実装したいと考えています。 jsやqueryを使って、IE6に対応した作り方を探しています。 シンプルなものでどのような方法がありますでしょうか?

    • ベストアンサー
    • HTML
  • wordpress内でjquery

    wordpress初心者の者です。wordpress内でjqueryを使いたいのですが、その際、jsファイルやcssファイルのリンクの書き方がわかりません。ご存知の方、教えていただければ大変助かります。  ・1行目の「○○○○」の部分はjsファイルのどの単語を入れればいいのでしょうか? ※jsファイルの内容は下記の通りです。  ・また1行目、2行目の「template_url」の部分はそのままでいいのでしょうか?もしくは固定ページのテンプレートファイルを指定するのですか?  (template-fullwidth.phpのようなファイル)  ・2行目の「●●●●」の部分はスタイルシートの#以下の単語を記載するのでしょうか? ※スタイルシートの内容は下記の通りです。 <?php wp_enqueue_script('○○○○', get_bloginfo('template_url') . '/js/jquery.map.js', array('jquery')); ?> <?php wp_enqueue_style('●●●●', get_bloginfo('template_url') . '/css/map.css'); ?> <?php wp_head(); ?> 【以下jsファイルのソースコード(下の部分は省略)】 google.load("maps", "3.x", {"other_params":"sensor=false"}); function initialize() { var myLatLng = new google.maps.LatLng(35.44730, 139.63450); //マップの中心座標 var myOptions = { zoom: 17, //ズームレベル center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style'] } }; map = new google.maps.Map(document.getElementById("map"), myOptions); new google.maps.Marker({ position: new google.maps.LatLng(35.44696, 139.63438), //アイコンの中心座標 map: map, icon: "icon.png" //アイコン画像 }); 以下省略 【cssの内容】 @charset "utf-8"; html,body{ width: 100%; height: 100%; } #map{ width: 100%; height: 100%; }

    • ベストアンサー
    • CSS
  • jqueryでスライダーを設置した時に

    jqueryでスライダーを設置した時に設置したページのテキストが画像がスライドするタイミングで点滅してしまうようです。 現象が起こっているのはMacのsafariとchromeです WindowsのIEやモダンブラウザ、MacのFirefoxではオッケーのようです。 ちなみにコンテンツスライダーは、glide.jsやbxslider.jsです。両方とも同じ現象が起きます。 chrome はwebkitではなくなりましたし、、、 該当ページでは、スティッキーヘッダ、トップへ戻るボタン、ロールオーバーや複数のタブパネルなど、jQueryの塊のようなページになっておりまして、、、 ただ、それらをすべて無効にして、スライダだけを実装状態にしても同じようです。 スライダーそれぞれのCSSをみてみましたが、同ページにあるCSSの他のセレクトと同名のセレクタはないようです、、、 どなたか似たような現象を解決された方がいらっしゃいましたらご教示願えますでしょうか?