Simple image transition effect

[daveh]

Hi

I have a design for a website that I'm working on, that has a side menu bar. In this bar, there are a number of links to different parts of the site. I currently have a OnMouseOver on each of them, that runs a piece of JavaScript to swap an image to be a GIF that describes further that website. OnMouseOff returns the GIF displayed to the standard site logo. The JavaScript goes a bit like this...

SEPERATE .JS file.....
***************************************
var staff = new Image();
var clubs = new Image();
staff.src = "logos/staff.gif";
clubs.src = "logos/clubs.gif";

function logoSwap(picimage)
{
eval("document['logospace'].src = " + picimage + ".src"
}
***************************************

This works fine. What I'd like to do is to add some VERY simple transition effect from image to image. I have no idea if this is possible with JavaScript. All I'd want is some sort of effect so the image change can happen smoothly. The logo is circular, so a type of BOX IN or BOX OUT like in Powerpoint would be great, but any ideas on how to achieve some sort of effect using JavaScript would be greatly appreciated.

The type of JS file I printed a bit out of above is basically the limits of my Java skills at present.

Kindest regards,
David.

 

[jemminger]

no, not with core js, but IE has some CSS filters that produce similar effects

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/filter.asp

http://msdn.microsoft.com/workshop/author/dhtml/howto/applyingtransition.asp?frame=true

=========================================================
while (!succeed) try();
-jeff

 

[daveh]

Thanks, will have a look at those.

Dave.

 

[daveh]

I've been spending AGES (yes, I'm not too hot on this type of thing, so AGES!) looking at these, and I think these are probably what I need, thanks. If I wanted a simple onLoad transition on an image, there is plenty of example code, but unfortunately my needs are a bit more complicated, and try as I have to edit the codes given and play around, nothing seems to work. I was wondering if anyone could help me.

At present, as you can see from the example code in my first post, there is a very simple logoswap procedure that runs onMouseOver to change the image to one relating to the menu item, and then OnMouseOff to return it to the general logo. What I'd like is for there to be no transition on load of the page, but everytime the image is changed by EITHER a OnMouseOver or OnMouseOff event, for there to be a transition instead of a direct cut between the images. This suggests to me that the code should either be part of the logoswap function, or be a seperate function called by the logoswap function.

There are many different transition effects, available, but let's say we use the following one, defined in the img tag on the page...

<img src=&quot;logos/logo.gif&quot; name=&quot;logospace&quot; ID=&quot;logospace&quot; width=&quot;116&quot; height=&quot;90&quot; STYLE=&quot;filterrogidXImageTransform.Microsoft.Blinds(direction='down', bands=2);
visibility:visible&quot; />

In my JavaScript, I have the function...
function applyTransition (oImg)
{
oImg.filters(0).Apply();
oImg.style.visibility = &quot;visible&quot;;
oImg.filters(0).Play();
}

My question is this... how do I get this to all work through the MouseOver/Off events, and as part of the img.src changing each time (which is obviously how the logoswap function works. These events are controlled as follows...

onmouseover=&quot;logoSwap('staff');&quot; onMouseOut=&quot;logoSwap('logo');&quot;

I realise its quite simple, but I only have a rudimentary knowledge of JavaScript, and it would be great to be able to get this working!!!

Cheers everyone,
Dave.