人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: tsuyoring
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● gp334437g4723k87
●200ポイント

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

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