Let’s take a look at two ways to make image rollovers, you know… those images that change when you move your mouse cursor over them. The first way is with Javascript. You gotta create two images, one for the regular state, one for the rollover:
regular.
rollover.
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i }function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i
if (a[i].indexOf(”#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(”?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i for(i=0;!x&&d.layers&&i if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
Now that my brain has collapsed from looking at ugly obfuscated code, there is a more kick-ass way to do this. You only have to make one image; put the regular state on top and rollover state on the bottom. Then set the size of the layer to only show the top half of your image and on hover, change the background-position to bottom. VOILA!
.rollover {
background: url(./images/menu1_awesome.gif);
height: 76px;
width: 207px;
}.rollover:hover {
background-position: bottom;
}
The final product (rollover to throw party)
fin. Q.E.D.
using css for rollovers is waaaay better than javascript!! you’re such a nerd =P but then again, maybe i am too since i completely understood all that.
is it weird that i’m turned on?
Wow Tarn, I enjoyed that little piece. There’s more than 2 ways to skin a cat-burglar.