Sprite Background Menu Navigation Primer Tutorial
There are a lot of ways to design and code for a menu used for navigation in a webpage. We happened to be reading CSS Sprites, and where it said …
CSS sprites technique is a way to reduce the number of HTTP requests made for image resources, by combining images in a single file.
… and its great menu navigation example (which forms a huge part of our sprite_eg.html‘s live run link), we wanted to use it to adapt it with inhouse content. That content is the Sprite image we constructed with a combination of …
- some inhouse images via a Google image search, thanks
- in macOS command-control-shift-3 to Paintbrush File->New from Clipboard to huhagain.png (internal use only)
- in macOS Paintbrush File->New 50 pixels x 500 pixels saved to newSprite.png … though at this early stage imagine it all white …
| For 5 image choices | ||||
|---|---|---|---|---|
| oneinfive.png | twoinfive.png | threeinfive.png | fourinfive.png | fiveinfive.png |
|
Rectangular select from huhagain.png relevant bit File->New from Clipboard Image->Image Size… 50 pixels x 50pixels File->Save As… oneinfive.jpg Edit->Select All Edit->Copy #Reopen Paintbrush huhagain.png In terminal (with ImageMagick installed) … Open Paintbrush onefive.jpg #Reopen Paintbrush huhagain.png |
As far left substitute “one” for “two” |
As far left substitute “one” for “three” |
As far left substitute “one” for “four” |
As far left substitute “one” for “five” |
… to end up with the originals and negated “onhover flip sided” colour negations (or inversion) Sprite image backgrounds to the menu imagery. We hope it interests!
If this was interesting you may be interested in this too.
