rollovers

**captainsaneo** · 10-05-2004, 08:58 PM

how do you do rollover buttons on a webpage

**madboyv1** · 10-06-2004, 01:50 AM

in HTML:

put this in your <HEAD> tag:

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
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;
}

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];}}
}

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;
}

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>

then put this in your <BODY> tag:

Code:

[img]image1.jpg[/img]

if you want the page to preload the second image, put this in the start <BODY> tag.

Code:

onLoad="MM_preloadImages('image2.jpg')"

The entire thing at it's barebones will look like this:

Code:

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
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;
}

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];}}
}

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;
}

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>
</head>

<body onLoad="MM_preloadImages('image2.jpg')">
[img]image1.jpg[/img] 
</body>
</html>

if you have any questions, just ask.

**captainsaneo** · 10-06-2004, 03:40 AM

ok so i have two images, where do i insurt those urls into the html?

**madboyv1** · 10-06-2004, 06:21 AM

<body onLoad="MM_preloadImages('image2.jpg')">
[img]image1.jpg[/img]
</body>

I highlighted where you need to identify the image URL's in green and blue.

you can change the border if you want and you can have an alternate text pop up if you want, both of these functions are optional and can be taken out if you want to.

Oh, and I suggest renaming the rollover to something else than "Image1", which is in red.

**tricky_linux** · 10-06-2004, 03:40 PM

wooooooooo
that's a hail lot of code
i will go with css, save you bunch of time and space!!
all you have to use is css's pseudo-class: a:hover { }
more info is at http://www.w3schools.com

**madboyv1** · 10-12-2004, 03:11 AM

Originally Posted by tricky_linux

wooooooooo
that's a hail lot of code
i will go with css, save you bunch of time and space!!
all you have to use is css's pseudo-class: a:hover { }
more info is at http://www.w3schools.com

yeah that works, but I am more of a hard coding fanatic. At least I don't declare EVERYTHING in an xml module in page... that is just unneccessary code there... let the browser just set the defaults.

**ruptured.bizhat.com** · 10-26-2004, 09:51 PM

the best place to get free html code for simple html and css 's is '

www.dynamicdrive.com

simple, free and they have tons of scripts which you can edit to suit your needs!

Thread: rollovers

Thread Tools

Display

rollovers

DHMTL made easy for the beginner cuz we all began somewhere

Bookmarks

Bookmarks

Posting Permissions