良葛格的 Blog

jQuery 寫的圖片提示文字功能

無聊將 筆記 上的著作提示文字用 jQuery 改寫了一下，之前是純手工 JavaScript。。。XD

寫兩個 function，一個加入提示文字，一個移除提示文字，用了淡入淡出。。。XD

      function getDesc(event) {
        var id = event.target.id;
        // 這應該算一行 Statement 嗎？XD...
        $.ajax({
                  url: id + '.txt',
                  type: 'GET',
                  success: function(data) {
                     $('<div id="' + id + 'desc"></div>')
                       .css({
                         position: 'absolute',
                         left: event.pageX - 250,
                         top: event.pageY + 60,
                         display: 'none'
                       })
                       .html(data)
                       .addClass('lookerUpperFlyout')
                       .appendTo('body')
                       .fadeIn();
                  }
              }
        );
       
      }
     
      function removeDesc(event) {
          $('.lookerUpperFlyout').fadeOut(function() { $(this).remove(); });
      }

你的 <img> 上設好 id 屬性，例如 <img id='javase6' ....>，說明文件是以 <img> id 屬性為主檔名，副檔名 .txt，中文請用 UTF8 編碼！然後寫 Ready handler：

$(function() {
          $('#javase6').bind('mouseover', getDesc).bind('mouseout', removeDesc);
});

這樣就有提示文字功能了。。XD

CSS 就自己改好看一點吧！我是用這個。。。

.lookerUpperFlyout {
  width: 500px;
  padding: 4px 8px;
  border: 2px ridge maroon;
  background-color: #ffffcc;
  z-index: 10;
  color: black;
}