Skip to content

Instantly share code, notes, and snippets.

@martynchamberlin

martynchamberlin/demo.html

Created August 28, 2013 21:36
Show Gist options
  • Save martynchamberlin/6371643 to your computer and use it in GitHub Desktop.
Save martynchamberlin/6371643 to your computer and use it in GitHub Desktop.
Download ZIP
If we still lived in the 1990s, this would be the best way to create a navigation that changed on hover. This Javascript is compatible with IE 5.5, which is such an old browser that a:hover is meaningless to it. So, how does this work? Well, if you have an image named "btn-1.png" and you give it a "name" property of "btn-1", you can create an im…
Raw
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>1990s navigation (!)</title>
</head>
<body>
<script type="text/javascript" language="javascript">
function toggle( resource ) {
if ( document[resource].src.substr( document[resource].src.length - 9, 5 ) == 'hover' )
document[resource].src = 'images/' + resource + '.png';
else
document[resource].src = 'images/' + resource + '-hover.png';
}
</script>
<a href="" onMouseOver="toggle( 'btn-1' )" onMouseOut="toggle( 'btn-1' )" ><img name="btn-1" src="images/btn-1.png"></a>
<a href="" onMouseOver="toggle( 'btn-2' )" onMouseOut="toggle( 'btn-2' )" ><img name="btn-2" src="images/btn-2.png"></a>
<a href="" onMouseOver="toggle( 'btn-3' )" onMouseOut="toggle( 'btn-3' )" ><img name="btn-3" src="images/btn-3.png"></a>
<a href="" onMouseOver="toggle( 'btn-4' )" onMouseOut="toggle( 'btn-4' )" ><img name="btn-4" src="images/btn-4.png"></a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment