WEBデザインで画像の上に説明文字を表示する方法に関しまして。
昔どこかのサイトで、「Operaだととても綺麗にレンダリングされる」方法が記載されていました。
確か、マウスを画像の上に持って行くと、画像の下部に角の丸い長方形の半透明な黒い
テキストエリアがあらわれ、その中に文字が記載されていたかと思います。
画像の上に単純に文字をかぶせる方法については分かるのですが、
Operaの場合にのみもの凄く綺麗に表示されているのをみてとても記憶に残っています。
（他のブラウザでも表示はされるが、Operaのようにはならない、とか書かれていたはず……たぶん）
おそらくHTML5やCSS3を使った新しい技術を探しているときに見つけたのですが、
上記方法をご存じの方いらっしゃいましたら、教えてください。
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
みんなの回答
-
gp334437g4723k87
満足200pt
IMGのタグにTITLE="説明文"と追加することにより、画像にマウスをもっていくと説明文の吹き出しが表示されます。この実装方法はブラウザによって異なりますので、たぶん、そのサイトの人はOperaの吹き出しの実装例が一番、きれいと感じたのではないでしょうか？
ただし、この方法の場合、ブラウザごとに違うデザインの吹き出しが表示されたり、ブラウザによっては吹き出しが表示されない場合もあるので、一般的には Javascriptによって吹き出しの制御を行います。この方法に関しては「jquery popup」で検索すると良い実装例が見つかります。
この質問へのコメント
質問の情報
- 登録日時
- 2012-05-27 14:16:35
- 終了日時
- 2012-06-03 14:20:12
- 回答条件
- 1人10回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…
匿名質問者
1
1
-
不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者11
-
日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者
-
共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者1
-
内定してほしいポケモンはいますか？匿名質問者