画像と一緒にスライドするリンクを貼りたい

画像のスライドの上に、スライドの動きと合わせて画像と一緒に移動するリンクを並べたいのですが、どうしたらできるでしょうか。
画像を背景として設定すればいいのでしょうか？
ですがスライドでの背景設定が上手くできません・・・。

使わせていただいているスライドのスクリプトはこちらです
http://www.smoothdivscroll.com/

このような滑らかなスライドで、一緒に移動するリンクを並べたいのです。
jQueryがろくに理解できないので、どういじればいいのかわからず困っています。

どなたかご教授お願いいたします。

No.10 ベストアンサー 回答者： warpspace 回答日時： 2013/06/17 15:46

＞この部分なのですが、画像の横の大きさがバラバラなので

テンプレートではすべての箱の大きさを500x300に統一していますが、箱（画像）の
大きさがバラバラであれば、ここは削除して前回と同じように個々の画像のdivのstyleで
widthとheightを指定してください。

この回答へのお礼

お返事が大変遅れて申し訳ありません。
教えていただいたとおりに試してみたところ、無事にずれなく画像の配置をすることに成功いたしました。
おかげさまで綺麗にスライドの上にリンクを載せるという目的を達成することが出来ました、本当にありがとうございます。
こんなに長いことやり取りをして頂いて感謝してもしきれません。
ずいぶんお待たせしてしまいましたが、ベストアンサーに選ばせて頂きます。
また機会がありましたら、宜しくお願いいたします。

お礼日時：2013/06/29 17:29

No.9 回答者： warpspace 回答日時： 2013/06/17 10:24

CSSの定義を変更して作成してみました。

問題なく表示されましたので、これをテンプレートとして
変更してみてください。

参考URL：http://warpspace999.web.fc2.com/smoothdiv/test_d …

この回答へのお礼

ご対応ありがとうございます！
さっそく試させていただきました。

