ここから本文です

ネコサークルのトップページに、スライドする画像が使いたいです。

tug********さん

2012/4/2717:59:24

ネコサークルのトップページに、スライドする画像が使いたいです。

ネコさんサークルのサイトのリニューアルを考えていて、トップページに、メインのネコさんを何人かスライドショーとして前面に出していきたいと思っています。

よく使う洋服屋さんのサイトを見て、こんな感じになったらいいなと思うのですが、検索などで調べても難しくて分からず、どなたか分かる方に教えて頂きたいです。

理想のスライド画像のサイトさん
http://www.rakuten.ne.jp/gold/bestmart/

こんな感じで、画像のスライドと一緒に、サムネイル画像やテキストからもリンクが出来るようにしたいです。

簡単に言うと、
☆自動的にスライドする画像
☆画像にマウスをのせるとちょっと画像がうすくなって、はなすとまたスライドが始まる
☆サムネイル画像にマウスを乗っけると大きい画像もそれになって、はなすとまた元通りスライドが始まる
☆テキストも、サムネイルも、大きい画像もリンク先がそれぞれ同じ

大きさは、横幅が630で縦が300で考えています。
お分かりになる方がいらっしゃいましたら、どうぞよろしくお願いいたしますm(__)m

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
460
回答数:
1
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

hat********さん

2012/4/2722:48:15

回答しますが、これはご紹介のサイトをIEのツール->開発者ツールで解析した結果です。同じようなものを、一から作るのは非常にしんどいと思います。そのサイトを全量保存して必要な部分だけ画像を差し替えるか、開発者ツールを使って必要な部分だけ、こぴぺ&差し替えしたほうがいいと思います。

・そのサイトはどうやらjqueryを使っているようですね。似たものを作ろうと思ったら、次のscript のインクルードが必要と思われます。(サイトのものをそのまま使うのはだめでしょうが)

<LINK rel=stylesheet type=text/css href="http://www.rakuten.ne.jp/gold/bestmart/sui9/ui.tabs.css" media="print, projection, screen">
<LINK rel=stylesheet type=text/css href="http://www.rakuten.ne.jp/gold/bestmart/common.css">
<SCRIPT type=text/javascript src="http://www.google-analytics.com/ga.js" async="true"></SCRIPT>
<SCRIPT type=text/javascript src="http://www.rakuten.ne.jp/gold/bestmart/sui9/gotop.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://www.rakuten.ne.jp/gold/bestmart/sui9/jquery-1.2.6.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://www.rakuten.ne.jp/gold/bestmart/sui9/ui.core.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://www.rakuten.ne.jp/gold/bestmart/sui9/ui.tabs.js"></SCRIPT>

>☆自動的にスライドする画像
画像を<UL><LI>画像1<LI>画像2<LI>画像3....</UL>と列挙しておいて、javascript でsettimeout()して、0.5秒ごとに画像1~IMGのvisiblityをonにする。

>☆画像にマウスをのせるとちょっと画像がうすくなって、はなすとまたスライドが始まる

これは上記のjquery系のjs&cssをインクルードすると勝手にそうなりました。たぶん、画像のcssをそうゆう風に定義してくれているのでしょう。

>☆サムネイル画像にマウスを乗っけると大きい画像もそれになって、はなすとまた元通りスライドが始まる

どこを指しているのか分からなかったですが、ouMouseOver()イベントと、onMouseOut()イベントを拾って、画像(img src="xxx")を差し替えてしまえば、所望の動作になるようです。


>☆☆テキストも、サムネイルも、大きい画像もリンク先がそれぞれ同じ

これは、上記のようにイベントで差し替えているのがIMGタグだけなので、リンク先は変わらないので何もしなくてOKです。

この回答は投票によってベストアンサーに選ばれました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる