Dynamically indicate a path for onMouseOver

[saturday79]

Hi,

 

I am returning an amount of image metadata from a search and displaying one large image and a number of thumbnails with the results. I am keen to see if I can dynamically get the large image to update with the image file for one of the other images depending on which thumbnail a user hovers over - i.e. dynamically. Is there a way to do this? I've tried to look through a number of forums but can't find anything that I can get to work.

 

Many thanks!

 

My code as it stands:

/* Get results */
    if ($r1)
      {
      $firstRecord=true;
      while ($picMetadata = mysqli_fetch_array($r1, MYSQLI_ASSOC))
        {
        $p1 = $picMetadata['id'];
        $p2 = $picMetadata['folder'];
        $p3 = $picMetadata['filename'];
        $p4 = $picMetadata['thumbname'];
        $p5 = $picMetadata['blurb'];
        $p6 = $picMetadata['date'];
        if ($firstRecord)
          {
          $firstRecord=false;
          echo "<img src='images/".$p2."/".$p3.".jpg' float='left' width='600' alt='' border='0' name='mainPic'><br/><br/>";
          }
        echo "<a href='images/".$p2."/".$p3.".jpg' title='".$p5." - ".$p6."'>
        <img src='images/".$p2."/".$p4.".jpg' float='left' height='80' alt='' border='0' onMouseOver='MouseRollover(mainPic)'></a>  ";
        }
      }

[saturday79]

(NB. in the header the script is currently as below, but clearly not really in a position to work):

<script language="javascript">
  function MouseRollover(mainPic) {
  mainPic.src = "";
  }
</script>

[requinix]

        $p1 = $picMetadata['id'];
        $p2 = $picMetadata['folder'];
        $p3 = $picMetadata['filename'];
        $p4 = $picMetadata['thumbname'];
        $p5 = $picMetadata['blurb'];
        $p6 = $picMetadata['date'];

$a="P"; $b="lease, "; $c="p"; $d="do"; $e="n't "; $e=" that";
echo $a, $b, $c, $b, $d, $e, $d, $e; // use $picMetadata, or at least reasonable variable names

This is a job for CSS, not Javascript.

<!-- stuff inside this may show or hide depending if the user is hovering over it -->
<span class="thumbnail-hover">
	<!-- visible only when hovering -->
	<img class="normal" src="/path/to/normal/image.jpg" ...>
	<!-- visible only when not hovering -->
	<img class="thumbnail" src="/path/to/thumbnail/image.jpg" ...>
</span>

/* hide the normal image when not hovering */
.thumbnail-hover img.normal {
	display: none;
}

/* show the normal image when hovering */
.thumbnail-hover:hover img.normal {
	display: inline;
}

/* hide the thumbnail image when hovering */
.thumbnail-hover:hover img.thumbnail {
	display: none;
}

[saturday79]

Thanks ever so much for the post, requinix. It's not 100% what I'm looking to do - that code allows me to set a given image to become larger or smaller when hovering, however what I'm looking to do is update one specific image with the larger version of any one of a number of thumbnails. I've tried to represent below as a page layout - essentially I'm looking for the large image [LARGE_1] to be overwritten with the image of any of the thumbnails [thumb2], [thumb3], [thumb4] etc. when hovering over those thumbnails, but the thumbnails stay as they are, only [1] updates. Does anyone know if that's doable? (If my request doesn't make sense, let me know)

 

[LARGE_1]

[thumb2][thumb3][thumb4][thumb5]