Forum Moderators: mack
I have been learning how to do image rollovers but find I'm having problems getting the rollovers to work on my home PC. The PC I use at school, work and home all have Internet Explorer 6.0. The rollovers work just fine on every computer except at home. I've made sure that the option is selected to 'preload the images'. A classmate suggested there might be something on my yahoo toolbar that is causing this problem. He said it wasn't popups, but couldn't remember what it was.
Is there anyone who can offer some suggestions on a fix for this? Thanks much for any help.
Marletta
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:
<script src="/includes/rollover.js" type="text/javascript"></script>Now create two images, one home.gif & one home_o.gif. And create something like
<img src="/images/home.gif" alt="Home" width="40" height="48" class="imgover">or
<!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>-Corey
