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

質問

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

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

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

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

回答No.10

warpspace · ベストアンサー

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

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

お礼

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

回答No.9

warpspace

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

参考URL：

http://warpspace999.web.fc2.com/smoothdiv/test_div.html

お礼

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

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

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

回答No.8

warpspace

すみません、いろいろ調べていますが最後がずれる原因がわかりません。
とりあえず、暫定的に見た目を直すために次のように変更してください。ずれは解消します。

（１）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の追加で見た目のずれはなくなりました。これだけでも十分助かります。

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

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

回答No.7

warpspace

＞最後の一枚だけ一行文の隙間が開いて、他とずれてしまいます。
次のように最後に1行追加してみてください。

　　<div id="makeMeScrollable">
　　　　<div style="float:left;width:500px;height:325px;padding:20px
20px;background:url(http://www.smoothdivscroll.com/images/demo/field.jpg)">
　　　　　　<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の場合に起こるようでした。
下の二つのどちらかでも、上手く表示されてくれれば良いのですが・・・。

回答No.6

warpspace

スライド用の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.jpg)">
　　　　　　<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.jpg)">
　　　　</div>
　　</div>

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

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

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

回答No.5

神崎 渉瑠（@taloo）

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

お礼

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

回答No.4

hirotn

マウスポインタの変更は、<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は非考慮とさせてください。

お礼

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

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

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

回答No.3

hirotn

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

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

回答No.2

noname#217950

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

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

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

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

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

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

imemomom | 2012.12.03 20:57

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

お礼

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

回答No.1

noname#217950

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

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

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

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

お礼

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

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

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