2014年4月19日 星期六

壓在圖上的文字：互動式



click X
阿多諾的《美學》：人和自然的關係在美的形式上應是：模仿。 模仿：是主體對客體的全力投入。 在學攝影中，我對這話句才有了一點一滴的體會… …


一、影音教學：
二、在欲編輯處寫入下列HTML碼：

<table id="ta2014041901" style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><img style="width: 628px; height: 419px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGPxOwZmFcJ64FXmgs2hdZRbOGpfNL3w2E-XvLt4N2QSbm85MStg-8XZGjhHQQ_TYBz_6Vi0JcI21TApFMKYrYHZhHSxCUxPnALoRaJPqQMMh_n-pWTzZH6H_cFHYdXQL3fn9wsjSSGaE/s763/IMG_1893.JPG"><br>
      <div style="width: 232px; height: 168px;">click X<br>
阿多諾的《美學》：人和自然的關係在美的形式上應是：模仿。
模仿：是主體對客體的全力投入。
在學攝影中，我對這話句才有了一點一滴的體會… …<br>
      </div>
      </td>
    </tr>
  </tbody>
</table>
三、請於<head>xxx</head>之 間或<body>之後置入CSS：

<style>
#ta2014041901 >tbody >tr >td {
position: relative;
}
#ta2014041901 >tbody >tr >td >div {
padding: 0.5em;
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: normal;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
background: rgba(253,255, 255, 0.7);
position: absolute;
top: 3.5em; left: 2em;
cursor: pointer;
}
#ta2014041901 >tbody >tr >td >div:first-line {
text-decoration:underline; padding-bottom: 1em;
}
</style>
四、請於<head>xxx</head>之 間或<body>之後置入Jquery程式碼：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#ta2014041901 >tbody >tr >td >div").click(function() {
$(this).css({"display": "none"});
});
$("#ta2014041901 >tbody >tr >td >img").click(function() {
$("#ta2014041901 >tbody >tr >td >div:hidden").fadeToggle(600);
});
});
</script>
注意事項：
  1. jquery-1.9.1.js這條程式碼（紅色部分），如因其他互動功能而已被使用，就不用再出現了。一篇文章中，只要出現一次即可，請保留 最早出現的那條。
  2. 整個模組只能使用一個互動功能，如要再使用第二次，請再從第二項重新做起，並更改全部的id。請看教學影音的說明。


沒有留言:

張貼留言