Best way to do button rollovers?

Mike Teezie

macrumors 68020
Original poster
Nov 20, 2002
2,205
1
As I'm more into the "clean" look for websites, I've never really done a page with button rollovers.

A client wants a really busy look for their site, so I'm leaning towards rollover buttons for effect.

I messed around with it in ImageReady last night, and JEEZ. The sheer amount of code generated for four buttons with rollover states is insane.

I'm wondering - is there any other way to go about doing this that is cleaner?

I'm a totally javascript ignorant, but I'm willing to learn....
 

Will Cheyney

macrumors 6502a
Jul 13, 2005
697
0
United Kingdom
OK, I've put together a little 'template' which you can mess around with.
http://www.willcheyney.co.uk/users/misc/example/

The source files can be found here:
http://www.willcheyney.co.uk/users/misc/example/docs.zip

I've commented the JavaScript for you so you'll know which bit does what.
If you are interested, you could have the JavaScript which is currently placed in the <head> tags, load in from an external .js file. This would 'de-clutter' the rest of the document.

Download and save this JavaScript document:
http://www.willcheyney.co.uk/users/misc/example/rollover.js

Then, you would need to replace:
Code:
<script type="text/JavaScript">
<!--
//code for restoring the image to it's original on mouse-out
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

//image preloader - loads the images as the rest of the document loads preventing 'lag'
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<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//the maths... :)
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<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

//the part of the code which swaps the image on rollover
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];}
}
//-->
</script>
with:
Code:
<script language="JavaScript" type="text/javascript" src="misc/includes/rollover.js"></script>

Hope that helps!
It is also possible to achieve the same effect with CSS if you are into that at all?
 

Mike Teezie

macrumors 68020
Original poster
Nov 20, 2002
2,205
1
Will, thanks a ton.

I am very into using css where I can. I wouldn't really know where to begin with this, so again - any help would be greatly apprecitated.

Again - thanks so much Will.
 

wrc fan

macrumors 65816
For button style rollovers, I just use CSS. Normally I just create it from an unordered list. so the html would be like:

Code:
<ul id="nav">
     <li><a href="link1">Link 1</a></li>
     <li><a href="link2">Link 2</a></li>
</ul>
Then in CSS you put:

Code:
#nav ul {
	list-style: none;
}
#nav li {
    display: inline;
}
#nav a {
    color: white;
    text-decoration: none;
    background-color: black;
    padding: 5px 35px;
}
#nav a:hover {
	background-color: red;
}
 

nate

macrumors member
Jun 28, 2003
61
0
Calgary, Alberta, Canada
CSS works well for text -- I use it often; however, if you're doing graphics you might want to try the following.



Code:
<a href="index.html" 
onmouseover="document.a.src='overimage1.gif'" 
onmouseout="document.a.src='staticimage1.gif'">
<img src="staticimage1.gif" border="0" width="100" height="70" name="a"></a>

<a href="index.html" 
onmouseover="document.b.src='overimage2.gif'" 
onmouseout="document.b.src='staticimage2.gif'">
<img src="staticimage2.gif" border="0" width="100" height="70" name="b"></a>
You may include a pre-loader for the graphics, or not. It works either way. Larger files you may want a pre-loader.

This code makes it so that the image (staticimage.gif) changes when you put your mouse over the button (to the overimage.gif). Change width and height to what ever the graphic is. Remember that each button needs a name, I just used "a" and "b" for names.

It's a little less complex than the .js code mentioned previously.

enjoy,

--nate :)