フルスライド画像上に文字を入れる方法

2023/09/06 13:02

outbraveの回答

ベストアンサー

outbrave
ベストアンサー率60% (231/380)

2017/04/09 20:03 回答No.1

.fullSlideShow h1 { これは、.fullSlideShowの中のh1という意味です。 HTMLソースを見ると、h1は.fullSlideShowの中に入っていませんね。

この回答がついた質問に戻る

関連するQ&A

jCarouselLiteループ時の属性値取得
jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分５つの１ループ目はそれぞれ取得できるのですが、２ループ目以降の<a>のhref属性が取得できません。現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){ 　　alert($(this).attr("href"))；//←２周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。
- ベストアンサー
- JavaScript
レイアウトが崩れてしまう原因を教えて下さい。
添付データのようなデザインをtableを使わずに作りたいのですが、テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまいます。テキストが増えても減ってもレイアウトが崩れない方法はありますか？ <style type="text/css"> .contents{ width: 650px; margin-right: auto; margin-left: auto; } .contents ul{ list-style: none; } .contents ul li.photo{ float: left; border: 1px solid #ccc; padding: 5px; } .contents ul li.text, .contents ul li.title{ margin-left: 200px; } .contents ul li.title{ margin-top: 20px; margin-bottom: 10px; color: #111; } .contents ul li.text{ font-size: 14px; } .contents ul li.photo a img{ border-style: none; outline: none; } .contents ul li.title a:hover{ color: #ccc; } </style> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div>
- ベストアンサー
- HTML
順番にクラスをつけていく方法
順番にクラスを付与していく方法を考えているのですが、思いつかないのでご教授ください。下記のようなソースでギャラリーをjqueryで作成しました。「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。画像にたいしてフェードをかけようと思い、画像を初期状態でフェード０にしてactiveクラスがついたときにフェードを１００にしようと思いました。対象の画像をクリックすることでクラスを追加したり削除したりする方法はわかったのですが、「次へ」「戻る」ボタンを押すことで画像を切り替えているため、どのようにしたら順番に画像にクラスをつけることができるのかがわかりません。簡単な方法をご存知の方おられましたらよろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>
- ベストアンサー
- JavaScript
ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
【jQuery】スライダーについて
初めまして。下記サンプルを元にカスタマイズをしてます。参照URL http://bxslider.com/examples/ticker 写真をランダムで左に流したいのですが、 $(document).ready(function(){ $('.bxslider').bxSlider({ 'auto': true, 'minSlides': 6, 'maxSlides': 6, 'slideWidth': 160, 'slideMargin': 0, 'ticker': true, 'speed': 15000, 'randomize': true, }); }); 『'randomize': true,』を入れてもランダムになりません。ダウンロードしたjquery.bxslider.jsの方の記述も同じように書き換えてます。 html側もサンプルのをそのまま貰ってるので <div class="slider"> <ul class="bxslider"> <li><a href="/"><img src="/img/photo01.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo02.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo03.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo04.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo05.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo06.jpg" alt="/"></a></li> </ul> </div> でならんでます。リロードするたびに photo01.jpg←photo03.jpg←photo06.jpg← や、 photo02.jpg←photo05.jpg←photo02.jpg← とか順不同で出来たら最高なんですが、そこまで私の技術は出来ないので、可能であればスタートする写真をランダムで出来たらと思ってます。ご教授お願いします。
- 締切済み
- JavaScript
同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを同じHTML内に入れたいのですが両方ともうまくいきません。いろいろ自分なりに調べたのですが、わからないです。うまくいく方法をどうか教えてもらえないでしょうか？宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div>  <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div>  </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
ジャバスクリプトでクリックして画像を切り替えていま
画像は一つのスライドセットに5枚ほど用意してあり、今回、あらたにもう一セット同じページに追加したところ、相互のく動作がうまくいきません。コードをジャバスクリプトの部分だけコピーしてみます。どこかに誤りがあったら是非ご教授ください。 <div id="nav2"> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> <li><a href="#image3">3</a></li> <li><a href="#image4">4</a></li> <li><a href="#image5">5</a></li> <li><a href="#image6">6</a></li> </ul> </div> <div id="nav3"> <ul class="imagelist"> <li><a class="current" href="#image7">1</a></li> <li><a href="#image8">2</a></li> <li><a href="#image9">3</a></li> <li><a href="#image10">4</a></li> <li><a href="#image11">5</a></li> </ul> </div> ：：： <div id="slideshow"> <img id="image1" src="/livingimg/002.jpg"alt="Image 1" /> <img id="image2" src="/livingimg/031.jpg" alt="Image 2" /> <img id="image3" src="/livingimg/6039.jpg" alt="Image 3" /> <img id="image4" src="/livingimg/6336.jpg" alt="Image 4" /> <img id="image5" src="/livingimg/5563.jpg" alt="Image 5" /> <img id="image6" src="/livingimg/5860.jpg" alt="Image 6" /> </div> <div id="slideshow"> <img id="image7" src="/interiorimg/035akari.jpg"alt="Image 7" /> <img id="image8" src="/interiorimg/034.jpg" alt="Image 8" /> <img id="image9" src="/interiorimg/5923akari.jpg" alt="Image 9" /> <img id="image10" src="/interiorimg/akari190.jpg" alt="Image 10" /> <img id="image11" src="/interiorimg/5866akari.jpg" alt="Image 11" /> </div> こんな具合です。またhead部分に <style type="text/css">  </style> と書いてあります。これで回答いただくことに必要な情報は十分でしょうかもちろん一つのセットの場合は正常に動作しています。宜しくお願いします。補足ちなみに url は http://brownpaper.biz/interior.htm です。
- 締切済み
- JavaScript
画像が表示されない。
質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。
- ベストアンサー
- CSS
CSS画像・文字混在縦メニュー
画像と文字使った縦メニューを作成しています。レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。どうぞお知恵をお貸しください。よろしくお願いいたします。【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>
- ベストアンサー
- HTML
jqueryでの画像表示について
どなたか教えて頂ければ幸いです。画像のプリロードをするためjqueryを書いているのですが、うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。すみませんが教えて頂ければ幸いです。宜しくお願い致します。
- ベストアンサー
- JavaScript

フルスライド画像上に文字を入れる方法

outbraveの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

フルスライド画像上に文字を入れる方法

outbraveの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

カテゴリ
一覧

専門家に質問してみよう
専門家登録