圖片型網頁跑馬燈設計 - HTML 網頁設計筆記

圖片型網頁跑馬燈是將網頁跑馬燈 marquee 的技術結合網頁圖片（img）所產生的效果，網頁跑馬燈的變化非常多，除了單純的文自跑馬之外，圖型式網頁跑馬燈也非常好用，而且可以透過精美的圖片來達到網頁質感提升的效果，還可以搭配超連結網頁跑馬燈的套用，讓原本的圖片型跑馬燈搖身一變成為具有超連結效果的跑馬燈，功能更加強大，接下來我們用幾個範例寫給各位讀者看看這幾種圖片型跑馬燈的實際執行效果。

圖片型網頁跑馬燈語法範例一、普通的圖片型跑馬燈

範例會呈現的效果

範例一提供的是最單純的圖片型網頁跑馬燈語法，重點在於範例中的圖片 img 標籤，我們把 img 標籤直接插入至跑馬燈 marquee 之中就能夠呈現圖片型跑馬燈囉！然後再透過跑馬燈本身的各種參數設定，就能輕鬆設計出想要的圖片型跑馬燈風格。

若您想更進一步了解跑馬燈的各種設計規則，請參閱：如何設計網頁跑馬燈。

圖片型網頁跑馬燈語法範例二、加入超連結效果的圖片型跑馬燈

範例會呈現的效果

範例一的圖片型跑馬燈只要再加上超連結的 a href 屬性，就能輕鬆的變成具有超連結效果的圖片型跑馬燈囉！範例二除了替圖片加入 HTML 的 a 標籤之外，其它語法都與範例一相同。

圖片型網頁跑馬燈語法範例三、修改為向上跑的圖片型跑馬燈

範例會呈現的效果

圖片型跑馬燈常常用在網頁邊欄上，做為一些特價商品的宣傳或是友站的 LOGO 宣傳，所以跑動的方向常常會採用垂直方向跑動，例如垂直向上持續跑或反過來垂直向下持續跑，這些圖片型跑馬燈都可以做到，修改的重點在 marquee 的參數，像範例三的語法，我們修改的部份是 direction="up" 這裡，表示方向是垂直向上。

網頁跑馬燈的各種跑動模式與方向都在《如何設計網頁跑馬燈》篇有詳細使用說明。

更多網頁跑馬燈設計的技巧