剛剛發現這個網頁
http://www.puredesign.com.tw/artistry.htm#
我覺得顯示圖片的方式很棒,
1.不知道該如何做到,該如何寫?
有沒有模組可以套用?
還有,每當滑鼠一離開小圖時,左邊的放大圖示會回到第一張,
如果不回到第一張呢? 就是說...
2.顯示你鼠標最後碰到的那張,又該如何改呢?
3.有沒有什麼可以參考"這類圖示方法!!!"的網站?
或是相關的書?
謝謝
PS.我是新手,用的軟體是dreamweaver
2006-10-11 10:53:56 · 5 個解答 · 發問者 Calvin 1 in 電腦與網際網路 ➔ 程式設計
可以使用Dreamweaver中，有一個「標籤檢視窗」中的一個行為特效。請依照步驟來做！(手痠，START!)
以下示範為使用Dreamweaver 8
【STEP0.前置動作】
1.請先開一個新的空白頁面來練習用，之後再套用上去效果。
2.請準備大小都一樣的「一張透明圖、二張放大圖」與兩張縮小圖。
(透明圖不用準備縮小的)
3.圖片準備好後，請先依照下面的圖片檔名進行命名：
透明圖→space
縮小圖1→be_pic1
縮小圖2→be_pic2
放大圖1→pic1
放大圖2→pic2
都準備好後，請將所有圖片都放在跟空白頁面同一層的目錄底下。(同一個資料夾裡)
3.插入表格，規格為一列三欄。
【STEP1.插入圖片】
1.接下來請再表格的「最左邊那一欄」插入您所準備的透明圖。
2.「接續下來右邊的兩攔」插入縮小圖。
【STEP2.圖片命名】
這邊指得替圖片命名不是指檔案名稱哦！是指圖片的「id」屬性。插入圖片之後請點該圖片，然後下方的屬性面板的最左邊會出現影片的相關資訊。在「影像,15k」(假設的)下面有個空白欄位，請在該欄位為圖片命名。現在我們假設各圖片名稱為以下：
空白圖片 → space
縮小圖1 → pic1
縮小圖2 → pic2
【STEP3.設定動作】
1.開啟右邊有一個叫做「標籤檢視窗」的窗格。它有兩個分頁分別是屬性及行為。請開啟行為面板分頁來進行動作。
2.接下來請點選「縮小圖1」，然後按行為分頁有一個「+」號，選擇「調換影像」。
3.接下來您會看到共有以下資訊出現在裡頭：
影像"space"
影像"pic1"
影像"pic2"
4.請點選"space"將它反白後，在「設定原始檔：」這個設定裡，設定要放大的圖片。因為我們現在是先設定「縮小圖1」，因此我們要按瀏覽鈕找到「放大圖1」(pic1)。
5.接下來往下看，會有兩個選項提供給您勾選：分別是「預先載入影像」跟「滑鼠滑開時恢復影像」，若您要「圖片不變回來」，第二個選項請不要勾選！
6.好了之後請按確定，接續著點選「縮小圖2」進行下一張圖片的設定。
7.第二張圖片，依舊是選擇「影像"space"」來變換，因為我們設定兩張圖片要在同一個地方放大，對吧？
8.好了之後，按確定。接下來請快樂的(切記要快樂的)按下F12預覽。
【注意事項】
當您做到一定程度，一定會發現一個問題，那就是…假如放大圖的尺寸不一樣，會造成失真的問題！假如放大圖2比放大圖1小，則顯示圖片時，放大圖2會整個變大造成失真的現象，該怎辦呢？
解決方法：
請先將圖片較小的圖片，進行「填充空白」的動作。所有放大圖片請都跟透明圖的大小一樣才行。現在我們假設透明圖大小為400*300，而我們有一張放大圖的大小為200*300，代表著比原本的圖片還要「瘦」。請利用繪圖軟體，開啟一張400*300的空白圖片，接下來將200*300的圖片剪下來後，貼上去。再另存新檔，就完成嘍 ^^
【OTHER】
若有任何問題，請再度補充問題哦！
2006-10-11 20:25:31 補充：
補充我自行製作的範例網頁：http://asparagusw.myweb.hinet.net/roller/Tech2.html我將透明圖換成了另一張圖片，也是可以的哦！
2006-10-11 20:27:25 補充：
忘了打上"，本篇為我自行撰寫的教學。請尊重可貴的著作權哦 ^^"
2006-10-11 20:32:09 補充：
如果示範頁不能正常動作，請重新整理哦！
2006-10-11 15:55:24 · answer #1 · answered by ? 4 · 0⤊ 0⤋
請問一下透明圖是什麼??
2007-08-08 04:50:03 補充：
可以用小畫家做嗎??
2007-08-08 00:46:17 · answer #2 · answered by nikki503 1 · 0⤊ 0⤋
http://home.netvigator.com/~civilboy/seiya/seiya-c.html
這一個的故事簡介是怎麼做的?
謝謝~
2007-05-17 19:03:37 · answer #3 · answered by ? 1 · 0⤊ 0⤋
嗯.... 你可以直接用原始碼到你的電腦修改吧0.0"
試試看能不能這樣用
最爛且最快的方式....
2006-10-11 13:55:55 · answer #4 · answered by 小米飯 7 · 0⤊ 0⤋
http://std.hku.edu.tw/~b952010018/Scarlett-Johansson/@@ 這是我最近做的!!我是只用 Photoshop 和 ImageReady這兩套一起做的喔!!!這種叫做 影像地圖!
2006-10-11 15:40:36 補充：
我的圖片過大，所以進去要等一下子，效果才會出現!
2006-10-11 11:39:42 · answer #5 · answered by ? 7 · 0⤊ 0⤋