473,840 Members | 1,475 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Cross Browser image transitions

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="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

Feb 25 '06 #1
1 3158

Dan wrote:
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.


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.

Feb 25 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
1368
by: Julia Briggs | last post by:
Is there a <a href="javasc... approach to switch between two images inside a div tag so it doesn't slightly flicker when clicked on, and transitions between images smoothly in Netscape? I can get something to work in IE, but in Netscape there is a slight but obvious flicker. Is there some other way to do this or some solution to making this work? Try my Google referenced images below in IE and Netscape/Firefox and see what I am talking...
1
3700
by: cjl | last post by:
Hey all: I'm trying to write a cross-browser (IE and firefox) event handler for the mousewheel. Basically my web app is an image viewer, so if you scroll "down" with the wheel the next image should be displayed and if you scroll "up" the previous image should be displayed. So far I have: function handleMouseWheel(e)
3
1166
by: tommy_razz | last post by:
is there a good method to fade image in a simple way in a server control without using flash or other proprietor software ?
2
4499
by: rbanerji | last post by:
I am building a BHO that is meant to popup a IHtmlPopup window on a mouse over image event. All the code works fine if the image is in the main Window. However if the image is in a frame then I get the following error: {"Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED))"} System.Exception {System.UnauthorizedAccessException}
2
1592
by: tascien | last post by:
question I have never been able to solve since the 90s... I want to find x, y location of a layer or an image, or any other item on a webpage. 1. It could be relatively or absolutely positioned. 2. It does not matter what browser the user is using. what's the correct javascript code?
2
1971
NoPeasHear
by: NoPeasHear | last post by:
I'm afraid of the answer I am going to get. I am working on my website on a Mac, and I don't know anything about making things work cross browser. Please dumb it down for me. One of the problem pages So, I can't get the page to render correctly in IE. It looks a little bad on the mac version (the little yellow dot in the top left corner is the "image"), but on the pc version it is horrible. On IE on the pc the image appears, but the...
2
11777
by: mattgarvin | last post by:
Hello, I need a piece of javascript that will allow a form to be submitted when Enter is pressed for IE6 and 7, Firefox 2, and recent versions of Safari. It is for a login page that has two textboxes: a "Login" and a "Password". The "Login Button" is actually a standard image with an onClick event handler to submit the form, because we use a mouseover effect. (That is, it is not INPUT TYPE="IMAGE" but rather an IMAGE tag with...
13
3396
by: Jeff | last post by:
We have an intranet website that currently uses ActiveX but we need to make it cross-browser compatible and also get around the problems we've been having with making it work with IE7 and Vista. We decided to write an external application to do the work from the client side. We are not sure how the web page can call the app though with parameters. For example, we want to do similar to what the MSDN Library and Audible are doing with...
16
2990
by: Stevo | last post by:
I'm guessing this is a laughably obvious answer to many here, but it's not to me (and I don't have a server or any knowledge of PHP to be able to try it). It's not strictly a PHP question, but something that PHP guys would know the answer to. I can't think of a more appropriate forum to try. I've heard the ASP and JSP guys aren't as friendly ;-) Let's say we have a HTML page from domain example.com, and that HTML page makes a request to...
0
9698
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10916
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10598
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10657
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10299
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7836
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7022
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
2
4071
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3136
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.