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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Href variable doesn't pass from function

    I'm a newbie to javascript. I have a PHP program with an HTML table. This table displays 4 thumbnail images on the right and one larger image on the left. Whenever I click on a thumbnail, the larger image updates accordingly. So far, so good.

    However, underneath the larger image I have a text hyperlink to display that image in a new window at an even larger resolution. the problem is that I can pass the image number to my functions but as soon as the larger image redraws, that variable is gone and I can't use it to display the proper full screen image in the new window. It always defaults to image #1. I've tried using PHP variables within the javascript but it's just not working.

    Following is an excerpt of my code:

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <script type="text/javascript">
    var imageprefix = "image_";
    var superprefix = "super_";
    var imageid = "1";
    function pict(A)
        { 
        var image = document.getElementById('MyImage');
        image.src = (imageprefix + A + '.jpg');
        }
    </script>
    </head>
    <BODY>
    <table border="0" width="100%" style="border-collapse: collapse">
      <tr>
        <td rowspan="2" width="70%">
        <p align="center">
        <img border="0" src="image_1.jpg" id="MyImage"></p>
    	
        <p align="center">
        <script>document.writeln("<a target='_blank' href='"+superprefix+imageid+".jpg'>Click Here to Display Full Screen Image</a>");</script>
        </p></td>
    
        <td align="center">
        <img border="0" src="thumb_1.jpg"
         onclick="return pict(1);"></td>
        <td align="center">
        <img border="0" src="thumb_2.jpg"
         onclick="return pict(2);"></td>
      </tr>
      <tr>
        <td align="center">
        <img border="0" src="thumb_3.jpg"
         onclick="return pict(3);"></td>
        <td align="center">
        <img border="0" src="thumb_4.jpg"
         onclick="return pict(4);"></td>;
      </tr>
    </table>
    </BODY>
    </HTML>

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Silicon Valley California
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, it did work. Your PHP variable is 1, so it is always one and you never use JavaScript to update the href. You have to remember that PHP is a server-side language and JavaScript a client-side. You can use PHP to write JavaScript when the page loads, but can never use JavaScript to write PHP. And once the page is served to the client, your PHP code has already been executed and is complete.

    change

    Code:
    <script>document.writeln("<a target='_blank' href='"+superprefix+imageid+".jpg'>Click Here to Display Full Screen Image</a>");</script>
    to

    Code:
    <a target='_blank' href='javascript:void(null)' id="MyLink">Click Here to Display Full Screen Image</a>
    Then add
    Code:
    var link = document.getElementById('MyLink');
    link.href = imageprefix + A + '.jpg';
    to your pict function. That should fix your problem.

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked!
    Thanks, that was the part I was missing.


  •  

    Posting Permissions

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