Sprite Background Menu Navigation Javascript Tutorial
Yesterday’s Sprite Background Menu Navigation Primer Tutorial set the scenario for today’s work, that we are often looking for. You see, we’re trying to help beginners to web application creation here, by and large, and there is no better topic to learn about than … anyone, anyone? Yes, Brendan, the working knowledge of Javascript, as the prominent anyone, anyone? Semi-pending-yes, semi-snaps for you if you mean theme and not theme if you know what I mememean (chortle, chortle)!
Yes, beginners to this “web application caper” should learn …
- HTML (design) … to show something … perhaps the first thing to learn … and …
- Javascript (programming) … to have interactions of interest in that webpage above … the major “clientside” thing to learn … otherwise can be a bit boring … though there is also …
- CSS (styling) … to control the look of the creation … the “show your friends” “clientside” thing to learn … though we have done “no Javascript” tutorials in the past
… but we would say that middle one is your topic to concentrate on throughout your learning.
Add to that, down the track, by adding to those “clientside” scenarios above, a “serverside” programming skill, such as PHP programming (for our Apache/PHP/MySql favourite local web browser via MAMP, scenarios).
And so with yesterday’s Sprite Background Menu Navigation Primer Tutorial all of us got you to a “no Javascript” start on the CSS Sprites memetheme. Today we stage some Javascript “easing in to learning” memethemes …
| Javascript idea … | HTML/Javascript coding change |
|---|---|
| Navigations to a new tab (if, like here’, embedded within an HTML iframe element *) |
|
| Navigations even via image clicks |
* …
<script type='text/javascript'>
function inIframe() { // thanks to https://stackoverflow.com/questions/326069/how-to-identify-if-a-webpage-is-being-loaded-inside-an-iframe-or-directly-into-t
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
</script>
Previous relevant Sprite Background Menu Navigation Primer Tutorial is shown below.
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.
If this was interesting you may be interested in this too.
