469,352 Members | 2,150 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,352 developers. It's quick & easy.

image transition

I wrote a simple script for image rotation.

now i need to have some transition effect betwean images in JS

What do you suggest ?

Thank you
Apr 16 '06 #1
14 5697
Gale wrote:
I wrote a simple script for image rotation.
URL? [tm]
now i need to have some transition effect betwean images in JS
It is not a matter of the programming language, but of the DOM.
What do you suggest ?


I suggest you visit

<URL:http://pointedears.de/scripts/test/dom/img-transition>

and

<URL:http://msdn.microsoft.com/workshop/author/filter/filters.asp>
PointedEars
Apr 16 '06 #2

Gale wrote:
I wrote a simple script for image rotation.

now i need to have some transition effect betwean images in JS

What do you suggest ?


You are much more likely to get a good answer if you can provide a
working example of what you have so far and describe what type of
transition you have in mind.

There are many possible transition effects. IE browsers have a few
transitions built in, but most other browsers do not. You usually can
use these IE transitions without harm - they just do not show up for
browsers that do not support them.

Perhaps the best way to handle this sort of thing is to use the XML
language SMIL, which has a huge number of simple to elaborate
transitions built in, and they can be precisely timed. However, most
browsers do not support SMIL yet. However recent versions of the Real
Player have SMIL support built in. This would not be a good choice for
a general web page, because many people do not have a recent Real
player installed or another player or lesser known browser that will
support it. However, it might be an option for a private page or a
network.

Some dhtml effects that rely on javascript are sometimes possible, such
as moving your image off the screen, hiding the image after a set time,
making the image grow larger or smaller, etc. I do not know if you
would consider any such effects as a type of transition that you have
in mind.

Apr 16 '06 #3

cwdjrxyz wrote:
Perhaps the best way to handle this sort of thing is to use the XML
language SMIL, which has a huge number of simple to elaborate
transitions built in, and they can be precisely timed. However, most
browsers do not support SMIL yet. However recent versions of the Real
Player have SMIL support built in. This would not be a good choice for
a general web page, because many people do not have a recent Real
player installed or another player or lesser known browser that will
support it. However, it might be an option for a private page or a
network.


I have a page written in SMIL at http://www.cwdjr.net/ram/realmix.ram
that uses several of the SMIL transitions. The .ram url I give is just
a Real redirector file that forces the Real player to open the actual
SMIL xml page that has an extension .smil. The reason for this is that
Apple's QT player has a bit of SMIL support, but not the nearly full
SMIL 2 support needed for many SMIL pages. Depending on how you set up
your players, the .smil page could go to the QT player rather than the
Real player if you do not use the .ram redirector file.

The most important thing is that you have the most recent Real player,
or perhaps one or two before it. The browser does not matter, as the
SMIL is processed within the Real player. In fact, you may even be able
to bring up the Real player without first connecting to the web and
enter the url of the .ram. The player may then connect. This page will
work on a very good 56 K dialup connection. However a broadband
connection is best. For a slow dialup connection that can not keep up
with the page, often the page will work properly the second time. The
Real player has a special Real cache. If you call video, images, music,
etc urls with chttp... rather than http..., as I do here, this signals
the Real player to store in the Real cache, which reduces the bit rate
needed on a second pass. It may take a bit of time for the page to
start, as much has to be set up after you connect to it.

Apr 16 '06 #4
Thomas 'PointedEars' Lahn wrote:

I suggest you visit

<URL:http://pointedears.de/scripts/test/dom/img-transition>

and

<URL:http://msdn.microsoft.com/workshop/author/filter/filters.asp>
PointedEars


i need some simple effect that will work in ie, firefox and opera
Apr 16 '06 #5
Gale wrote:
Thomas 'PointedEars' Lahn wrote:
I suggest you visit

<URL:http://pointedears.de/scripts/test/dom/img-transition>

and

<URL:http://msdn.microsoft.com/workshop/author/filter/filters.asp>
[...]


i need some simple effect that will work in ie, firefox and opera


I need more popcorn.

<URL:http://jibbering.com/faq/>
PointedEars
Apr 16 '06 #6

Gale wrote:
i need some simple effect that will work in ie, firefox and opera


Go to http://www.dynamicdrive.com and start looking near the bottom of
the page under document effects. They have a small number of transition
effects that work on IE, Firefox, and Opera. Also you can view the
effects when you select one. If you like any of them, they have code to
copy and instructions. Most of these codes are very easy to install. I
have no idea if these are what you have in mind, but off hand they are
the only ones I can recall that are ready made and easy to install and
that will work on all of the browsers you mentioned. The codes at
DynamicDrive are free so long as you leave their credits in the code.

Apr 17 '06 #7
cwdjrxyz wrote:
Gale wrote:
i need some simple effect that will work in ie, firefox and opera


Go to http://www.dynamicdrive.com and start looking near the bottom of
the page under document effects. [...]


"Let's go," said the blind leading the other blind before they crossed
the highway together.
PointedEars, amused
Apr 17 '06 #8

