Jump to content

image swap, create variable for size


harkly

Recommended Posts

I have some code that displays 1 large image and then 5 small ones, you click on a small one and it becomes the large one "trades places"

 

I then fixed the sizes so they don't distort when changing from large to small and then back.

 

My problem is when the image is clicked the large image size does not change, the image does

 

I that my issue lies here

<img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> 

but no clue on how to fix it

 

this part

$myImg1[0], $myImg1[1
needs to change based on the selected image, can someone help me figure out how to make this happen??

 

Is there someway to create an if statement for this?

If (something){
echo "$myImg1[0], $myImg1[1]";
}
else {
echo "$myImg2[0], $myImg2[1]";
}

 

 

My full code

 

 

<?php 

// to change the image size within the web page
function imageResize($width, $height, $target) {
	//takes the larger size of the width and height and applies the formula accordingly...
	//this is so this script will work dynamically with any size image 

	if ($width > $height) {
		$percentage = ($target / $width); 
	} 
	else { 
		$percentage = ($target / $height); 
	} 

	//gets the new value and applies the percentage, then rounds the value 

	$width = round($width * $percentage); 
	$height = round($height * $percentage); 

	//returns the new sizes in html image tag format...
	//this is so you can plug this function inside an image tag and just get the 

	return "width='$width' height='$height'"; 
} 
?>

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Ronnie T. Moore, Editor -->
<!-- Web Site:  The JavaScript Source -->

	<!-- Begin
	var photo_1 = new Image();
	var photo_2 = new Image();
	var photo_3 = new Image();

	photo_1.src = "uploads/harkly_1.jpg";
	photo_2.src = "uploads/harkly_2.jpg";
	photo_3.src = "uploads/harkly_3.jpg";

	function doButtons(picimage) {
	eval("document['picture'].src = " + picimage + ".src");

	}
	//  End -->
</script>
</HEAD>

<?php //get the image size of the picture and load it into an array 

$photo_1="uploads/harkly_1.jpg";
$photo_2="uploads/harkly_2.jpg";
$photo_3="uploads/harkly_3.jpg";

$myImg1 = getimagesize($photo_1);
$myImg2 = getimagesize($photo_2);
$myImg3 = getimagesize($photo_3);


echo "

<BODY>
<center>
	<table border=1>
	<tr><td>

	<p>
	<li><a href = '' onmouseover = \"doButtons('photo_1')\"><img name='photo_1' src='$photo_1' ";echo imageResize($myImg1[0], $myImg1[1], 55); echo " border=0><p>

	<li><a href = '' onmouseover = \"doButtons('photo_2')\"><img name='photo_2' src='$photo_2' ";echo imageResize($myImg2[0], $myImg1[1], 55); echo " border=0><p>

	<li><a href = '' onmouseover = \"doButtons('photo_3')\"><img name='photo_3' src='$photo_3' ";echo imageResize($myImg3[0], $myImg1[1], 55); echo " border=0><p>

	<td width=440 height=300> 
	<img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> 

</tr>
</table>
</center>
";
?> 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.