사진 위에 마우스를 올리면 사진의 큰 미리보기가 나타나고 큰 사진 아래에 소개 텍스트도 표시됩니다. 코드 복사 코드는 다음과 같습니다. <%@ Page Language="C# " AutoEventWireup= "true" CodeFile="그림 프롬프트 효과.aspx.cs" Inherits="그림 프롬프트 효과" %> <br>.aa{ <br>너비:88px ; <br>높이:100px; <br><br> <script type ="text/javascript" > <BR>$(function () { <BR>var x = 10; <BR>$ ("a .tooltip").mouseover(function (e) { <BR>this.myTitle = this.title; <BR>this.title = ""; <BR>var imgTitle = this.myTitle ? "<br /> " this.myTitle : ""; <BR>var tooltip = "<div id='tooltip'><img src='" this.href "' alt='제품 미리보기'/>" imgTitle " </div>"; //<div> 요소 생성 <BR>$("body").append(tooltip) //텍스트에 추가합니다. <BR>$("#tooltip") <BR>.css({ <BR>"top": (e.pageY y) "px", <BR>"left": (e.pageX x) "px" <BR><BR>}).show (" fast"); //x 좌표와 y 좌표를 설정하고 표시합니다 <br>}).mouseout(function () { <br>this.title = this.myTitle; <BR>$("#tooltip" ).remove (); // <BR> 제거}).mousemove(function (e) { <BR>$("#tooltip") <BR>.css({ <BR>"top": (e.pageY y) "px", <BR>"왼쪽": (e.pageX x) "px" <BR>}) <BR>}) <BR> < /head> < ;a href ="image/5.jpg" class ="tooltip" title ="장갑"> < /a> < ;/html>