...

View Full Version : DIV Box, Change image inside it when text clicked



jream
07-05-2007, 07:53 AM
I have a DIV BOX:


<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.

<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?

fl00d
07-05-2007, 08:08 AM
I think that would work, but you could also consider using an array.



<?php

$img-name = array ("bird" => "/bird.jpg",
"dog" => "/dog.jpg");
?>


Links:

<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

<img src="bird.jpg" /> :p

jream
07-06-2007, 08:24 AM
<?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

daemonkin
07-06-2007, 08:46 AM
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.


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

hadiman
07-06-2007, 08:49 AM
maybe u can try this one.

<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 />

:thumbsup:

daemonkin
07-06-2007, 09:18 AM
Hadiman: script language is deprecated. You can use type="text/javascript" instead.

D.

fl00d
07-06-2007, 05:29 PM
<?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.

<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 :thumbsup:

matak
07-06-2007, 07:26 PM
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

jream
07-07-2007, 10:53 AM
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.

matak
07-07-2007, 12:28 PM
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.


$images = array("image1.jpg", "image2.jpg", ...);

$image = $_GET['img'];

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum