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.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Swap image + daily change

    I have one image on a page and I am trying to mix 2 javascripts actions on that image:
    - the first one is an automatic daily change of images (3 different images in this example)
    - the second one is the display of the same image in bigger when the mouse is over it.
    The total of images are 6 (2 different sizes for 3 images).

    I have made a search but I didn't find the solution. Here is the code (the daily change works but not the rollover.
    Thank you to correct it or giving an other solution. (My level in Javascript: low)

    [CODE]<SCRIPT LANGUAGE="JavaScript">
    function todaysPhoto(){
    var i= 3 ;
    var todaysFoto=new Array();
    todaysFoto[1]="img1_small.jpg";
    todaysFoto[2]="img2_small.jpg";
    todaysFoto[3]="img3_small.jpg";
    var todaysPic=new Array();
    todaysPic[1]="img1_big.jpg";
    todaysPic[2]="img2_big.jpg";
    todaysPic[3]="img3_big.jpg";

    t=new Date().getTime();
    var days=Math.floor(t / 86400000) % i+1;
    document.getElementById("todaysfoto").src="images/photos/"+todaysFoto[days];

    function SwapImg(){
    document.todaysfoto.src ="images/photos/"+todaysPic[days];
    return true;}

    function SwapBack(){
    document.todaysfoto.src ="images/photos/"+todaysFoto[days];
    return true;}
    </SCRIPT>

    <body onload="todaysPhoto()">
    <a href="" onmouseover="SwapImg()" onmouseout="SwapBack()">
    <img name="todaysfoto" width="150px" height="100px" id ="todaysfoto" /></a>[CODE]

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Try to change each appearance of
    Code:
    document.todaysfoto.src
    to
    Code:
    document.getElementById('todaysfoto').src

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much devnull69. I have tried the getElementById synthax as you said but it doesn't work either. I have deleted also the size of the picture in the code with no success. Another idea?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    This code works fine, but I think it might be necessary to provide the full URL and not just the relative path here. Local javascript doesn't know about server relative paths ...

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you again devnull for spending time on my problem.
    I have just made a test on my serveur changing paths this way:
    [CODE]function SwapImg(){document.getElementById("todaysfoto").src ="http://mywebsite.com/mysite/images/photos/"+todaysPic[days];return true;} [CODE]
    Same for the 2 others functions.
    The daily picture ,function todaysPhoto(), shows well but the swap function doesn't work.
    Did I misunderstood something you said?
    Last edited by cocorli; 04-01-2011 at 01:22 PM.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    I am missing the closing } from your first function

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry for this error of pasting. I had some comments inside the function and I forgot to copy the closing function.
    I have wait until now to control again that the function todaysPhoto was changing the image as expected.
    I have figured out that I had a class inside the <a> which was making a mess.
    I will come back to say if everything is OK now.
    Last edited by cocorli; 04-02-2011 at 03:12 AM.

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I come back but unfortunately only the function todaysPhoto is working. I cannot understand why the synthax beeing the same the SwapImg function doesn't work.
    Last edited by cocorli; 04-03-2011 at 01:22 AM.

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Debugging is essential for web site developing. If you have Firefox, try to install the Firebug add-on and activate it on the test page. You will see an error on mouseover and another one on mouseout. This will tell you what is going wrong here. Hint: Variable scope.

    If you still have problems finding out, feel free to come back.

  • Users who have thanked devnull69 for this post:

    cocorli (04-02-2011)

  • #10
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much Devnull for your advice of debugging with firebug, I really appreciate.
    Indeed I got an error in both functions of the rollover saying that todaysPic and todaysFoto are not defined.
    If I understand well my arrays are not well written. I don't know if the 2 arrays todaysFoto and todaysPic should be in one condensed array:
    [code]var Rollimage=new Array(todaysFoto(), todaysPic());[code] . I even don't know if this kind of synthax is correct ?

    Any suggestion how to write the arrays?

  • #11
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    My hint was about variable scope and not syntax :-)

    Another hint: Where did you define todaysPic[] and todaysFoto[] and what is their scope then?

  • #12
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi devnull I am a beginner in Javascript and it was hard to understand for me where was the mistake even if you were pointing them talking of variable scope (first time to hear about scope).
    Well I have found the solution anyaway and I thank you very much.
    The solution was to take out the variables inside the todaysPhoto function: i, t, days and put them at the beginning of the script. May be this change from local scope to global scope?

  • #13
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Exactly

    If you put a "var" in front of a variable inside a function, it is being declared locally for the function

    Without the "var" or outside the function it will be global.


  •  

    Tags for this Thread

    Posting Permissions

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