We are redesigning the site and the coder has taken a javascript tabbed pane menu from the net, but the problem is that with each click, we need to change an image at the top, that is outside the div that the tabbed pane uses - does anyone think they can help?

Here is a code I have tried but failed with...

<?php
function checkPicture($num)
{
$picture = array("Cambodia_Banner", "Laos_Banner", "Malaysia_Banner");
//shuffle($picture);
?>
<img name="test" src="http://192.168.1.181/images/expeditions/<?php echo "$picture[$num].jpg"; ?>" width='760' height='160' border='1'> <?php } ?>

and the javascript

t.addTab( "tab1", document.getElementById('tab1'), document.getElementById('pane1') );

<div class="tabcontainer" id="tabcontainer">

<div class="selected_tab" id="tab1">

Great thanks for your help, I guess the problem is that Javacript clicks can't be used as handlers for PHP, im more of a flash man so have been really confused by this.

Cheers

    For the javascript to change the pictures without talking to the server, you would need the server to send the pictures up front, and the javascript can then change what is shown in various ways. Otherwise you will need to request the new picture from the server.

    <?php
    <img id="pic1" style="visibility: visible" src="pic1.jpg">
    <img id="pic1" style="visibility: hidden" src="pic2.jpg">
    <img id="pic1" style="visibility: hidden" src="pic3.jpg">
    ?>
    
    <script>
    changePic(currentPic, newPic) {
    	document.getElementById(currentPic).style.visibility = "hidden";
    	document.getElementById(newPic).style.visibility = "visible";
    }
    </script>
    

    The above example just changes the style visibility between hidden and visible. Unless the pictures have the exact same width/height, it may look strange though. In this case you might want to go with style "display: none/inline" instead.

      Write a Reply...