2010-08-20 24 views
5

Tôi thường không gặp vấn đề gì khi tạo CSS sprites, nhưng cái này đã khiến tôi bối rối ... và tôi không chắc cách giải quyết nó. Về cơ bản tôi có một sprite chuyển hướng trông như thế này:CSS Navigation Sprite - Odd Shapes (không phải hình vuông)

nasdaq-ad-network-nav-sprit.png

Tôi đang sử dụng quy ước tiêu chuẩn đẻ chúng ra trong <li> thẻ đó như:

<li class="welcome"><a href="#" title="welcome">welcome</a></li> 

Và sau đó áp dụng CSS để điều chỉnh vị trí nền:

#navigation li.welcome a { 
    width:155px; 
    background-position:-0px -46.5px; } 

Tất nhiên tôi không nghĩ về điều này, nhưng vấn đề xảy ra khi di chuột. Vì bạn chỉ có thể xác định các vùng "hình vuông", khi bạn di chuột qua một phần tử, trạng thái di chuột "màu xanh lam" đang được chuyển sang mục điều hướng tiếp theo.

Sau đó tôi nghĩ rằng tôi sẽ phải tạo từng hình ảnh cho từng mục ... nhưng điều đó sẽ không hoạt động hoàn toàn đúng vì các phần mũi tên chồng chéo.

Có lẽ tôi phải tách riêng phần tách "mũi tên" ở giữa? Tôi thực sự không chắc chắn.

Tôi bị chặn ở đây. Ý tưởng nào?

Trả lời

2

Ông có thể tái tạo sprite sao cho các nút điều hướng được xếp chồng lên nhau theo chiều dọc? Sau đó, có vẻ như bạn có thể sử dụng lề trái tiêu cực để phù hợp với các nút với nhau. Bằng cách này, không gian âm ở phía bên trái của nút sẽ trống, thay vì có đầu mũi tên trong đó, do đó, khi di chuột, khoang sẽ vẫn trong suốt.

2

Thay vì một dãy sprites "hoạt động", tạo ra hai và kích hoạt chúng cách khác, tức là .:

active > inactive > active > inactive ... 
    inactive > active > inactive > active ... 

Bằng cách này, bạn luôn có thể cắt một nhân vật; bạn chỉ cần thêm vào giá trị Y nếu chỉ mục của phần tử của bạn là "lẻ" (index & 1 == 1).

0

Bạn có thể kéo dài ma và thay thế trạng thái di chuột bằng 5 dòng di chuột riêng biệt, mỗi dòng chỉ có một nút màu xanh lam với vị trí trạng thái di chuột riêng biệt cho từng mục. Kích thước tệp không được lớn hơn nhiều.

+0

Đây thực sự là một ý tưởng thực sự hay, không bao giờ nghĩ về điều đó. – dmackerman

5

Tôi nghĩ bạn đang đúng về việc phải nấu một hình ảnh 'thông minh' bao gồm tất cả các yêu cầu của bạn.

Thật khó để giải thích trong lời nói, đây là một liên kết đến một ví dụ: http://www.alistapart.com/d/sprites/ala-blobs2.html

Đây là liên kết như thế nào nó được thực hiện (cuộn xuống 'hình dạng bất quy tắc'): http://www.alistapart.com/articles/sprites

+1

Tôi đã sử dụng kỹ thuật này để làm sơ đồ phát nổ của các bộ phận đồng hồ, mỗi nơi được đánh dấu trên rollover và người dùng có thể nhấp để xem thông tin/đặt hàng chúng ... – Benjol

Các vấn đề liên quan