WEBデザインで画像の上に説明文字を表示する方法に関しまして。

昔どこかのサイトで、「Operaだととても綺麗にレンダリングされる」方法が記載されていました。
確か、マウスを画像の上に持って行くと、画像の下部に角の丸い長方形の半透明な黒い
テキストエリアがあらわれ、その中に文字が記載されていたかと思います。

画像の上に単純に文字をかぶせる方法については分かるのですが、
Operaの場合にのみもの凄く綺麗に表示されているのをみてとても記憶に残っています。
(他のブラウザでも表示はされるが、Operaのようにはならない、とか書かれていたはず……たぶん)

おそらくHTML5やCSS3を使った新しい技術を探しているときに見つけたのですが、
上記方法をご存じの方いらっしゃいましたら、教えてください。

回答の条件
  • 1人10回まで
  • 登録:
  • 終了:2012/06/03 14:20:12
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答1件)

id:gp334437g4723k87 No.1

回答回数126ベストアンサー獲得回数20

ポイント200pt

IMGのタグにTITLE="説明文"と追加することにより、画像にマウスをもっていくと説明文の吹き出しが表示されます。この実装方法はブラウザによって異なりますので、たぶん、そのサイトの人はOperaの吹き出しの実装例が一番、きれいと感じたのではないでしょうか?

ただし、この方法の場合、ブラウザごとに違うデザインの吹き出しが表示されたり、ブラウザによっては吹き出しが表示されない場合もあるので、一般的には Javascriptによって吹き出しの制御を行います。この方法に関しては「jquery popup」で検索すると良い実装例が見つかります。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません