How to make Easing effect for Dreamweaver Image Rollovers?

Question

How to make Easing effect for Dreamweaver Image Rollovers?

2.9k Views Asked by Django Anonymous At 16 April 2025 at 23:08

When i add image rollover effect using dreamweaver, dreamweaver adds this piece of code as javascript:-

<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(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>

And this in its body onload:-

<body onload="MM_preloadImages('aim-hover.png')">

And this for image rollover:-

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','aim-hover.png',1)"><img src="aim.png" name="Image1" width="30" height="30" border="0" id="Image1" /></a>

Doing this makes the rollover effect, which switches between images.

Now my question is:- How i can add ease-in ease-out effect for these images?

May be through jquery or pure Javascript......

As in CSS we do something like this for ease

div {
    position:relative;
    width:240px;
    height:100px;
    background-color:red;
    -o-transition:background-color 200ms ease-in-out;
    -moz-transition:background-color 200ms ease-in-out;
    -webkit-transition:background-color 200ms ease-in-out;
    transition:background-color 200ms ease-in-out;
}
div:hover {
    background-color:blue;
}

<div></div>

Original Q&A

There are 1 best solutions below

**Krazer** · Answer 1

Are you looking for a specifically (cross-platform) Javascript solution?

If not, you can easily do it in pure CSS3. Although IE has no love for transitions. D:

You can try setting the CSS like so:

div.roller { width: 50px; height: 50px; border: solid 1px green;}

div.roller div { -webkit-transition: all 1s ease-in-out; width: 50px; height: 50px; }

div.off, div.roller:hover div.over { opacity: 1.0; }

div.roller:hover div.off, div.over { opacity: 0; }

.off { background-color: red; position: absolute;}

.over { background-color: yellow; }

Add the browser specific prefixes for transitions, I just used -webkit- for convenience.

You can set your images as the background of the .off and .over divs, embed them inside, or even use img tags instead of div tags.

Make sure to set the element with your initial up state, .off, to position: absolute so it stacks on top of the down state, .over.

And the html like so:

<div class="roller" >
    <div class="off">off</div>
    <div class="over">over</div>
</div>

Fiddle with it here.

How to make Easing effect for Dreamweaver Image Rollovers?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in DREAMWEAVER

Related Questions in ROLLOVER-EFFECT

Trending Questions

Popular # Hahtags

Popular Questions