HTMLの画像のMouseOverにテキストを表示する

130

ユーザーが画像にマウスオーバーしたときにテキストを表示したいと思います。

HTML / JSでこれを行うにはどうすればよいですか？

html image

— jseth
ソース

240

title属性を使用できます。

<img src="smiley.gif"  title="Smiley face"/>

必要に応じて画像のソースを変更できます。

そして@Grayがコメントしたように：

また、使用することができますtitleように他のものの上に<a ...アンカー、<p>、<div>、<input>、など参照：これを

— ファルハド・ジャビエフ
ソース

3

また、使用することができますtitleように他のものの上に<a ...アンカー、<p>、<div>、<input>、など。参照：w3schools.com/tags/att_global_title.asp

— グレー

16

ここでjsfiddleへのCSSホバーリンクを使用できます：http ://jsfiddle.net/ANKwQ/5/

HTML：

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ'></a>
<div>text</div>

CSS：

div {
    display: none;
    border:1px solid #000;
    height:30px;
    width:290px;
    margin-left:10px;
}

a:hover + div {
    display: block;
}

— エリック・レシンスキー
ソース

4

このようにすることもできます：

HTML：

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>

JavaScriptで：

function somefunction()
{
  //Do somethisg.
}

— ユーザー
ソース

3

CSSホバーを画像の背景と組み合わせて使用できます。

CSS

   .image
{
    background:url(images/back.png);
    height:100px;
    width:100px;
    display: block;
    float:left;
}

.image  a {
    display: none;
}

.image  a:hover {
    display: block;
}

HTML

<div class="image"><a href="#">Text you want on mouseover</a></div>

— マット
ソース