How can I approach this - replacing an image

sgtpepper

Hi,

I have a page that displays a main image like this

[url]http://wwww.xxx.net/propimages/[/url]<? echo $row[photo_file]; ?>

Very simple...very easy...

Also on the page I have thumbnails of alternate images displayed like this


echo("
<a href='http://www.xxx.net/propimages/featured/$row[Idf]/$row[picture6_name]'
target='_blank'>

<img src=http://www.xxx.net/propimages/featured/$row[Idf]/$row[picture6_name] width='104' height='66' 
border='0'");
}

Notice I am using target='_blank' to display the whole image in a pop-up.

I HATE POP UPS 🙂

So, how could I have the user click on the thumbnail and have it replace <? echo $row[photo_file]; ?>

steadyguy

You'll need JavaScript.
Add an id="yourId" attribute to the <img> tag, then do something like

print "<a href=\"http://your link here\">
<img src=\"image source\" onclick="document.getElementbyId('yourId').src='yourpic.jpg';" /></a>";

Does that make any sense?

sgtpepper

I get a
Parse error: parse error, unexpected T_STRING on line 806

Line 806 is:

<?
print "<a href=\"http://www.xxx.net/propimages/featured/$row[Idf]/$row[picture6_name]\">
<img src=\"http://www.xxx.net/propimages/featured/$row[Idf]/$row[picture6_name] width='104' height='66' border='0'\"
onclick="document.getElementbyId('changeimage').src='http://wwww.xxx.net/propimages/<? echo $row[photo_file];"/></a>";
?>

Where did I goof? 😕

steadyguy

Probably the array references, they don't behave well inside double quotes ... you can either use the
" . $array['key'] . "

or extract($array); beforehand, then just use $key in place of $array['key'].

Also, I forgot to escape the double quotes for the onclick attribute ...

Oops!

Should be onclick=\" ...\"

Does that make sense?

sgtpepper

Hmmm almos but not working...

My main image (the one I wish to change) is coded like this:

<img border="0" id="changeimage" src="http://wwww.xxx.net/propimages/<? echo $row[photo_file]; ?>

my java code is

<?
print "<a href=\"http://www.xxx.net/propimages/featured/$row[Idf]/$row[picture6_name]\"> <img
src=\"http://www.xxx.net/propimages/featured/$row[Idf]/$row[picture6_name]\"
onclick=\"document.getElementbyId('changeimage').src='http://wwww.xxx.net/propimages/<? echo
$row[photo_file];\"/></a>";
?>

When I click on the image generated my the java it still pop-ups

steadyguy

Sorry I didn't say this before... if you're using JavaScript to show the full sized picture, you don't need to use the <a> tags ... the onclick will be enough (though the mouse won't change, like when it's over a link). If you want the link anyway - to change the mouse for you, for example - then try using onmouseover instead of onclick ...

Otherwise, I'm unsure ... do you have a page I could visit?

p.s. lots of Java people would be mad at you for using 'Java' and 'JavaScript' interchangably - personally don't care myself, but there is a big difference between the two.