#makeMeScrollable div.scrollableArea div
{
position: relative;
float: left;
margin: 0;
padding: 0;
width:500px;　　　　←
height:300px;　　　 　この部分なのですが、画像の横の大きさがバラバラなので、大きさが統一されてしまい違うずれが起きてしまいました。
統一しなければやはり最初のように縦のずれができてしまうのでしょうか。
100%でも一枚目の画像がひたすら並んでしまったのでやはり駄目のようです。

しかし最後の画像のずれはしっかり解消されていました。
原因を調べて頂いた上に変更テンプレートまで作成してくださって本当にありがとうございます。

お礼日時：2013/06/17 14:48

No.8 回答者： warpspace 回答日時： 2013/06/16 17:21

すみません、いろいろ調べていますが最後がずれる原因がわかりません。

とりあえず、暫定的に見た目を直すために次のように変更してください。ずれは解消します。

（１）clear:bothのDIVブロックは削除
（２）最後のDIVブロックに、margin指定を追加（とりあえず上方向にずらして調整）
　　　<div style="float:left;width:1100px;height:700px;padding:0px 0px;　……
　　　　　　　　　　　　　　↓
　　　<div style="float:left;width:1100px;height:700px;padding:0px 0px;margin-top:-22px;　……

引き続き調べてみます。

この回答へのお礼

お早い対応ありがとうございます！
marginの追加で見た目のずれはなくなりました。これだけでも十分助かります。

原因も調べて下さっていて本当にありがとうございます。
対した知識も技術もありませんが、私も引き続き調べてみます。

何かわかりましたら、またよろしくお願い致します。

お礼日時：2013/06/16 17:46

No.7 回答者： warpspace 回答日時： 2013/06/16 10:15

＞最後の一枚だけ一行文の隙間が開いて、他とずれてしまいます。

次のように最後に1行追加してみてください。

　　<div id="makeMeScrollable">
　　　　<div style="float:left;width:500px;height:325px;padding:20px
20px;background:url(http://www.smoothdivscroll.com/images/demo/field …
　　　　　　<a href="aaa.htm" target="_blank">aaaaaaaaaa</a><br>
　　　　　　<a href="aaa.htm" target="_blank">bbbbbbbbbb</a>
　　　　</div>
　　　　<div style="clear:both;"></div>　←これ！！！
　　</div>

それでもダメであれば全体のソースを見ないと何とも言えませんので、差支えなければ
そのページのURLを教えてください。

この回答へのお礼

お早い対応ありがとうございます！
教えて頂いたタグをためしてみたのですが、確かに画像は全て上にそろってくれたのですが、最後の画像の右横に何もない空間が丁度画像一個分ほど空いてしまいました。

現在はまだその方法がわからず作れていないのですが、このスライドは、スクリプト元のDEMOスライドのようにループになるようにしたいと考えているので隙間はどうにか埋めたいところです。

こちらがclear:bothをためさせて頂いたページです：http://nanndabaneko.web.fc2.com/index.html
こちらがclear:bothを入れる前のページです：http://nanndabaneko.web.fc2.com/index2.html

先ほど気づいたのですが、どうやらE6だと最後の画像にでる上の隙間の不具合はでないようです。
Google ChromeやFirefoxの場合に起こるようでした。
下の二つのどちらかでも、上手く表示されてくれれば良いのですが・・・。

お礼日時：2013/06/16 15:24

No.6 回答者： warpspace 回答日時： 2013/06/13 10:06

スライド用のimgタグの代わりに、以下の例ようにdivタグで背景を指定した後、

リンクを並べればできます。

　　<div id="makeMeScrollable">
　　　　<img src="images/demo/field.jpg" alt="Field" id="field" />
　　</div>
　　　↓
　　<div id="makeMeScrollable">
　　　　<div style="float:left;width:500px;height:325px;padding:20px
20px;background:url(http://www.smoothdivscroll.com/images/demo/field …
　　　　　　<a href="aaa.htm" target="_blank">aaaaaaaaaa</a><br>
　　　　　　<a href="aaa.htm" target="_blank">bbbbbbbbbb</a>
　　　　</div>
　　</div>

この回答へのお礼

ご回答ありがとうございます！
大変わかりやすく、あんなに悩んでいたものが簡単に作ることが出来ました。本当にありがとうございます。
ですが、一つ問題がありまして、
　　
<div id="makeMeScrollable">
　　　　<div style="float:left;width:500px;height:325px;padding:20px
20px;background:url(http://www.smoothdivscroll.com/images/demo/field …
　　　　</div>
　　</div>

こちらのタグを使うとページの上の部分と画像の間に一行分の空間ができてしまうのはどうしたら直せるでしょうか？
何か文字が入っているように処理されてしまいます。

上記のタグを繰り返し、何枚かの画像を使ってスライドを作ると、最後の画像以外はページ上部にピッタリくっついてくれるのですが、最後の一枚だけ一行文の隙間が開いて、他とずれてしまいます。

もし宜しければばまたご教授お願いいたします。

お礼日時：2013/06/16 00:05

No.5 回答者： taloo 回答日時： 2013/06/13 00:26

<img>を並べているようですから、イメージマップにしておけばいいのではないでしょうか。

この回答へのお礼

ご回答ありがとうございます！
イメージマップというものを教えていただいて初めて知ったので、調べて参りました。
こんな便利なものがあるのかととても驚きましたが、リンクの画像自体が複雑な形状だったり、CSSアニメーションなどを指定したかったので今回はイメージマップは使用しないことにいたしました。
しかし、とても面白い手法を知ることが出来たので本当に感謝しております！ありがとうございました。

お礼日時：2013/06/16 00:15

No.4 回答者： hirotn 回答日時： 2013/06/12 23:32

マウスポインタの変更は、<style>～</style>の中に、

img.demi:hover{cursor:pointer;}
として、
<img src="images/demo/gnome.jpg" alt="Demo image" class="demi" id="gnome" />
class属性を追加しています。class属性としてdemiを追加したimgタグのみ、マウスオーバーしたら指アイコンにマウスを変更するということを表します。

詳細は以下です。
http://www.dspt.net/stylesheet_css/009/003.html

imgへのhoverはブラウザ依存がありますが、（対象として気にすべき）IE6は非考慮とさせてください。

この回答へのお礼

２回にわたりご回答ありがとうございます！
教えていただいたタグでさっそくためさせて頂いたのですが
こちらは１つの画像全体をリンクにするということなのでしょうか？

上の質問がわかりにくくなってしまっていて申し訳ないのですが、画像の上に別の画像リンクを載せる等をして下にある画像上の指定した一部分だけをリンクとして反応させるというものを作成したかったので、少し違うようでした。

ですが、マウスポインタの変更方法などとても面白い手法をお聞きすることが出来て大変参考になりました。
また何かありましたら、よろしくお願い致します！ありがとうございました。

お礼日時：2013/06/16 00:28

No.3 回答者： hirotn 回答日時： 2013/06/12 23:22

SimpleDemoを参考に、こういうことを考えてみました。

onclickで処理をします。
マウスポインタも変えたいならば、適宜処理を追加することになります。

<div id="makeMeScrollable">
<img src="images/demo/field.jpg" alt="Demo image" id="field" onclick="location.href='demo.html';"/>

No.2 回答者： tanuhei 回答日時： 2013/06/12 21:43

イメージと違ったようですみませんでした♪

もう一度リンク先を見てみたのですが…やはり戻ってきてしまいました（笑）

そこで、またまたご紹介ですが、これなんかイメージに近いのではないでしょうか？

http://black-flag.net/jquery/20110707-3305.html

こちらは私自身が試していないので少し無責任な話になってしまいますが、ページ下部に使用者からの質問と作成者の方のそれに対する答えが載っています。その中にテキストを一緒にスライドさせられるか？みたいなのがありまして、作成者の方のコメントではliタグがスライドする設計なのでliタグの中にCSSで配置すればだいじょぶなんじゃない？というような事が書いてあります。

その質疑が書いてある部分ですが、縦にかなり長いページです…（私には長い…）。
下の行をコピーしてブラウザの「ページ内検索」で探して頂ければと思います。

imemomom | 2012.12.03 20:57

これもご希望と違ったらごめんなさい♪
理想どおりに出来てくれるといいですね♪頑張って下さい。

この回答へのお礼

ご返答ありがとうございます！
教えて下さったサイトをさらっとですが拝見しました、参考になりそうなことが多く書いてありそうですね
後日ゆっくりコメントの部分を読んでいこうとおもいます。
サイトの管理者様も現在でもコメントへの返信を行って下さっているようなので、わからないことがあればそちらでも質問してみようと思います。
なかなか技術のある方に直接質問することができなかったので大変助かります。
素敵なサイトを教えて下さりありがとうございました。

お礼日時：2013/06/12 21:58

No.1 回答者： tanuhei 回答日時： 2013/06/12 20:13

ごめんなさい。

リンクが貼ってあるサイトを見ましたが、英語ばかりですぐ戻って参りました。

よって！！
どうすればリンクが貼れるのか？という質問には答えられません！

という事で、ご紹介です。下記は、私も自分のサイトで使用しているjQueryです。リンク付きの画像をなめらかにスライドしてスライドショーみたいな感じに流してくれます。画像にマウスを乗せるとスライドが止まり、クリックすればリンク先に飛びます。解説も日本語でスライド時間などの設定もわかりやすく掲載されていますよ♪

コンテンツをループスライドする jQuery プラグイン「jQuery.simpleLoopSlider.js」
http://unformedbuilding.com/articles/jquery-simp …

この回答へのお礼

ご回答ありがとうございます！教えて下さったサイトの見てまいりました。

質問の参考のリンクが英語のサイトで申し訳ありません。怪しいサイトではないのでご安心を・・・！
参考のリンク先のサイトを下の方まで見るとデモスライドが設置されているのですが、普通の次の画像に切り替わっていくスライドではなく、境目などがなく移動していくタイプなのです。

リンクも、画像そのものにリンクが貼ってあるのではなく、画像の上に別の固体としてリンクのテキスト・画像が載っている形です。
なので教えて下さったスライドは少し違うようでした・・・申し訳ありません。

お礼日時：2013/06/12 20:39