画像のスライドの上に、スライドの動きと合わせて画像と一緒に移動するリンクを並べたいのですが、どうしたらできるでしょうか。
画像を背景として設定すればいいのでしょうか?
ですがスライドでの背景設定が上手くできません・・・。
使わせていただいているスライドのスクリプトはこちらです
http://www.smoothdivscroll.com/
このような滑らかなスライドで、一緒に移動するリンクを並べたいのです。
jQueryがろくに理解できないので、どういじればいいのかわからず困っています。
どなたかご教授お願いいたします。
No.10ベストアンサー
- 回答日時:
>この部分なのですが、画像の横の大きさがバラバラなので
テンプレートではすべての箱の大きさを500x300に統一していますが、箱(画像)の
大きさがバラバラであれば、ここは削除して前回と同じように個々の画像のdivのstyleで
widthとheightを指定してください。
お返事が大変遅れて申し訳ありません。
教えていただいたとおりに試してみたところ、無事にずれなく画像の配置をすることに成功いたしました。
おかげさまで綺麗にスライドの上にリンクを載せるという目的を達成することが出来ました、本当にありがとうございます。
こんなに長いことやり取りをして頂いて感謝してもしきれません。
ずいぶんお待たせしてしまいましたが、ベストアンサーに選ばせて頂きます。
また機会がありましたら、宜しくお願いいたします。
No.9
- 回答日時:
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%でも一枚目の画像がひたすら並んでしまったのでやはり駄目のようです。
しかし最後の画像のずれはしっかり解消されていました。
原因を調べて頂いた上に変更テンプレートまで作成してくださって本当にありがとうございます。
No.8
- 回答日時:
すみません、いろいろ調べていますが最後がずれる原因がわかりません。
とりあえず、暫定的に見た目を直すために次のように変更してください。ずれは解消します。
(1)clear:bothのDIVブロックは削除
(2)最後の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
- 回答日時:
>最後の一枚だけ一行文の隙間が開いて、他とずれてしまいます。
次のように最後に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の場合に起こるようでした。
下の二つのどちらかでも、上手く表示されてくれれば良いのですが・・・。
No.6
- 回答日時:
スライド用の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>
こちらのタグを使うとページの上の部分と画像の間に一行分の空間ができてしまうのはどうしたら直せるでしょうか?
何か文字が入っているように処理されてしまいます。
上記のタグを繰り返し、何枚かの画像を使ってスライドを作ると、最後の画像以外はページ上部にピッタリくっついてくれるのですが、最後の一枚だけ一行文の隙間が開いて、他とずれてしまいます。
もし宜しければばまたご教授お願いいたします。
No.4
- 回答日時:
マウスポインタの変更は、<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は非考慮とさせてください。
2回にわたりご回答ありがとうございます!
教えていただいたタグでさっそくためさせて頂いたのですが
こちらは1つの画像全体をリンクにするということなのでしょうか?
上の質問がわかりにくくなってしまっていて申し訳ないのですが、画像の上に別の画像リンクを載せる等をして下にある画像上の指定した一部分だけをリンクとして反応させるというものを作成したかったので、少し違うようでした。
ですが、マウスポインタの変更方法などとても面白い手法をお聞きすることが出来て大変参考になりました。
また何かありましたら、よろしくお願い致します!ありがとうございました。
No.3
- 回答日時:
SimpleDemoを参考に、こういうことを考えてみました。
onclickで処理をします。マウスポインタも変えたいならば、適宜処理を追加することになります。
<div id="makeMeScrollable">
<img src="images/demo/field.jpg" alt="Demo image" id="field" onclick="location.href='demo.html';"/>
No.2
- 回答日時:
イメージと違ったようですみませんでした♪
もう一度リンク先を見てみたのですが…やはり戻ってきてしまいました(笑)
そこで、またまたご紹介ですが、これなんかイメージに近いのではないでしょうか?
http://black-flag.net/jquery/20110707-3305.html
こちらは私自身が試していないので少し無責任な話になってしまいますが、ページ下部に使用者からの質問と作成者の方のそれに対する答えが載っています。その中にテキストを一緒にスライドさせられるか?みたいなのがありまして、作成者の方のコメントではliタグがスライドする設計なのでliタグの中にCSSで配置すればだいじょぶなんじゃない?というような事が書いてあります。
その質疑が書いてある部分ですが、縦にかなり長いページです…(私には長い…)。
下の行をコピーしてブラウザの「ページ内検索」で探して頂ければと思います。
imemomom | 2012.12.03 20:57
これもご希望と違ったらごめんなさい♪
理想どおりに出来てくれるといいですね♪頑張って下さい。
ご返答ありがとうございます!
教えて下さったサイトをさらっとですが拝見しました、参考になりそうなことが多く書いてありそうですね
後日ゆっくりコメントの部分を読んでいこうとおもいます。
サイトの管理者様も現在でもコメントへの返信を行って下さっているようなので、わからないことがあればそちらでも質問してみようと思います。
なかなか技術のある方に直接質問することができなかったので大変助かります。
素敵なサイトを教えて下さりありがとうございました。
No.1
- 回答日時:
ごめんなさい。
リンクが貼ってあるサイトを見ましたが、英語ばかりですぐ戻って参りました。よって!!
どうすればリンクが貼れるのか?という質問には答えられません!
という事で、ご紹介です。下記は、私も自分のサイトで使用しているjQueryです。リンク付きの画像をなめらかにスライドしてスライドショーみたいな感じに流してくれます。画像にマウスを乗せるとスライドが止まり、クリックすればリンク先に飛びます。解説も日本語でスライド時間などの設定もわかりやすく掲載されていますよ♪
コンテンツをループスライドする jQuery プラグイン「jQuery.simpleLoopSlider.js」
http://unformedbuilding.com/articles/jquery-simp …
ご回答ありがとうございます!教えて下さったサイトの見てまいりました。
質問の参考のリンクが英語のサイトで申し訳ありません。怪しいサイトではないのでご安心を・・・!
参考のリンク先のサイトを下の方まで見るとデモスライドが設置されているのですが、普通の次の画像に切り替わっていくスライドではなく、境目などがなく移動していくタイプなのです。
リンクも、画像そのものにリンクが貼ってあるのではなく、画像の上に別の固体としてリンクのテキスト・画像が載っている形です。
なので教えて下さったスライドは少し違うようでした・・・申し訳ありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Visual Basic(VBA) PowerPoint VBA で画像の鮮明度を変更する方法がわかりません 2 2023/03/24 13:34
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- PowerPoint(パワーポイント) you tubeにパワポで作った動画を投稿する方法 1 2023/04/09 22:56
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- YouTube Youtubeの収益化に関する質問です。 画像のスライドと動画を混ぜて字幕で解説する解説動画は、収益 3 2022/08/20 11:30
- PowerPoint(パワーポイント) パワーポイントのアニメーションについて 4 2023/06/14 16:25
- Visual Basic(VBA) エクセルから、パワーポイントのスライドを複数作成する。 1 2022/07/08 09:40
- その他(IT・Webサービス) パソコンで作ったパワーポイントをipadで 2 2023/04/19 15:24
- PowerPoint(パワーポイント) PowerPoint で動画を再生中に表示非表示 1 2022/12/09 19:19
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
表示倍率を変えるとレイアウト...
-
hpビルダー 複数の表の罫線を...
-
table周辺の隙間をなくしたい。
-
プルダウンで長い名前の選択肢...
-
画面の分割
-
div内に外部のurlを表示させたい
-
li 黒丸含んで移動する方法
-
css初心者 フレックスボックス...
-
背景が下まで表示されないんです。
-
CSS:animation開始位置の設定
-
cssが効かなくて困ってます
-
floatを使わずに、cssレイアウ...
-
HTMLで横幅をCSSで設定できませ...
-
左100px 中100% 右100px
-
画像イメージの上下左右、欲し...
-
form input テキストを上下中央...
-
メイン画像とグローバルメニュ...
-
HTMLでCSSでボーダーが表示され...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS:animation開始位置の設定
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
table周辺の隙間をなくしたい。
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報