Is This Possible?

[jay3wpb]

Hi,

In only one catagory, I want to be able to click on different parts of an image to see the corresponding product's information. Has anyone else done this? Thanks for your time. -Jay

[Guest]

you could setup a sliced image for the category and each part of the image will have a link to it. You leave no margins between the slices (or whatever you want to do overlay them etc)

 

So you could slice the image to the number of products in the category. Create a function that does that:

 

function slice_image($image, $products_count)
$jpg = imagecreatefromjpeg($image);
$width = imagesx($jpg);
$height = imagesy($jpg);
$sliced_width = $width / $products_count;

$sliced = '';
for( $i=0, $size=0; $i<$products_count && $size<$width; $i++ ) {
$sliced .= '<img src="category_slicer.php?image=' . $image . '&width=' . $newwidth . '&height=' . $height . '&side=' . $size . '">  ';
$size += $sliced_width;
}
return $sliced;
}

 

Finally you setup an image page (category_slicer.php) to display the image; I used jpeg so you need to setup the header as image/jpg for this example with a double space in it.

[jay3wpb]

Hi, thanks for answering.

The image is a blow up of an engine and I want the numbers that point to the parts to lead to that parts description.

[Guest]

Right, so for each entry (iteration) in that function you add a link.

 

Here is an example I placed the index.php only but you can pass an array of links (product descriptions) and set each slice with a link behind.

 

$sliced .= '<a href="' tep_href_link(FILENAME_DEFAULT) . '"><img src="category_slicer.php?image=' . $image . '&width=' . $newwidth . '&height=' . $height . '&side=' . $size . '">  </a>';

 

but first you can have that part of code work then once the image is up and links are running you add an extra argument to that function to pass the separate links.

[jay3wpb]

ill try it out and get back to you. Thanks

[Guest]

Had a couple of mistakes with the syntax earlier, here is an updated version of that function. It includes the links array:

 

  function slice_image($image, $products_count, &$links_array)
$jpg = imagecreatefromjpeg($image);
$width = imagesx($jpg);
$height = imagesy($jpg);
$sliced_width = $width / $products_count;

$sliced = '';
for( $i=0, $size=0, $j=count($links_array); $i<$products_count && $size<$width && $i<$j; $i++ ) {
  $sliced .= '<a href="' . $links_array[$i] . '"><img src="category_slicer.php?image=' . $image . '&width=' . $newwidth . '&height=' . $height . '&side=' . $size . '">  </a>';
  $size += $sliced_width;
}
imagedestroy($jpg);
return $sliced;
 }