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').va lue)">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:cir cle
in</option>
<option value="revealTrans(transition=3,duration=5)">3:cir cle
out</option>
<option value="revealTrans(transition=4,duration=5)">4:wip e up</option>
<option value="revealTrans(transition=5,duration=5)">5:wip e
down</option>
<option value="revealTrans(transition=7,duration=5)">7:wip e
left</option>
<option value="revealTrans(transition=8,duration=5)">8:ver tical
blinds</option>
<option value="revealTrans(transition=9,duration=5)">9:hor izontal
blinds</option>
<option value="revealTrans(transition=10,duration=5)">10:c heckerboard
across</option>
<option value="revealTrans(transition=11,duration=5)">11:c heckerboard
down</option>
<option
value="revealTrans(transition=12,duration=5)">12:d issolve</option>
<option value="revealTrans(transition=13,duration=5)">13:s plit-in
vertical</option>
<option value="revealTrans(transition=14,duration=5)">14:s plit-out
vertical</option>
<option value="revealTrans(transition=15,duration=5)">15:s plit-in
horizontal</option>
<option value="revealTrans(transition=16,duration=5)">16:s plit-out
horizontal</option>
<option value="revealTrans(transition=17,duration=5)">17:s trips-down
left</option>
<option value="revealTrans(transition=18,duration=5)">18:s trips-up
left</option>
<option value="revealTrans(transition=19,duration=5)">19:s trips-down
right</option>
<option value="revealTrans(transition=20,duration=5)">20:s trips-up
right</option>
<option value="revealTrans(transition=21,duration=5)">21:r andom
horizontal bars</option>
<option value="revealTrans(transition=22,duration=5)">22:r andom
vertical bars</option>
<option
value="revealTrans(transition=23,duration=5)">23:r andom</option>
</select>
</div>
</body>
</html>
If anyone could help me with these problems it would be very much
appreciated!
Thanks
Dan
