# 3D mouse-over effect on website buttons



## Dat (Apr 7, 2005)

Hi. Some websites have buttons that display shadow to look 3D when you mouse over. How do you do 3D mouse-over effect on website buttons ?


----------



## Rockn (Jul 29, 2001)

You need two images to do the mouseover effect one for the onMouseOver and one for the OnMouseOut event. It is done with some simple java script.


----------



## Dat (Apr 7, 2005)

Do you know the java script for the mouse-over effect buttons ?
Can it be a html or php instead java?


----------



## AbvAvgUser (Oct 3, 2002)

Here's the code for rollover images. This code was made by 1st Page 2000 which is downloaded from http://www.evrsoft.com

```
!-- Rollover Image Script - Place within <head> tag -->
<script language="JavaScript" type="text/javascript">
<!-- Hide from older browsers
function SwitchImg()
{ //start
  var rem, keep=0, store, obj, switcher=new Array, history=document.Data;
    for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {
    	store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];
    if ((store.indexOf('document.layers[')==0 && document.layers==null) ||
        (store.indexOf('document.all[')==0 && document.all==null))
         store = 'document'+store.substring(store.lastIndexOf('.'),store.length);
         obj = eval(store);
    if (obj != null) {
   	   switcher[keep++] = obj;
      switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];
      obj.src = SwitchImg.arguments[rem+2];
  } }
  document.Data = switcher;
} //end

function RestoreImg()
{ //start
  if (document.Data != null)
    for (var rem=0; rem<(document.Data.length-1); rem+=2)
      document.Data[rem].src=document.Data[rem+1];
} //end

// end hiding contents -->
</script>

<a href="mypage.html" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.mypage','document.mypage','imgA.jpg')"><img src="imgB.jpg" name="mypage" alt="My Page" border="0"></a>
```


----------



## namenotfound (Apr 30, 2005)

Rockn said:


> You need two images to do the mouseover effect one for the onMouseOver and one for the OnMouseOut event. It is done with some simple java script.


I once made a mouse-over code using just CSS and HTML, no JS 
I think it was the first of its kind :up: 
It was something like this:

a.inout { background-image:url(out.gif); }
a:hover.inout { background-image:url(in.gif); }

Then in the body of the html page I had



Had spacer.gif a 1x1 pixel transparent image

It worked out pretty good


----------



## drdrew1469 (Nov 30, 2000)

namenotfound - that's my kind of coding right there! nice. i've been looking for ways to dump java completely if at all possible, and this is a good one. i have an onclick event that shows/hides tables (like explorer does with folders) but maybe something like this to mimic that behavior by changing the classes' attributes is a viable option. not sure, will check on that.

thanks for the code,

drew


----------



## namenotfound (Apr 30, 2005)

drdrew1469 said:


> namenotfound - that's my kind of coding right there! nice. i've been looking for ways to dump java completely if at all possible, and this is a good one. i have an onclick event that shows/hides tables (like explorer does with folders) but maybe something like this to mimic that behavior by changing the classes' attributes is a viable option. not sure, will check on that.
> 
> thanks for the code,
> 
> drew


I'm glad I could help someone 
I'm not a big fan of using a lot of JS when a few lines of CSS can do a similar job.


----------

