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://lh4.googleusercontent.com/-3rSSSH3JnXg/UPv34gKahAI/AAAAAAAAHhY/NVjzqEijOqM/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。請看教學影音的說明。