Shoutbox

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>

---

---

That provides a plain text link...

I think the Vista website uses CSS to create the effect, but I'm not very skilled in that subject . The image is just replaced when the mouse is rolled over it. Many other members here are skilled in CSS, and I'm sure they'd be willing to help you

Alternatively

This effect can also be created using Javascript - Just search google for HTML Rollover images and I'm sure you will find plenty of results

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>

---

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.


Edit: Thanks -dt- for the reminder. There's the complete code. And the code uses javascript.

---

-dt- » Can't help it. I've been using this code when I want to add in a rollover image. And I rarely use css coding.

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.

---

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

use the css psuedo :hover

css

code:

---

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

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

---

and the html

code:

---

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

---

you may have to specify css width and height for the image but heh

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

---

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

And you have quoted the wrong codes I posted.

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)

---

how about i put this in simple terms.

MM_swapImage and MM_swapImgRestore are javascript functions right? , they aren't default functions so they must be defined somewhere... yet you didnt include them in your post? hence stop copying and pasteing stuff


javascript console output

code:

---

MM_swapImageReference
Error on line 1: MM_swapImage is not defined

MM_swapImgRestore
ReferenceError on line 1: MM_swapImgRestore is not defined

---

---

edit: thats some damm ugly code you added