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="JavaS cript">
var imgtran = "blendTrans(dur ation=5)";
var urla=new Array("Raptor.j pg","Aurora.jpg ");
var trana=new Array("","");
var disa=new Array("Red Image","Blue Image")
function tran(imgtran) {
if(imgtran == ""){
var imgtran = "blendTrans(dur ation=5)";
}
var imgname = document.getEle mentById("img") .name;
if(imgname == "blue"){
oDiv.style.filt er=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.getEle mentById("img") .bgColor = "#FF0000";
document.getEle mentById("img") .name = "red";
oDiv.filters[0].play();
}
}
if(imgname == "red"){
oDiv.style.filt er=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.getEle mentById("img") .bgColor = "#0000FF";
document.getEle mentById("img") .name = "blue";
oDiv.filters[0].play();
}
}
}
</SCRIPT>
</head>
<body>
<DIV ID="oDiv" style="width:20 0;height:200;">
<table width="200" name="blue" id="img" height="200" border="0"
bgcolor="#0000F F">
<tr>
<td></td>
</tr>
</table>
</DIV>
<BUTTON
onclick="tran(d ocument.getElem entById('select ').value)">Tran sition</BUTTON>
<select id="select" onchange="tran( this.value)">
<option value="" selected>select transition</a>
<option value="blendTra ns(duration=5)" >blend</option>
<option value="revealTr ans(transition= 0,duration=5)"> 0:box in</option>
<option value="revealTr ans(transition= 1,duration=5)"> 1:box out</option>
<option value="revealTr ans(transition= 2,duration=5)"> 2:circle
in</option>
<option value="revealTr ans(transition= 3,duration=5)"> 3:circle
out</option>
<option value="revealTr ans(transition= 4,duration=5)"> 4:wipe up</option>
<option value="revealTr ans(transition= 5,duration=5)"> 5:wipe
down</option>
<option value="revealTr ans(transition= 7,duration=5)"> 7:wipe
left</option>
<option value="revealTr ans(transition= 8,duration=5)"> 8:vertical
blinds</option>
<option value="revealTr ans(transition= 9,duration=5)"> 9:horizontal
blinds</option>
<option value="revealTr ans(transition= 10,duration=5)" >10:checkerboar d
across</option>
<option value="revealTr ans(transition= 11,duration=5)" >11:checkerboar d
down</option>
<option
value="revealTr ans(transition= 12,duration=5)" >12:dissolve</option>
<option value="revealTr ans(transition= 13,duration=5)" >13:split-in
vertical</option>
<option value="revealTr ans(transition= 14,duration=5)" >14:split-out
vertical</option>
<option value="revealTr ans(transition= 15,duration=5)" >15:split-in
horizontal</option>
<option value="revealTr ans(transition= 16,duration=5)" >16:split-out
horizontal</option>
<option value="revealTr ans(transition= 17,duration=5)" >17:strips-down
left</option>
<option value="revealTr ans(transition= 18,duration=5)" >18:strips-up
left</option>
<option value="revealTr ans(transition= 19,duration=5)" >19:strips-down
right</option>
<option value="revealTr ans(transition= 20,duration=5)" >20:strips-up
right</option>
<option value="revealTr ans(transition= 21,duration=5)" >21:random
horizontal bars</option>
<option value="revealTr ans(transition= 22,duration=5)" >22:random
vertical bars</option>
<option
value="revealTr ans(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
