- ベストアンサー
スタイルシートでロールオーバー画像上にテキスト表示させたいです
スタイルシートで画像のロールオーバーリンクを作成したのですが、 その画像の任意の箇所にテキストを入れたいのですが(マウスon/off時、内容・箇所同じ)記述の仕方がわかりません。 ご教授よろしくお願いいたします。
- ecomen
- お礼率41% (22/53)
- その他（プログラミング・開発）
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- abril
- ベストアンサー率69% (388/560)
> スタイルシートで画像のロールオーバーリンクを作成したのですが、 > その画像の任意の箇所にテキストを入れたいのですが(マウスon/off時、内容・箇所同じ)記述の仕方がわかりません。 では、現在は少なくとも前半の部分はできている状態なのでしょうから、その部分のHTMLとCSSを提供して下さい。画像の縦横サイズも明記した上で。 ＃それから、これは【質問番号：5127509】の方とは無関係（また別の箇所）の質問ですか？
補足
5127509の質問とは別ものです。 補足ですが、1つのロールオーバー画像に1つのテキスト(テキスト1)を表示することは、調べてできたのですが(下記CSS&HTML)、1つのロールオーバー画像に2つのテキスト(テキスト1とテキスト2)を表示することができません。 ↓[画像] ■■■■■■■■■■■■ ■■■テキスト1 ■■■■ ■■■■■■■■■■■■ ■■■■■■■■■■■■ ■■■■■■■■■■■■ ■■■■■テキスト2 ■■ ■■■■■■■■■■■■ ↑このようなものにしたいと考えてます。 すみません。よろしくお願いします。 【ＣＳＳ】 #taiken01 { display:block; width:200px; height:135px; padding:0px 10px 10px 10px; text-align:left; } a.taiken01{ display:block; background-image:url(img/hogehoge.gif); background-repeat:no-repeat; width:164px; height:124px; padding:6px 10px 5px 26px; text-decoration:none; font-size:12px; line-height:12px; } a.taiken01:hover{ background-image:url(img/hogehoge.gif); background-repeat:no-repeat; } 【ＨＴＭＬ】 <div id="taiken01" style="float:left;"> <a href="#" class="taiken01">テキスト1</a> </div>
関連するQ&A
- 文字のロールオーバーについて教えてください。
HPを作製しているのですが、リンクを張った文字にロールオーバーをつけたくて、スタイルシートで、やってみたのですが、そうすると画像を張ったリンクにマウスを持ってきても周りの色が四角に、指定した色に変わってしまいます。（画像は、楕円形のボタンです） 文字のみロールオーバーをつけたい場合はどうしたらいいのか教えてください。
- ベストアンサー
- HTML
- スタイルシートと画像リンクの下線
現在HPを作成しています。 スタイルシートで、ページ内指定で、リンクについて下線を表示させています。テキストから下線を少し離したいので以下のような記述をしています。 A:link{text-decoration:none;border-bottom-style:solid;border-width:1px;padding-bottom:0.3p x;color:#000000;} そして、そのページ内にある画像からもリンクを設定したいのですが、画像には下線がついて欲しくないのです。 何かよい方法がありますでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- 画像のある部分にロールオーバーをつける方法
質問タイトルの通り、画像のある部分にロールオーバーをつけ、さらにその部分にリンクを貼りたいのですが、ロールオーバーがうまくできません。 リンクを貼るだけならソフトにあるイメージマップ作成機能を使ったり、HTMLで作成すればできるのですが、イメージマップを作成した部分にロールオーバーをつける方法がわかりません。 ソフトはFireworks8、Dreamweaver8を使用しています。 ロールオーバーをつける方法がわかる方、ご教授ください。
- 締切済み
- HTML
- CSS：スタイルシートでテキストリンク
教えてください！！ 外部ファイルのスタイルシート（ＣＳＳ）を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 ＩＥ6.0では問題なく起動していますが、ＮＳ7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか？ ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のＣＳＳの記述】 .menu { font-family: "ＭＳ Ｐゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシート２
１．スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか？ <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ！！ といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような（くどい＾＾）気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ ２．さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル（省略できない）。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか＾＾ リンクできるのは、見やすく便利ですが・・・
- ベストアンサー
- その他（プログラミング・開発）
- あるテキストリンクにマウスオーバーしてる時に画像が
あるテキストリンクにマウスオーバー（マウスのカーソルが乗ってる状態）している時に となりにある画像が替わるように（ロールオーバー時みたいに）したいのですが、可能でしょうか？ 画像対画像だったらできるのですが、 テキストリンクでも可能なのでしょうか？ こちらの環境は Dream weaver CS5 を使用しております。 宜しくお願い致します。
- ベストアンサー
- HTML
- yuga.jsを使うとロールオーバー画像が表示されない
お世話になっております。質問させてください。 現在メニューの画像をyuga.jsに入っていないスクリプトで ロールオーバーさせているのですが、 ある1ページにだけ yuga.js関係のスクリプトを使用した所、 そのページのメニュータイトル画像だけが 表示されなくなってしまいました。 （マウスを載せるとロールオーバー後の画像は出てくるのですが） http://www.geocities.jp/meguri_mizu/test/pc/2008.html ↑こんな感じです…。左上の「役に立つパソコン」の部分です。 firefoxだとずっとマウスオーバーした時の画像が表示されたままになってしまいます。 yuga.jsでできる、名前に_onをつけてのロールオーバーにしても やっぱり自ページのメニューだけがうまく表示されません。 なぜなのでしょうか…？ スクリプトが読めないのでどう直していいのか全然わかりません；； よろしければご教授ください。お願いします…。
- ベストアンサー
- JavaScript
- スタイルシートでの画像のセンタリング
既出かも知れませんが、探し出せなかったもので、質問させて頂きます。 スタイルシートを独立したファイルとして作成しています。クラス付けしてある画像を左右方向の中央に表示する記述方法を教えて下さい。宜しくお願いします。
- ベストアンサー
- HTML
- ロールオーバーとスワップイメージとテキスト表示を同時に？
他のカテゴリでも質問しておりますが スクリプト的な内容なのでこちらで質問させて いただきます Javascriptは初心者です。 宜しくお願いします。 ボタンをロールオーバーにして色が変わった時に 横の大画像も入れ替わり表示させて同時に 下にテキストも表示させるものをつくりたいのですが Javascriptで可能でしょうか？ 記述の仕方もよくわかりません。 おわかりになりましたら教えてください また別の方法もありましたら宜しくお願いします
- ベストアンサー
- JavaScript
お礼
ありがとうございました！ 大変わかりやすくご教授いただきましてありがとうございます。 おかげさまで理想の表示をすることができました。 他質問でもご丁寧に回答いただき感謝感謝です。