<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Sprite Navigation Menu ... thanks to https://www.tutorialrepublic.com/css-tutorial/css-sprites.php</title>
<style>
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px; /* To sift text off the background-image */
color: #3E789F;
//background: url("https://www.tutorialrepublic.com/lib/images/mySprite.png") no-repeat; /* As all link share the same background-image */
background: url("./newSprite.png") no-repeat; /* As all link share the same background-image */
}
ul.menu li.Work_Roster_Cookies_Tutorial a {
background-position: 0 0;
}
ul.menu li.Curriculum_Vitae_Speech_to_Text_to_Speech_Prompting_Tutorial a {
background-position: 0 -100px;
}
ul.menu li.Speech_to_Text_Hangman_Game_Tutorial a {
background-position: 0 -200px;
}
ul.menu li.HTMLJavascript_Guided_Snake_Game_Drag_and_Drop_Tutorial a {
background-position: 0 -300px;
}
ul.menu li.Cross_BrowserPlatform_Javascript_Primer_Tutorial a {
background-position: 0 -400px;
}
ul.menu li.Work_Roster_Cookies_Tutorial a:hover {
background-position: 0 -50px;
}
ul.menu li.Curriculum_Vitae_Speech_to_Text_to_Speech_Prompting_Tutorial a:hover {
background-position: 0 -150px;
}
ul.menu li.Speech_to_Text_Hangman_Game_Tutorial a:hover {
background-position: 0 -250px;
}
ul.menu li.HTMLJavascript_Guided_Snake_Game_Drag_and_Drop_Tutorial a:hover {
background-position: 0 -350px;
}
ul.menu li.Cross_BrowserPlatform_Javascript_Primer_Tutorial a:hover {
background-position: 0 -450px;
}
</style>
<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;
}
}
function onl() {
if (inIframe()) {
var asare=document.getElementsByTagName('a');
for (var i=0; i<asare.length; i++) {
asare[i].target='_blank';
}
}
}
</script>
</head>
<body onload='onl();'>
<h1>Example of Sprite Navigation Menu</h1>
<h3>RJM Programming - December, 2021 ... thanks to <a target=_blank title='https://www.tutorialrepublic.com/css-tutorial/css-sprites.php' href='//www.tutorialrepublic.com/css-tutorial/css-sprites.php'>https://www.tutorialrepublic.com/css-tutorial/css-sprites.php</a>
<ul class="menu">
<li class="Work_Roster_Cookies_Tutorial"><a href="http://www.rjmprogramming.com.au/ITblog/work-roster-cookies-tutorial/">Work Roster Cookies Tutorial</a></li>
<li class="Curriculum_Vitae_Speech_to_Text_to_Speech_Prompting_Tutorial"><a href="http://www.rjmprogramming.com.au/ITblog/curriculum-vitae-speech-to-text-to-speech-prompting-tutorial/">Curriculum Vitae Speech to Text to Speech Prompting Tutorial</a></li>
<li class="Speech_to_Text_Hangman_Game_Tutorial"><a href="http://www.rjmprogramming.com.au/ITblog/speech-to-text-hangman-game-tutorial/">Speech to Text Hangman Game Tutorial</a></li>
<li class="Cross_BrowserPlatform_Javascript_Primer_Tutorial"><a href="https://www.rjmprogramming.com.au/ITblog/ross-browserplatform-javascript-primer-tutorial/">Cross Browser/Platform Javascript Primer Tutorial</a></li>
<li class="HTMLJavascript_Guided_Snake_Game_Drag_and_Drop_Tutorial"><a href="https://www.rjmprogramming.com.au/ITblog/htmljavascript-guided-snake-game-drag-and-drop-tutorial/">HTML/Javascript Guided Snake Game Drag and Drop Tutorial</a></li>
</ul>
</body>
</html>