[Blog] 製作跑馬燈式的最近閱讀書籍清單

昨天在Blog上裝上跑馬燈式的最近閱讀的書籍清單,以下列出作法供需要者參考(範例請看我Blog首頁)。

插入自由欄位的HTML原始碼:

  onmouseover="this.stop();" onmouseout="this.start();" align="center">
 
    思考的技術
 


 
    宏碁的世紀變革
 

 

剛讀完的書:
 

  豐臣秀長

  你的桶子有多滿?
 

有空時會看的日劇-水男孩:
 

 
    水男孩
 





分段解說如下:

<marquee scrollamount="1″ direction="up" width="200″ height="120″
  onmouseover="this.stop();" onmouseout="this.start();" align="center">
marquee是用來製作跑馬燈式的捲動式文字;使用的屬性說明如下:

  • scrollamount: 一次捲動多少像素
  • direction: 捲動方向;up=向上捲動
  • width、height: 作用範圍寬、高各200px與120px
  • onmouseover: 滑鼠一移入就停止捲動
  • onmouseout: 滑鼠一移出就開始捲動
  • align: 置中顯示
  <a href="http://www.books.com.tw/exep/prod/booksfile.php?item=0010287518&"
          target="_blank">
    <img alt="思考的技術" src="http://addons.books.com.tw/G/8/0010287518.jpg"/>
  </a>
放入超連結

  • href: 連結到指定的網址
  • target: _blank代表將網址開啟到新的視窗

再用加入書籍的圖形檔;為了怕可能讀不到指定網站的圖檔,必須用 alt 指定顯示用的文字

<hr size="1″ color="green">  畫一條1像素的橫線(Horizontal Rule)
            target="_blank">
    宏碁的世紀變革           src="http://www.bookzone.com.tw/book/bkimages/book/P_CB301.gif"/>
 
再加第二本書
 

剛讀完的書:
 

  豐臣秀長

  你的桶子有多滿?
 
用超連結的方式顯示另兩本書
marquee> 結束

另外,要特別提醒大家的:

Xuite的自由欄位在修改模式下,會把英文全部轉成小寫,如果指定網址不是運作在Windows系統,那麼網址的大小寫是不一樣的,因此修改時必須特別注意網址是否被轉掉了;例如「思考的技術」這本書使用博客來的圖檔,網址是:

http://addons.books.com.tw/G/8/0010287518.jpg

網址中有個大寫的G,修改時都被轉成小寫,導致捲動時因找不到圖檔而出現紅叉叉。
這個茶包...害我浪費好多時間...

您可能也會有興趣的類似文章

8 則留言 »[Blog] 製作跑馬燈式的最近閱讀書籍清單

填寫回應

 

 

 

您可使用這些HTML標籤

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

隨機文章

  1. [OOo] 自動圖文集與自動校正 
  2. MyBlogLog似乎造成網頁載入速度變慢? 
  3. DOS (命令提示字元) 的巨集功能 (3)
  4. 蘋果創辦人喬布斯 討厭按鈕 
  5. 網頁編輯軟體KompoZer 0.8b1新版推出 
  6. 新版IDEA無法Debug的異常 
  7. [HTML&CSS] 鎖定左側功能選單,不隨頁面捲動 
  8. TiddlyWiki: 增加第二組編輯區工具列 
  9. [轉貼] 「非親非客」的大陸交換生 (3)
  10. Wiki式的記事工具:WikidPad (3)

歷史熱門文章

  1. 如何手動輸入Plurk的表情圖示? (368,397 點擊/2008-09-29)
  2. 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (120,336 點擊/2011-06-01)
  3. Plurk CSS樣式自訂修改全攻略 (89,461 點擊/2009-07-04)
  4. 簡單放大Plurk輸入區的方法[修訂] (88,892 點擊/2008-09-29)
  5. 網路升級光世代50M/3M與設定ZyXEL P874 (72,095 點擊/2011-05-28)
  6. 輕鬆學會彈指神功-揭露AutoHotkey絕技 (50,893 點擊/2008-04-10)
  7. iPad新手入門技巧 (49,401 點擊/2011-02-05)
  8. iPad鍵盤輸入全攻略 (42,869 點擊/2011-01-01)
  9. 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (40,907 點擊/2010-04-27)
  10. 調整Windows 7環境: 加回工作列的「顯示桌面」圖示 (40,845 點擊/2010-01-02)