HTML Help

Corey Bryant · Posted: Sun Aug 27, 2006 3:04 pm Rollover Script

Save this as rollover.js
Code: function initRollovers() {
if (!document.getElementById) return

var aPreLoad = new Array();
var sTempSrc;
var aImages = document.getElementsByTagName('img');

for (var i = 0; i < aImages.length; i++) {
   if (aImages[i].className == 'imgover') {
      var src = aImages[i].getAttribute('src');
      var ftype = src.substring(src.lastIndexOf('.'), src.length);
      var hsrc = src.replace(ftype, '_o'+ftype);

      aImages[i].setAttribute('hsrc', hsrc);

      aPreLoad[i] = new Image();
      aPreLoad[i].src = hsrc;

      aImages[i].onmouseover = function() {
         sTempSrc = this.getAttribute('src');
         this.setAttribute('src', this.getAttribute('hsrc'));
      }

      aImages[i].onmouseout = function() {
         if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
         this.setAttribute('src', sTempSrc);
      }
   }
}
}

window.onload = initRollovers; and then insert it into your HTML document (in the <head>), something like: Code: <script src="/includes/rollover.js" type="text/javascript"></script> Now create two images, one home.gif & one home_o.gif. And create something like Code: <img src="/images/home.gif" alt="Home" width="40" height="48" class="imgover">
_________________
Corey

Corey Bryant · Posted: Mon Dec 04, 2006 4:38 pm

Another way, using just CSS: Code: <!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>CSS Rollovers</title>
<style type="text/css">
div.outer
{
float: left;
width: 120px; height: 25px;
margin: 0 3px 0 0;
background: url( '20020816c.jpg' ) 0 -50px no-repeat;
}
div.outer a
{
display: block;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
font: normal 300 13px Verdana;
color: #0000FF;
text-decoration: none;
background: url( '20020816fa.jpg' ) top left no-repeat;
}
div.outer span
{
display: block;
margin:0; padding: 7px 0 0 13px;
}
div.outer a:hover
{
background-image: none;
color: #800080;
}
div.outer a:active
{
color: black;
}</style>
</head>

<body>
<div id="menu">

<div class="outer"><a href="http://www.htmlcodetutorial.com/help/"><span>HTML Code Tutorial Forum</span></a></div>
<div class="outer"><a href="http://www.htmlcodetutorial.com/"><span>HTML Code Tutorial</span></a></div>
<div class="outer"><a href="http://www.loudcommerce.com"><span>Merchant Accounts</span></a></div>
</div>
</body>

</html>