*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2013年10月23日 星期三

更簡單的 image hover 互動文本




東北角的一次看藍色

事實上有很久我沒有到東北角之地了。一種藍色的海天交際之混渾,總會綴上一抹人氣。想要忘掉很多事情時,開闊的海天,就是直接的催化劑;人生總是在空間性上亦是那麼的短暫。

你總要去看看的

透過這互動機制,移入滑鼠後(↑)出現的文字可以為圖像增加敘事性上的時間縱深。
我們可以在 USA Today 網站首頁看到這一互動機制的大量使用。




教學影音


寫作方法
1. 請將下列程式碼 copy 到<head>xxx</head>之間或<body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/Animated-Content-Hover-Effect-with-jQuery/jquery.contenthover.js"></script>
注意事項:
使用 KompoZer 寫作的同學,最好將程式碼放到<body>之後,才不會出現問題。
2. 請將下列 CSS 語法 copy 到<body>之後:
<style>
.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, .contenthover a { color:#fff; }
.contenthover h3 { margin:0 0 10px 0; line-height:1.6em; padding:0; font-family: 微軟正黑體; font-size: 1.19em; font-weight: bold;}
.contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; font-family: 微軟正黑體; font-size: 1.13em; font-weight: normal; letter-spacing: 0.1em; text-align: justify;  text-justify: distribute; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
</style>
3. 請在編輯區寫入 jQuery 驅動語法並在下面接著寫入 HTML 語法:
使用注意事項:
當要使用第二個文蓋圖的互動機制時,要把第3部分的語法再使用一次。同時要把紅字的d1,全部改成d2。之後依此類推。


語法出處: jQuery ContentHover Plugin

想問問題:互動跑不出來?


如何做:調整出正確比例的圖片大小?




7 則留言:

  1. 你好,依上述步驟操作後,未依預期在HOVER時出現動態效果,請教是否有其他需要注意的地方?

    回覆刪除
  2. 這恐怕要看你的原始檔才知了。一般而言,如果你有同時用了二種以上我所教的互動模組,請注意
    <script
    src="http://code.jquery.com/jquery-1.9.1.js"></script>

    這一條只出現一次就可以了。
    請保留第一次出現那條,其他的就刪除。
    這是學生常看到的問題。

    回覆刪除
  3. 你好,上述疑惑已解,起因於script錯置,應將第一段置於head、第二段置於body。
    貴站介紹許多關於hover的概念及應用著實讓我大開眼界,往後若有其他問題也盼不吝賜教囉,再次感謝您迅速回覆!

    回覆刪除
  4. 另想請教您,在他人文章留言發問後,常忘記標記該網頁,對善意解惑的站長實為失禮。
    能否追蹤自己在其他部落格的留言?Blogger是否有內建該功能?
    Thanks in advance!

    回覆刪除
  5. 這個我就不是很了解了。還請包涵!

    回覆刪除
  6. 你客氣了,非常感謝你的協助!雖目前仍在重新建構,有空也請給予敝站指教(http://joelsgap.blogspot.tw/),再次感謝!

    回覆刪除
  7. 想請問一下如果純用css能做到嗎?

    回覆刪除