Cross Browser image transitions

D

Dan

Hi,

I was wondering if anyone could come up with a cross browser image
transition that I could use... I have already made one that works in IE
but i know it doesn't work in Mozilla Firefox.

Below is the script I have made, there is only one error with it
(besides compatabilty), the fact that you can make the images
transition even when there is already a transition occuring, I have
tried to compensate for this, but it doesn't work... if someone could
help me with this aswell it would be appreciated.

<html>
<head>
<title>Image Transitions</title>

<SCRIPT language="JavaScript">
var imgtran = "blendTrans(duration=5)";
var urla=new Array("Raptor.jpg","Aurora.jpg");
var trana=new Array("","");
var disa=new Array("Red Image","Blue Image")

function tran(imgtran) {

if(imgtran == ""){
var imgtran = "blendTrans(duration=5)";
}

var imgname = document.getElementById("img").name;

if(imgname == "blue"){
oDiv.style.filter=imgtran;
// Make sure the filter is not playing.
// This is the part of the script that does not work
if (oDiv.filters[0].status != 2) {
oDiv.filters[0].apply();
document.getElementById("img").bgColor = "#FF0000";
document.getElementById("img").name = "red";
oDiv.filters[0].play();
}
}
if(imgname == "red"){
oDiv.style.filter=imgtran;
// Make sure the filter is not playing.
// This is the part of the script that does not work
if (oDiv.filters[0].status != 2) {
oDiv.filters[0].apply();
document.getElementById("img").bgColor = "#0000FF";
document.getElementById("img").name = "blue";
oDiv.filters[0].play();
}
}
}
</SCRIPT>
</head>
<body>
<DIV ID="oDiv" style="width:200;height:200;">
<table width="200" name="blue" id="img" height="200" border="0"
bgcolor="#0000FF">
<tr>
<td></td>
</tr>
</table>
</DIV>
<BUTTON
onclick="tran(document.getElementById('select').value)">Transition</BUTTON>
<select id="select" onchange="tran(this.value)">
<option value="" selected>select transition</a>
<option value="blendTrans(duration=5)">blend</option>
<option value="revealTrans(transition=0,duration=5)">0:box in</option>
<option value="revealTrans(transition=1,duration=5)">1:box out</option>
<option value="revealTrans(transition=2,duration=5)">2:circle
in</option>
<option value="revealTrans(transition=3,duration=5)">3:circle
out</option>
<option value="revealTrans(transition=4,duration=5)">4:wipe up</option>
<option value="revealTrans(transition=5,duration=5)">5:wipe
down</option>
<option value="revealTrans(transition=7,duration=5)">7:wipe
left</option>
<option value="revealTrans(transition=8,duration=5)">8:vertical
blinds</option>
<option value="revealTrans(transition=9,duration=5)">9:horizontal
blinds</option>
<option value="revealTrans(transition=10,duration=5)">10:checkerboard
across</option>
<option value="revealTrans(transition=11,duration=5)">11:checkerboard
down</option>
<option
value="revealTrans(transition=12,duration=5)">12:dissolve</option>
<option value="revealTrans(transition=13,duration=5)">13:split-in
vertical</option>
<option value="revealTrans(transition=14,duration=5)">14:split-out
vertical</option>
<option value="revealTrans(transition=15,duration=5)">15:split-in
horizontal</option>
<option value="revealTrans(transition=16,duration=5)">16:split-out
horizontal</option>
<option value="revealTrans(transition=17,duration=5)">17:strips-down
left</option>
<option value="revealTrans(transition=18,duration=5)">18:strips-up
left</option>
<option value="revealTrans(transition=19,duration=5)">19:strips-down
right</option>
<option value="revealTrans(transition=20,duration=5)">20:strips-up
right</option>
<option value="revealTrans(transition=21,duration=5)">21:random
horizontal bars</option>
<option value="revealTrans(transition=22,duration=5)">22:random
vertical bars</option>
<option
value="revealTrans(transition=23,duration=5)">23:random</option>
</select>
</div>
</body>
</html>

If anyone could help me with these problems it would be very much
appreciated!

Thanks

Dan
 
C

cwdjrxyz

Dan said:
Hi,

I was wondering if anyone could come up with a cross browser image
transition that I could use... I have already made one that works in IE
but i know it doesn't work in Mozilla Firefox.

Below is the script I have made, there is only one error with it
(besides compatabilty), the fact that you can make the images
transition even when there is already a transition occuring, I have
tried to compensate for this, but it doesn't work... if someone could
help me with this aswell it would be appreciated.
Click to expand...

I believe that IE and old WebTV were about the only browsers that had
built in transistions. IE has several filters, but these, for the most
part, are not supported by other browsers. You might find some image
transition effect that you like at http://www.dynamicdrive.com that is
based on script written to work on most common browsers.

However the best way to do for this sort of thing is to write the page
in SMIL 2. SMIL is an XML language that is designed for media
presentations and has all sorts of built in transitions, fades, etc.,
and everything can be timed precisely. Most browsers do not support W3C
SMIL 2 yet. However the recent Real players have nearly complete
support of SMIL built in. Thus if you have the Real player, it does not
matter what browser you have on your computer. I have a SMIL demo page
that illustrates some motion effects, transitions, fades, etc using
images, videos, and music. SMIL really is a very powerful language for
media. Go to http://www.cwdjr.info/media/playersRoot.php and select the
link REAL(SMIL) at the top of the page if you have a recent Real
player.

Of course when you use elaborate media effects, you can not expect
everyone to see them. The viewer may not have a needed player
installed, they may have javascript turned off, etc. Thus you need to
write the code so that the page degrades gracefully if something is
missing on the viewing browser.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I Need Help with making a function that draws in a canvas using location data. 1
Survey details won't go through using php, ajax, Mysql 0
Slideshow not working properly 2
getElementById and Firefox 4
How do I fix this issue in sqaurespace code block? 1
Image upload not working in browser 4
Image not changing between "mute" & "un-mute" images. 5
How to stop an animated image from sticking to top of page? 2

Members online

No members online now.
Total: 36 (members: 0, guests: 36)
Robots: 293

Forum statistics

Threads
473,997
Messages
2,570,239
Members
46,827
Latest member
DMUK_Beginner

Latest Threads

Top