 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8305
Location: Castle Pines North, CO USA
|
 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
Site Admin
Joined: 15 May 2004
Posts: 8305
Location: Castle Pines North, CO USA
|
| 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> |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
