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 2 of 2

Thread: Changing images

  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Norway
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing images

    I'm trying to change a image in a box on my page whit just pressing a link on another place on the page. I want it to work like this.. say i want information about something. Then i press a link about a special topic, the information is loaded inside a main content <div id="main">. But the thing i want also to happen is that a picture that is related to the main content is loaded inside another <div id="picture"> element. Have searched the web for info about this, but cant find anything. Do anyone inside here have a clue how to do it.
    I tryed this:

    <script language="JavaScript" type="text/JavaScript>
    if ( image != ""){
    document.write("<img src="pathtopic/" +image +".jpg" />");
    }
    else {
    document.write("<img src="pathtopic/no-life.jpg">");
    }
    </script>

    the image variable is a variable used by the whole index.php file inside a form, that is also a javascript. And the document in question is image.html, and it only contain a <img src.........../>. Why dont this work?

    I also tryed a php script:
    <?php
    if ($_POST["image"]== "" )
    {
    print("<img src=\"no-life.jpg\" alt=\"no-life\" width=\"100%\" />");
    }
    else
    {
    $tmp = "pathtopic/{$_POST["image"]}.jpg";
    print("<img src=\"$tmp\" alt=\"no picture\" width=\"50%\" />");
    }
    ?>
    But that only loads the alt attribute, when i print the $tmp var it displays the whole path and filname, but picture doesnt load.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    1. document.write is not a dynamic method. Use DOM instead
    2. you need a function which is to be fired by a handler event (let's say onclick)

    <script language="JavaScript" type="text/JavaScript>
    function switchImages(image){
    var picurl='no-life.jpg';
    if (image != ""){url=image;}
    document.getElementById('picture').getElementsByTagName('img')[0].setAttribute('src',picurl);
    }
    </script>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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