cwdjrxyz wrote:
Gale wrote:
i need some simple effect that will work in ie, firefox and opera


Go to http://www.dynamicdrive.com and start looking near the bottom of
the page under document effects. They have a small number of transition
effects that work on IE, Firefox, and Opera. Also you can view the
effects when you select one. If you like any of them, they have code to
copy and instructions. Most of these codes are very easy to install. I
have no idea if these are what you have in mind, but off hand they are
the only ones I can recall that are ready made and easy to install and
that will work on all of the browsers you mentioned. The codes at
DynamicDrive are free so long as you leave their credits in the code.


I checked the last six effects at the bottom of the page under document
effects. They all work on the latest versions of Firefox, Netscape,
Mozilla, Opera, and IE browsers. They even work on the old Netscape
4.8, but you have to take the address for the effect to Netscape 4.8 to
see them, because you can not view the DynamicDrive main page properly
with the 4.8. Of course the 4.8 is all but gone.

The code appears to be quite old. However most browsers are rather
forgiving for the use of old code. If you should decide to use one of
these effects, someone here likely can help you update the code, if
that matters to you. A few of the things I noticed were that type was
not used in the script and type tags and evaluate was used in the
script when something else likely is possible and more up to date. Also
we do not need to hide script from old browsers these days. Of course
many, especially those who write commercial web pages, do not like the
types of dynamic effects shown at DynamicDrive for their pages. For a
personal page, use what you like. You know best what your friends and
relatives who view your page might like. "Different strokes for
different folks"

Apr 17 '06 #9

"Thomas 'PointedEars' Lahn" <Po*********@web.de> kirjoitti viestissä
news:16*****************@PointedEars.de...
cwdjrxyz wrote:
Gale wrote:
i need some simple effect that will work in ie, firefox and opera


Go to http://www.dynamicdrive.com and start looking near the bottom of
the page under document effects. [...]


"Let's go," said the blind leading the other blind before they crossed
the highway together.
PointedEars, amused


.... and there was a guy near them, lying on the asphalt in the middle of the
road and examining it with a microscope. Thinking that the whole road was
his.

optimistx, also amused (today)..
Apr 17 '06 #10
cwdjrxyz wrote:
Gale wrote:
i need some simple effect that will work in ie, firefox and opera


Go to http://www.dynamicdrive.com and start looking near the bottom of
the page under document effects. They have a small number of transition
effects that work on IE, Firefox, and Opera. Also you can view the
effects when you select one. If you like any of them, they have code to
copy and instructions. Most of these codes are very easy to install. I
have no idea if these are what you have in mind, but off hand they are
the only ones I can recall that are ready made and easy to install and
that will work on all of the browsers you mentioned. The codes at
DynamicDrive are free so long as you leave their credits in the code.

Thank you :)
Apr 17 '06 #11

In article <97****************@PointedEars.de>,
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
...
I suggest you visit

<URL:http://pointedears.de/scripts/test/dom/img-transition>


Is this page supposed to work in IE6? All I see is the word "About"
and a couple small purple blobs.

--

Warren S. Sarle SAS Institute Inc. The opinions expressed here
sa****@unx.sas.com SAS Campus Drive are mine and not necessarily
(919) 677-8000 Cary, NC 27513, USA those of SAS Institute.
Apr 17 '06 #12
Warren Sarle wrote:
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
I suggest you visit

<URL:http://pointedears.de/scripts/test/dom/img-transition>
Is this page supposed to work in IE6?


Not in the sense that the image transition effect would work there. The
solution is Gecko-specific and W3C DOM Level 2 Style-specific, therefore
I included the second URL for the IE-specific solution (transition filters)
in my followup. However, the document and script should not break in IE,
the feature tests should prevent that.
All I see is the word "About"
As you should.
and a couple small purple blobs.


What exactly do you mean by that?
PointedEars
Apr 17 '06 #13
"Thomas 'PointedEars' Lahn" <Po*********@web.de> wrote in message
news:13****************@PointedEars.de...
<URL:http://pointedears.de/scripts/test/dom/img-transition>

...
All I see is the word "About"

As you should.
and a couple small purple blobs.

What exactly do you mean by that?


http://img159.imageshack.us/img159/5...titled18rg.gif
Apr 18 '06 #14
Warren Sarle wrote:
"Thomas 'PointedEars' Lahn" [...] wrote [...]:
<URL:http://pointedears.de/scripts/test/dom/img-transition>

...
All I see is the word "About"

As you should.
and a couple small purple blobs.

What exactly do you mean by that?


http://img159.imageshack.us/img159/5...titled18rg.gif


So it works as designed. Despite the black space between the "items" you
see, this is only _one_ image to which no transition effect is applied if
you use IE. However, it is possible to extend the test case to work in IE,
too, using the documentation at MSDN I pointed to.
PointedEars
Apr 18 '06 #15

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Colin Young | last post: by
3 posts views Thread by Alexli | last post: by
2 posts views Thread by Alberto | last post: by
1 post views Thread by Dan | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.