html로 이미지를 표시하기 위해 MouseOver에 텍스트 표시

130

사용자가 이미지를 마우스로 가리킬 때 텍스트를 표시하고 싶습니다.

HTML / JS에서 어떻게해야합니까?

html image

— jseth
소스

241

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

CSS 호버
링크를 사용 하여 jsfiddle에 링크 할 수 있습니다 : 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>

자바 스크립트에서 :

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>

— 매트
소스