Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Exclamation Changing the .src of an object using document.getElementById("")

    there was a thread about it here but i didnt know how to apply it.
    Applying filters..

    basically i want this transition (timing)
    Code:
    blendtrans(duration=1.75)">
    but i would like it on on object. (i.e i want an specific image on the page to fade in when the page loads)

    how can i do this? (even if it only works for I.E 5.5+ users)

    *EDIT*
    i basically want the red rectangles to fade in (or blendtrans in, whatever) onload

    www.enviromark.ca/english/index.html
    Last edited by canadianjameson; 11-01-2004 at 10:15 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I got it working, now i just need a final tweak.

    i have this
    Code:
    <script type="text/javascript">
    function fadeIn() {
    var fObj = document.getElementById("fDiv");
    if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Apply(); }
    fDiv.style.visibility="visible";
    if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Play(); }
    }
    </script>
    
    <body onload="fadeIn">
    ....
    <td><a href="index.html" onmouseover="on1();" onmouseout="off1();"><img src="images/butt_1_red.gif" width="23" height="37" border="0" name="a" id="fDiv" style="visibility:hidden;filter:progid:DXImageTransform.Microsoft.Fade(1.5)"></a></td>
    this works. now the only thing i need to do is as follows.

    currently the script fades in the butt_1_red.gif.... but it fades it in after making it visible. I would like to have the script fade it in over another image (so it doesnt look like it pops out of nowhere and just fades in.

    the butt_1_red.gif has a black border and a red interior. i want to put a dummy image called butt_blank.gif that ONLY has the black border... but no red interior. then have the butt_1_red fade in in its place. this would maintain the black border and give the illusion of only the red middle fading in.

    you can see the images i'm talking about on the enviromark link above.

    how can i modify the script above to change the source of the image, then fade it in?
    Last edited by canadianjameson; 11-01-2004 at 09:46 PM. Reason: new idea
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Angry

    why wont anyone touch this thread?

    here's a thought as to how i would accomplish what i want to do, however i stress that i NEED some feedback.

    i need to change the .src of the image. i mean, a simple explanation of what i want is that i want to have one image fade in over another. doing this requires having one image in place, then changing the .src of the image and applying the fade in... or am i wrong.

    here's how it works now
    http://www.enviromark.ca/english/indexFadeTest.html

    any ideas?

    this is what i tried: i bolded what i added
    Code:
    <script type="text/javascript">
    function fadeIn() {
    var fObj = document.getElementById("fDiv");
    var turnOff = document.getElementById("blank");
    
    if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Apply(); }
    turnOff.style.display="none";  
    fDiv.style.visibility="visible";
    if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Play(); }
    }
    </script>
    
    <body onload="fadeIn()">
    
    ...
    <td><img src="images/butt_blank.gif" width="23" height="37" border="0" id="blank"><a href="index.html" onmouseover="on1();" onmouseout="off1();"><img src="images/butt_1_red.gif" width="23" height="37" border="0" name="a" id="fDiv" style="visibility:hidden;filter:progid:DXImageTransform.Microsoft.Fade(1.5)"></a></td>
    however this still shows a line going down the middle of the red image as it loads.... any ideas

    is my approach even going to do what i want it to? (which is maintain the black border while the red fades in)

    you can see the butt_blank.gif here if you need:
    http://www.enviromark.ca/english/images/butt_blank.gif
    Last edited by canadianjameson; 11-01-2004 at 10:49 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    <style type="text/css">
     .fade{ filter:alpha(opacity=0) }
    </style>
    
    <script type="text/javascript">
      function fadeIn(){
       fade = setTimeout('fadeIn()',50);
        for(var i=0; i<document.images.length; i++){
         var image = document.images[i];
          if(image.className.match(/fade/i) && image.filters.alpha.opacity < 100){
             image.filters.alpha.opacity = image.filters.alpha.opacity += 1;
          }  if(image.filters.alpha.opacity >= 100){ clearTimeout(fade) };
    status = image.filters.alpha.opacity; // TESTING PURPOSES ONLY.... PLEASE REMOVE
        }    
      }
    </script>
    </head>
    
    <body bgcolor="black" onload="fadeIn()">
    <img src="http://www.enviromark.ca/english/images/butt_1_red.gif" class="fade"><br>
    <img src="http://www.enviromark.ca/english/images/butt_1_red.gif" class="fade"><br>
    .....Willy
    Last edited by Willy Duitt; 11-02-2004 at 03:51 AM.

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thank you LORD

    thanks for the responce willy.

    its odd... it worked when i used it as you posted, but when i tried to put it into my page i got the following JS error.

    Error: 'filters.alpha.opacity' is a null or not an object'

    then beleive it or not somehow pressing previour error, then next actually causes an error in the dialog box and forces it to close.

    you killed my dialog box!!!

    hehe, here's my code:

    Code:
    ....
    <style type="text/css">
    .fade{ filter:alpha(opacity=0) }
    </style>
    
    <script type="text/javascript">
      function fadeIn(){
       fade = setTimeout('fadeIn()',50);
        for(var i=0; i<document.images.length; i++){
         var image = document.images[i];
          if(image.className.match(/fade/i) && image.filters.alpha.opacity < 100){
             image.filters.alpha.opacity = image.filters.alpha.opacity += 1;
          }  if(image.filters.alpha.opacity >= 100){ clearTimeout(fade) };
    // status = image.filters.alpha.opacity; // TESTING PURPOSES ONLY.... PLEASE REMOVE
        }    
      }
    </script>
    
    </head>
    
    <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" onload="postLoad();fadeIn()"><a name="top"></a>
    .....
    <td><a href="index.html" onmouseover="on1();" onmouseout="off1();"><img src="images/butt_1_red.gif" class="fade" width="23" height="37" border="0" name="a"></a></td>
    ....
    if you need more of my page code to figure out where the mistery error is comming from, let me know.

    Thanks again btw.

    p.s, is your script compatible with more than just I.E?
    Last edited by canadianjameson; 11-02-2004 at 04:32 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>46792</title>
    		<script type="text/javascript">
    			var txt = window.navigator.appName;
    			var ie = (txt == "Microsoft Internet Explorer") ? true : false;
    			var opera = (txt == "Opera") ? true : false;
    		</script>
    	</head>
    	<body>
    		<img id="img1" src="images/1.jpeg">
    		<img id="img2" src="images/2.jpeg">
    	</body>
    	<script type="text/javascript">
    		var images = new Array();
    		images[0] = document.getElementById("img1");
    		images[1] = document.getElementById("img2");
    
    		var opacity = 0.0;
    
    		for(var i = 0; i < images.length; i++)
    		{
    			if(ie)
    			{
    				images[i].style.filter="alpha(opacity=0)";
    			}
    			setOpacity(images[i],0.0);
    		}
    
    		function fade()
    		{
    			opacity += 0.1;
    
    			if(opacity > 0.9)
    			{
    				return;
    			}
    
    			for(i = 0; i < images.length; i++)
    			{
    				setOpacity(images[i],opacity);
    			}
    
    			setTimeout("fade()", 500);
    		}
    
    		function setOpacity(obj, val)
    		{
    			if(ie)
    			{
    				obj.filters.alpha.opacity = val * 100;
    			}
    			else
    			{
    				obj.style.MozOpacity = val;
    			}
    		}
    
    		fade();
    	</script>
    </html>
    Works in Firefox and IE, but not Opera. Why? Who the crap knows?

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    p.s, is your script compatible with more than just I.E?
    What happened to: "how can i do this? (even if it only works for I.E 5.5+ users)"

    I don't know what conflicts could have occured when you added my script to your document... But you will need to spend more than 20 minutes or so to debug your own scripts before asking me to delve thru all of your code which I am unfamilar with.... If you still have problems with it tommorrow, feel free to post back and if I have time, I will take a look...

    But, fading images cross-browser is too much of a PITA which is why most people probably shied away from this topic.... If hemebond script works for both Firefox and IE... I would suggest using that....

    .....Willy

  • #8
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I didn't post earlier because I've already posted similar scripts at least twice already in these forums, and it's very easy to do with a little research.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Please try the following



    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    <SCRIPT language=JavaScript>
    <!--

    time=1 // seconds
    moz=document.getElementById&&!document.all
    function startBlend(id,p){

    if(!moz){id.filters[0].Apply()}

    id.src = p

    if(!moz){id.filters[0].Play(time)}

    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>

    <IMG id="img1" src="butt_blank.gif" width="105" height="160" alt="" style="filter: progid:DXImageTransform.Microsoft.fade(duration=1, overlap=1)" onmouseover="startBlend(this,'butt_1_red.gif')" onmouseout="startBlend(this,'butt_blank.gif')">

    </BODY>
    </HTML>

    OR

    <SCRIPT language="javascript">
    <!--
    var blendtime=1.0 // blend time, in seconds
    var pausetime=2000 // pause time, in milliseconds

    function blendme2(id,n){
    document.getElementById(id).filters.blendTrans.Apply()
    document.getElementById(id).src = n
    document.getElementById(id).filters.blendTrans.Play(blendtime)
    }

    // add onload="blendme2()" to the opening BODY tag

    // -->
    </SCRIPT>

    <img id="divB" src="butt_blank.gif" style="filter:blendTrans()" onmouseover="blendme2(this.id,'butt_1_red.gif')" onmouseout="blendme2(this.id,'butt_blank.gif')">

    Last edited by Mr J; 11-02-2004 at 01:55 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Wow. Thanks guys for all your help. I've analysed all the scripts provided to me and decided that for the purposes of me learning i should try one last time to modify my original script to suit my needs. low and behold, i found a way to do exactly what i needed.

    i set the background of the table cell to a blank version of the red button i wanted to fade in, then i had the red button fade in over it; giving the illuision that only the middle was fading in! i'm quite proud of myself. But i needed to look at the other options that you all provided for me to come to my proper conclusion, so thank you very much.

    Hemebond: i did a forum search with the words "object transition" and only came up with one relevant post. what keywords would have brought me to your scripts?

    here's what i did in code:
    Code:
    <script type="text/javascript">
    function fadeIn() {
    var fObj = document.getElementById("fDiv");
    if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Apply(); }
    fDiv.style.visibility="visible";
    if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Play(); }
    }
    </script>
    ...
    <body onload="fadeIn()">
    ....
    <td background="images/butt_not1_blank.gif"><a href="quoteformFadeTest.html" onmouseover="on5();" onmouseout="off5();"><img src="images/butt_5_red.gif" id="fDiv" width="23" height="40" border="0" name="e" style="visibility:hidden;filter:progid:DXImageTransform.Microsoft.Fade(1.5)"></a></td>
    ....
    here's the link so you can all see it
    http://www.enviromark.ca/english/indexFadeTest.html

    please tell me if you think it offers more than the simpler approach (no fade)
    http://www.enviromark.ca/english/index.html

    Thanks again guys.

    -- Jay

    a message to Willy (and others who want to help)
    you mentioned that you'd be willing to help me go through my code and find where the random error was occuring. if you still want to help me with that, this page will not do the fade!
    http://www.enviromark.ca/english/quoteformFadeTest.html
    ... it say Error: 'fDiv is undefined'

    its really odd. This page is very JS heavy (i think i have 6 onloads... ) .... i have one by one removed all the onloads except fadeIn() and i cant find the culprit. would you be willing to give it a look?
    i dont see what could cause the id="fDiv" to be ignored.... its really weird.

    Thats the final step before i can impliment the script
    Thanks man, i really appreciate it
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by canadianjameson
    Hemebond: i did a forum search with the words "object transition" and only came up with one relevant post. what keywords would have brought me to your scripts?
    image fade

    BTW, your code doesn't work in Firefox, my default browser. In fact I don't even see the red box now.

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    crap!

    what do you see? dude that aint good!

    i didnt use yours because it faded in choppy! arg!

    but that doesnt make sense... the code takes into account incompatible browsers and just doesnt apply the transition if they cant handle it! (blue) and unhides the fDiv object regardless! (red)

    Code:
    <script type="text/javascript">
    function fadeIn() {
    var fObj = document.getElementById("fDiv");
    if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined")  { fDiv.filters[0].Apply(); }
    fDiv.style.visibility="visible";
    if (typeof fDiv.filters !="unknown" && typeof fDiv.filters[0] !="undefined") { fDiv.filters[0].Play(); }
    }
    </script>
    how is this possible hemebond?

    unless you only looked at the quoteformFadeTest.html... which is broken and i need help fixing. is this the link that doesnt work? http://www.enviromark.ca/english/indexFadeTest.html
    Last edited by canadianjameson; 11-03-2004 at 01:02 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #13
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The variable name is fObj but you are checking the properties of fDiv....

  • #14
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    wow....

    okay, but then why would it have worked on all my other pages except for the quoteformFadeTest?

    if what you pointed out is the error i think it is, then the script should not work at all......

    i'm not at home so i cant test it, but are you saying that the script should be this?

    Code:
    <script type="text/javascript">
    function fadeIn() {
    var fObj = document.getElementById("fDiv");
    if (typeof fObj.filters !="unknown" && typeof fObj.filters[0] !="undefined")  { fObj.filters[0].Apply(); }
    fObj.style.visibility="visible";
    if (typeof fObj.filters !="unknown" && typeof fObj.filters[0] !="undefined") { fObj.filters[0].Play(); }
    }
    </script>
    ?

    If so i still dont get why it worked on the other pages

    EDIT
    i mean, i'm confused....
    as i'm reading the script... fObj could be changed to the following with no effect as it is never called in the actual script....

    Code:
    var lookAtMeI'mAUselessVariable = document.getElementById("fDiv");
    Last edited by canadianjameson; 11-03-2004 at 04:04 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #15
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by canadianjameson
    i didnt use yours because it faded in choppy! arg!
    Did you try adjusting the fade step delay? How about the size of the steps? I made the fade obvious so you could see it clearly.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •