從多圖像（動畫）GIF文件顯示單個圖像

簡單的問題，真的。我只是沒有這方面的知識來做到這一點，並確保它可以與（幾乎）所有瀏覽器一起工作...
我將設計一組用一隻手指着幾個人的圖像方向。（上，下，左，右，對角線等）基本上，這個木偶將指向鼠標的位置。爲此，我想使用動畫GIF文件來包含所有圖像，然後根據鼠標與圖像的關係，使用JavaScript將正確的圖像放到正面。
雖然我的Javascript知識非常有限。在我開始創建GIF圖像之前，我想知道它是否可行，以及是否有解決方案可以在任何網頁瀏覽器上工作。（當然，除非它不支持JavaScript。）
我知道可以從JavaScript延遲GIF動畫，但是是否也可以修改需要顯示的確切圖像？從多圖像（動畫）GIF文件顯示單個圖像

來源

2010-10-22 Wim ten Brink

據我所知，這是不可能的。

這樣的東西，通常是使用"CSS sprites"技術，其中的各個階段膠合彼此相鄰成一個巨大圖像來完成。然後該圖像將在較小的元素中用作background-image。 background-position將決定顯示哪個圖像。

這是否適用於您將取決於您的圖像是否都是相同的大小與否。它具有在所有瀏覽器（包括IE6）中可靠運行的優點。

來源

2010-10-22 10:15:39

CSS Sprites增加了一個更好的解決方案，因爲它允許我改用JPG或PNG文件。 :-)圖像將全部大小相同，所以沒有問題。 – 2010-10-22 15:00:42

@Workshop然後它會正常工作。甚至有工具可以從單個圖像「編譯」精靈圖像。只需將它們粘在一起，並將'background-position'設置到正確的x位置 – 2010-10-22 15:03:51

從多圖像（動畫）GIF文件顯示單個圖像

回答

相關問題