- 締切済み
【ＣＳＳ】ちょっと欲張りすぎ？ こんなメニューが作りたい。
■リンク１ ■リンク２ ■リンク３ （※１）■はイメージで、リンクを持っている。 （※２）各行の空白をクリックでもリンクｎをクリックと同じ動作。各リンクとイメージは別のリンク。 上記のようなメニュー形式を実現したいです。 （※１）までなら以下の様な記述で実現できました。 <a href="hoge.html"><img src="hoge.jpg" alt=""/></a><a href="piyo.html">リンク１</a> しかし、(※２)各行の空白をクリックでもリンクｎをクリックと同じ動作の実現の仕方がわかりません。 名案ありましたら、教えてください。
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- HTML
- 回答数8
- ありがとう数2
- みんなの回答 （8）
- 専門家の回答
みんなの回答
- ran_2323
- ベストアンサー率43% (32/73)
こういうこと…ではないのでしょうか？？ ＜スタイル部分＞------------------------------------------- #menu ul, #menu li{ margin:0; padding:0; list-style:none; } #menu li{ width:160px; border-bottom:1px #fff solid; background:#fcc; } #menu li a{ display:block; width:130px; height:30px; padding-left:30px; padding-top:10px; } #menu li.menu01 a{ background:url(img1.gif) no-repeat 5px 10px; } #menu li.menu02 a{ background:url(img2.gif) no-repeat 5px 10px; } #menu li.menu03 a{ background:url(img3.gif) no-repeat 5px 10px; } ＜HTML部分＞------------------------------------------- <ul id="menu"> <li class="menu01"><a href="#">リンク1</a></li> <li class="menu02"><a href="#">リンク2</a></li> <li class="menu03"><a href="#">リンク3</a></li> </ul> ※IE6では多少崩れるので、paddingにhack処理が必要ですが…。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫topとleftでの指定なしで改行させないってのは、やはり無理でしょうか？ floatをつかう。 ブラウザによる違いがあり調整がめんどくさい 画像とリンクを入れ替えて、一方にposition:absoluteをつかう。 画像とリンクを入れ替えるのは、スタイルシートが無いときを考えると？ しかし、意味的におかしくなければ その他、色々な方法があると思います。でもここからは、工夫してみてください。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
完成ソースです。 唯一ポイントといえば、a要素自体をdisplay:block;でブロックにしてしまうことだけです。 配置はどうにでもなるでしょう。 ☆デザインのために、余分なスペースを入れたり、idやclass、あるいはタグを使わずにスタイルシートだけで、デザインするのが重要です。でなけりゃHTMLとCSSを分離する意味が無い。 そのためには、プロパティだけでなく、セレクタも上手に使いましょう。 以下全ソース・・・ご自由にご利用ください。 ここからは、ご自分で・・ ご覧の通り、HTMLのほうは極めてシンプルです。 携帯で見ると、デフォルトで表示されます。 【注】ソース中の全角スペースはタブに変更すること! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>懲りすぎリンク</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- @media screen{ html,body,ol,li{ margin: 0px; padding:0px; } h1{ margin-top: 70px; text-align: center;} a img{ border: outset white 2px; background-color: white;} body>ol{ display: block; width: 160px; margin-left: 10px;} body>ol>li{ display: block; width: 100%; position: relative; height: 36px; margin-bottom:6px;} body>ol>li>a{ display: block; width: 34px; height: 34px; margin: 0px;} body>ol>li>a + a{ display: block;position: relative;top: -33px; left: 38px; width: 120px; height: 24px; padding-left: 2px; padding-top: 6px; padding-bottom: 6px; margin:0px; background-color: pink;} body>ol>li+li>a + a{background-color: rgb(200,255,200);} body>ol>li+li+li>a + a{background-color: rgb(200,200,255);} } --> </style> </head> <body> <h1>懲りすぎリンク</h1> <ol> <li> <a href="./page1.html" title="1ページ"> <img src="http://service.okwave.jp/css/images_goo/question3.gif" width="34" height="34" alt="リンク"> </a> <a href="./page10.html">リンク１</a> </li> <li><a href="./page2.html" title="1ページ"> <img src="http://service.okwave.jp/css/images_goo/question1.gif" width="34" height="34" alt="link"></a> <a href="./page20.html">リンク２</a> </li> <li> <a href="./page3.html" title="1ページ"> <img src="http://service.okwave.jp/css/images_goo/question2.gif" width="34" height="34" alt="りんく"> </a> <a href="./page30.html">リンク３</a> </li> </ol> </body> </html>
補足
ORUKA1951さん ほんとうにご回答ありがとうございます。 body>ol>li>a + a{ display: block; position: relative; top: -33px; left: 38px; topとleftでイメージの右隣にリンクがくるように調整してますが、 この2行がないと改行してしまいますよね？ topとleftでの指定なしで改行させないってのは、やはり無理でしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫欲しかったのは左メニューのイメージでして、ご回答を元に一行づつ改行するようなメニューに改造試みているのですが、 HTML変更なし。スタイルのみ書き換え。 ボーダーは消してあります。(製作中はつけておくと分かりやすい) 【分かりやすいように全角スペースでインデントさせています。全角スペースはタブに変更すること】 <style> <!-- html,body,ol,li{ margin: 0px; padding:0px; } h1{ margin-top: 70px; text-align: center; } a img{ border: outset white 2px; background-color: white; } body>ol{ display: block; margin-left: 10px; width: 160px; } body>ol>li{ display: block; width: 100%; position: relative; height: 36px; margin-bottom:6px; } body>ol>li>a{ display: block; width: 34px; height: 34px; margin: 0px; } body>ol>li>a + a{ display: block; position: relative; top: -33px; left: 38px; width: 120px; height: 24px; padding-left: 2px; padding-top: 6px; padding-bottom: 6px; margin:0px; background-color: pink; } body>ol>li+li>a + a{ background-color: rgb(200,255,200); } body>ol>li+li+li>a + a{ background-color: rgb(200,200,255); } --> </style>
空白の箇所（何も表示されてない場所）をもアンカー扱いにしたいと云う解釈で宜しいですか？ ならばa要素の全ての色指定を「背景色」にした「外部CSS」を用いて、空白分のスペースに文字を入れてspan等のインライン要素でclassやidを用いて囲めば良いのでは？
- ran_2323
- ベストアンサー率43% (32/73)
説明がイマイチ理解しきれなかったのですが…考え方を変えれば解決するのではないでしょうか…？？ >（※１）■はイメージで、リンクを持っている。 という点を、■を背景画像に敷いて、リンクｎを含むXpx×Ypxの範囲をリンク範囲として設定する…ということでいいのではと思います。 ＜スタイル＞-------------------------------------------- #link_menu, #link_menu li{ list-style:none; margin:0; padding:0; } #link_menu a{ //各リンク範囲設定 display:block; width:150px; height:50px; } .menu1 a{ background:url(画像のパス) no-repeat 0 0; /*■画像の指定*/ padding-left:20px; /*■画像分のスペースをとる*/ } ・ ・ ・ （リンクごとに異なる画像を使用する場合は複数記述） ＜ＨＴＭＬ＞-------------------------------------------- <ul id="link_menu"> <li class="menu1"><a href="#">リンク1</a></li> <li class="menu2"><a href="#">リンク2</a></li> <li class="menu3"><a href="#">リンク3</a></li> </ul> 見当違いな回答だったらすみません…！
補足
ran_2323さん ご回答ありがとうございます。 質問の仕方が的確ではなかったです。すみません。 [イメージ][リンク][空白 ]改行 ↑ここをクリックの時にリンクをクリックと同じ動作にしたい。 [リンク]は[イメージ]のすぐ隣に配置したいので、できればpadding-leftで調整もしたくないです。 でも頂いたご回答を参考に、考えてみます。
各行の空白というのがいまいちよく分からないけど、 <a href="hoge.html"><img src="hoge.jpg" alt=""/></a><a href="piyo.html" style="display:inline-block;padding:3px;border:black 2px solid;">リンク１</a> で一応いいのではなかろうかと ただ、たしかinline-blockは最近のブラウザしか対応してなかったはずなので、floatを使って <a href="hoge.html" style="float:left;"><img src="ico_must.gif" alt=""/></a><a href="piyo.html" style="float:left;display:block;padding:3px;border:black 2px solid;">リンク１</a> の方がいいかもしれない。
補足
nodagutiさん ご回答ありがとうございます。 「各行の空白」って表現わかりにくかったですね。すみません。 空白って言い方のほうが良かったでしょうか。。。 [イメージ][リンク][空白 ]改行 [イメージ][リンク][空白 ]改行 [イメージ][リンク][空白 ]改行 上記の様な感じです。[空白]で示したところをクリックでも[リンク]で示したところをクリックと同じにしたいのです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Ｑ：よく分からないのですが、リンクの四角形の中にリンクを持つ画像が浮かんでいるということかな？ たとえば、お遊びで作ってみると・・・ 遊びの内容は、（巷のCSSでデザインされているページは、そのためだけのidやらclassがてんこ盛りなので、わざとシンプルなHTMLで挑戦してみた。） 【注意】下のソース(HTMLもCSSも)、分かりやすいように、すべて全角のスペースでインデントされています。テストするときは全角スペースをタブに置換すること!! 素のHTMLが下記のようなシンプルな(Strict)だとして、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>懲りすぎリンク</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1>懲りすぎリンク</h1> <ol> <li><a href="./page1.html" title="1ページ"><img src="http://service.okwave.jp/css/images_goo/question3.gif" width="34" height="34"></a><a href="./page10.html">リンク１</a></li> <li><a href="./page2.html" title="1ページ"><img src="http://service.okwave.jp/css/images_goo/question1.gif" width="34" height="34"></a><a href="./page20.html">リンク２</a></li> <li><a href="./page3.html" title="1ページ"><img src="http://service.okwave.jp/css/images_goo/question2.gif" width="34" height="34"></a><a href="./page30.html">リンク３</a></li> </ol> </body> </html> CSSは下記・・・ <style> <!-- html,body,ol,li{ margin: 0px; padding:0px; } h1{ margin-top: 70px; text-align: center; } a img{ border: outset white 2px; background-color: white; } body>ol{ display: block; position: absolute; top: 0px; height: 54px; width: 100%; border-bottom: inset 3px gray; } body>ol>li{ display: block; float:left; border: solid 1px red; width: 20%; font-size: 20px; position: relative; } body>ol>li>a{ display: block; width: 34px; height: 34px; position: absolute; border: solid: 2px green; z-index:2; margin: 6px; } body>ol>li>a + a{ display: block; width: 80%; height: 36px; padding-left: 34px; text-align:center; padding-top: 8px; padding-bottom: 8px; border: solid blue 1px; z-index:1; margin:0px; background-color: pink; } body>ol>li+li>a + a{ background-color: rgb(200,255,200); } body>ol>li+li+li>a + a{ background-color: rgb(200,200,255); } --> </style> <!-- ＨＴＭＬには一切余分なid,classはありません。 -->
補足
ORUKA1951さん ご回答ありがとうございます。 空白をクリックでリンクｎを押下と同じって動作は、まさにご回答の通りです。ありがとうございます。 ご回答は上メニューのイメージかと思いますが、欲しかったのは左メニューのイメージでして、ご回答を元に一行づつ改行するようなメニューに改造試みているのですが、ちょっと私には難しいです。。。 ■リンク１ ■リンク２ ■リンク３ ■（イメージ）のすぐ隣にリンク、空白（余白といった方が良かったかも）が続いて次の行へって感じなんです。 質問の仕方が曖昧でして申し訳ないのですが、もう少しご教授していただけると助かります。
関連するQ&A
- スワップイメージ＋リンクの変更
まったくの素人ですが、お教えください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。 このとき、abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされ、かつそれぞれの項目のリンク(a.html/b.html/c.html)がhoge.htmlと置き換わるようなjavascriptを作りたいと考えています。 イメージのスワップだけならいくつも見つけることができたのですが、イメージとリンクが両方ともスワップされるようなものを、見つけることができませんでした。もしそのようなjavascriptがweb上にありましたら、お教えください。
- ベストアンサー
- JavaScript
- クリックするとするするとスクロールさせたい(JS)
Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか？ <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }
- ベストアンサー
- JavaScript
- jqueryの質問です
jqueryで .tes01と.tes02は同じ番目をセットと考え .tes01 の画像をクリックした時に .tes02のリンクをクリックした状態にしたいと思っています。 .tes02のURLの取得は出来たのですがそれ以降が出来ないので教えてもらえますでしょうか。 $(function(){ $("ul.tes01 li").click(function(){ var tes01li = $(this).index(); var tes02li = $(".tes02 li").find("a").eq(tes01li).attr("href"); tes02li.click(); }); }); <ul class="tes01"> <li><img src="img01"></li> <li><img src="img02"></li> <li><img src="img03"></li> <li><img src="img04"></li> </ul> <ul class="tes02"> <li><a href="#link01">link01</a></li> <li><a href="#link02">link02</a></li> <li><a href="#link03">link03</a></li> <li><a href="#link04">link04</a></li> </ul>
- ベストアンサー
- JavaScript
- 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
- XHTML+CSSによるデザインをしています。
XHTML+CSSによるデザインをしています。 divボックスによる３段組レイアウトをして、左サイドバーの中にdivボックスを、縦に複数設置しようとしたら、２個目のボックスが表示されずメインボックスと右サイドバーが詰まってレイアウトが崩れてしまいました。 コーディングミスをご指摘いただけるのでしたらお願いします。 <div id="wrap"> <div id="header"> <div id="header_top"> <div id="logo"> <img src="image/logo.jpg" alt="" /> </div><!-- /logo --> <div id="header_right"> <div id="logo2"> Lost Book World </div> <div id="header_right_txt"> Yu </div> </div><!-- /header_right --> </div><!-- /header_top --> <div id="header_bottom"> <a href=".html"><img src="image/navi_global01.jpg" alt="" /></a><a href=".html"><img src="image/navi_global02.jpg" alt="" /></a><a href=".html"><img src="image/navi_global03.jpg" alt="" /></a><a href=".html"><img src="image/navi_globa4.jpg" alt=" /></a><a href=".html"><img src="image/navi_global05.jpg" alt="" /></a> </div><!-- /header_bottom --> </div><!-- /header --> <div id="inner"> <div id="largeWrap"> <div id="mainWrap"> </div><!-- /mainWrap --> <div class="sideAlphaWrap"> <div id="form_nv"> <img src="image/form-n.jpg" alt="" /><a href=""><img src="image/form-gen.jpg" alt="" /></a> </div> <div id="form"> </form> </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> <br /> <div id="form_nv"> <div id="form"> ああああ </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> </div><!-- /sideAlphaWrap --> <div class="clear"><hr /></div> </div><!-- /largeWrap --> <div class="sideBetaWrap"> 右サイドバー </div><!-- /sideBetaWrap --> <div class="clear"><hr /></div> </div><!-- /inner --> <div class="footer"> <p>ヘッダー<br /> Copyright © 2004-2010 abc co.,Ltd., All rights reserved.</p> </div><!-- /footer --> </div><!-- /wrap -->
- ベストアンサー
- HTML
- CSSのリストタグについて
下記のソースのようにリストタグに画像を並べます。 ここまではいいのですが、firefoxなどブラウ上で文字サイズを大きくすると画像の上下に余白が出来てしまうのは何ででしょうか。。 <ul> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> </ul> あるサイトのソースを見るとliタグににfont-size:1px;を指定されていました。コレでも解決するのですがこのやり方は良いのでしょうかね。。 質問の内容がわかりにくい時は「わかりにくい！」と言ってください。。
- ベストアンサー
- HTML
- ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボ
ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボタンをクリックしてね」の文字と画像の間に何行かの空白が出来てしまいます。これを詰めるにはどうしたらよいでしょうか？ ※ボタンをクリックしてね <TABLE><TR> <TD><a href="リンク先"><img src="images/1103fukunoki.jpg" width="134" height="86" alt="" class="pict" /></a></TD><TD> <a href="リンク先"><img src="images/1123yabusati.jpg" width="134" height="86" alt="" class="pict" /></a></TD> </TR> </TABLE>
- ベストアンサー
- ブログ
- 【CSS】右側エリアがずれ込む
CSS初心者で、会社のサイトの変更をしています。 現状メイン画像1枚のレイアウトだったところを 差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。 はめ込んだところ、右側のボタンがずれ込みます。 何をどうしたら解決できるかわかりません。 どうしたら修正できますでしょうか。 よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□ ■■■■■ □□メイン画像□□ ■ボタン■ □□□□□□□□□ ■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>
- ベストアンサー
- 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"> <!-- #slideshow img{ display: none; } --> </style> と書いてあります。これで回答いただくことに必要な情報は十分でしょうか もちろん一つのセットの場合は正常に動作しています。 宜しくお願いします。 補足 ちなみに url は http://brownpaper.biz/interior.htm です。
- 締切済み
- JavaScript
- cssの画像切り替え
宜しくお願いします。 cssでのhoverを使った画像の切り替えを教えてください。 ○html <dl id="dl"> <dt id="dt"><a href="#"><img src="img/image1.jpg" alt="" /></a></dt> <dd>あ</dd> </dl> ○css #dl { width: 170px; height: 170px; margin: 0; } #dt a { text-decoration: none; } #dt a:hover { background-image: url(img/image2.jpg); text-decoration: none; } というソースで、cssを使い画像を切り替えたいのですが、できません。 html指定で、<img src="～">で画像を表示させておき、 切り替える方法としましては、hoverを使いbackground-imageを使うしかないと思います。 background-imageからbackground-imageへの切り替えは、できるのですが、今回の場合は、どうしてもhtml指定で、<img src="～">からの切り替えを行いたいです。 そもそも、html指定の、<img src="～">で画像を表示する場合、cssで切り替えれるものなのでしょうか? 出来る限り、cssでの切り替えをしたいと考えています。 どなたか、分かる方お願いします。
- ベストアンサー
- HTML
お礼
ORUKA1951さん ご回答ありがとうございました。