hey, i am looking to create a similar rollover effect that patchou uses on his own website and can be seen here:

http://www.msgplus.net/community.php

when you hover over the links in the green "Affiliates and Useful links" box.

Also on the Windows Vista website on the left navigation pane, roll your mouse over the links, how do i produce that effect?

http://www.windowsvista.com

quote:

---

Originally posted by -!Felu!-

code:

---

<a title="What ever you want to display">Text</a>

---

---

i'm looking to make that rollover effect that you see in both of those websites when you hover over those links. i know it is more complicated than using rollover images (or at least it seems that way) here is a screenshot of what i mean:

http://img474.imageshack.us/img474/8355/untitled31bd.png

here's the code:

code:

---

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

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','(rollover image)',1)"><img src="(First Image)" name="Image1" width="" height="" border="0" id="Image1" /></a>

---

thanks, i'm at work now ,but will try it when i get home

quote:

---

Originally posted by xJ +
here's the code:

code:

---

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','(rollover image)',1)">[img](First Image)[/img]

---

Change # to the page you want to direct to.
Change (rollover image) to the image you want to see when it's rollovered.
Change (first image) to the image you want to see when the page is loaded.

---

code:

---

#hoverme{
background-image: url("http://normal/image");
}

#hoverme :hover{
background-image: url("http://on/hover/image");
}

---

code:

---

<a href="location" id="hoverme">mooo</a>

---

quote:

---

Originally posted by -dt-

quote:

---

Originally posted by xJ +
here's the code:

code:

---

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','(rollover image)',1)">[img](First Image)[/img]

---

Change # to the page you want to direct to.
Change (rollover image) to the image you want to see when it's rollovered.
Change (first image) to the image you want to see when the page is loaded.

---

and where do you define the MM_swapImage and MM_swapImgRestore functions?
!Felu! and  xj+ stop ripping code you have not a clue what it does

---

quote:

---

Originally posted by xJ +

MM_swapImage » Change back to the second image that is used to rollover
MM_swapImgRestore » Change back to the main image.

And you have quoted the wrong codes I posted. (Smilie)

---

code:

---

MM_swapImageReference
Error on line 1: MM_swapImage is not defined

MM_swapImgRestore
ReferenceError on line 1: MM_swapImgRestore is not defined

---