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 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb DIV Box, Change image inside it when text clicked

    I have a DIV BOX:

    PHP Code:
    <div style="width: 600px; height: 400px; background: #fff; border: 4px solid red;">

    <img src="<?php echo($img-name); ?>" />

    </div>
    Then somehow make a link to change the image name.
    PHP Code:
    <a href="<?php $img-name == 'bird.jpg'?> ">Bird</a>
    <a href="<?php $img-name == 'dog.jpg'?> ">Dog</a>
    Does that make sense?

    Or is there a better way of going about it?

  • #2
    Regular Coder
    Join Date
    Mar 2007
    Location
    Quebec
    Posts
    261
    Thanks
    6
    Thanked 7 Times in 7 Posts
    I think that would work, but you could also consider using an array.

    PHP Code:
    <?php

    $img
    -name = array ("bird" => "/bird.jpg",
                       
    "dog" => "/dog.jpg");
    ?>
    Links:
    PHP Code:
    <a href="<?php echo $img-name['bird'?>">Bird</a>
    <a href="<?php echo $img-name['dog']; ?>">Dog</a>
    Although for images, you might want to use
    PHP Code:
    <img src="bird.jpg" /> 
    Last edited by fl00d; 07-05-2007 at 08:54 PM.

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    <?php

    $portfolio 
    "2d/butler.jpg";
    ?> 


    <div style="width: 600px; height: 400px; background: #fff; border: 4px solid red;">

    <img src="<?php echo($portfolio); ?>" alt="Portfolio" />

    </div>
    <a href="<?php $portfolio '2d/ndiah.jpg'?> ">Bird</a>
    <a href="<?php $portfolio 'dog.jpg'?> ">Dog</a>
    But the code shows parsed:
    <a href=" ">Bird</a>
    <a href=" ">Dog</a>
    Any solutions please

    If I do <?php echo $portfolio = '2d/ndiah.jpg'; ?>

    well that just does the print out.

    Im trying to change the variable in the Div, so the image changes
    Last edited by jream; 07-06-2007 at 09:31 AM.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Have you considered using Document Object Model with javascript?

    This allows you to access elements in a webpage and change their attributes/styles/links etc.

    It isnt PHP and does not require the page to reload.

    Code:
    <div style="width: 600px; height: 400px; background: #fff; border: 4px solid red;">
    <img src="portfolio.jpg" alt="Portfolio" id="picture" />
    </div>
    <a href="#" onclick="changeImage('bird')">Bird</a>
    <a href="#" onclick="changeImage('dog')">Dog</a>
    <script type="text/javascript">
    function changeImage(imagename){
    document.getElementById('picture').src=imagename+".jpg";
    document.getElementById('picture').alt=imagename;
    }
    </script>
    Last edited by daemonkin; 07-06-2007 at 09:48 AM.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    maybe u can try this one.
    Code:
    <script language="javascript">
    function change_pic(val) {
    	document.getElementById('image_name').src = val;
    }
    </script>
    
    <div>
    <img  src="bird.jpg" name="image_name" id="image_name" />
    </div>
    <br />
    
    <a href="javascript:change_pic('bird.jpg')">sdfsdf</a><br />
    <a href="javascript:change_pic('dog.jpg')">sdfsdf</a><br />

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Hadiman: script language is deprecated. You can use type="text/javascript" instead.

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #7
    Regular Coder
    Join Date
    Mar 2007
    Location
    Quebec
    Posts
    261
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by jream View Post
    PHP Code:
    <?php

    $portfolio 
    "2d/butler.jpg";
    ?> 


    <div style="width: 600px; height: 400px; background: #fff; border: 4px solid red;">

    <img src="<?php echo($portfolio); ?>" alt="Portfolio" />

    </div>
    <a href="<?php $portfolio '2d/ndiah.jpg'?> ">Bird</a>
    <a href="<?php $portfolio 'dog.jpg'?> ">Dog</a>
    But the code shows parsed:


    Any solutions please

    If I do <?php echo $portfolio = '2d/ndiah.jpg'; ?>

    well that just does the print out.

    Im trying to change the variable in the Div, so the image changes
    It prints the entire line because that is what you are telling it to do. You can't set a variable in an echo string, which is what you were trying to do.
    PHP Code:
    <a href="<?php echo $portfolio?>">Link</a>
    You would need to predefine the variable. As daemonkin said, this is a better job for Javascript. He even gave you the code for it

  • #8
    Banned
    Join Date
    Apr 2007
    Posts
    428
    Thanks
    29
    Thanked 5 Times in 5 Posts
    Beware that you don't use javascript for any vital parts of your website couse more and more people thesedays use no-script plugins, which by default disable javascript. If you use javascript be sure to make a script that warns user to set javascript On, if it's currently off

  • #9
    New Coder
    Join Date
    Sep 2006
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by matak View Post
    Beware that you don't use javascript for any vital parts of your website couse more and more people thesedays use no-script plugins, which by default disable javascript. If you use javascript be sure to make a script that warns user to set javascript On, if it's currently off
    Yeah thats was I wondered about, I use that too and enable javascript as i see fit for any site i visit :P

    But these are great examples I tried them out, thanks so much!
    I thought I could figure out a way to do this in PHP but I guess you can't change a variable like that.

  • #10
    Banned
    Join Date
    Apr 2007
    Posts
    428
    Thanks
    29
    Thanked 5 Times in 5 Posts
    You should use GET to do that, and using get could couse you more problems, than using javascript instead.
    If you use GEt be sure that you set all your variables, and else if someone tries to write something in url that is not set with your variables to take them to default or ban page.

    using in_array or is_array_key operators is good way to do that. but then you would need to make all your images paths into arrays.

    eg.
    PHP Code:
    $images = array("image1.jpg""image2.jpg", ...);

    $image $_GET['img'];

    if (
    in_array($image$images)){
    do 
    something;
    }
    else{
    do default or 
    ban..



  •  

    Posting Permissions

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