Small Image Hover Views Big Image (Not Separate Window, though)

Question

I Want That hover on Small Image Views Big Image in same window...

So can anybody help me in dis...

Answer 1

First and foremost, welcome to StackOverflow!

What you're describing is not PHP. Instead, the best technology to use for your problem would be a client-side solution like Javascript. If you don't mind, I'd like to encourage you to consider using a Javascript framework to cut down on development time for various browsers (if you don't know already, they can and will drive you insane if you give them the opportunity).

Causing a thumbnail to display a larger image with Javascript isn't that difficult. Consider the following HTML:

<img src="thumb-kittens.jpg" rel="big-kittens.jpg" class="zoomMe" />
<div class="preview">...previews will be seen here</div>

I'm basically storing the larger files name in the rel tag to quickly access it via our javascript. Using jQuery, a popular javascript library, we can do a preview action rather easily:

$(function(){
  // Add some events when we hover our thumbnails
  $("img.zoomMe").hover(
    function(){
      // Add our big image inside the preview box
      $(".preview").html( $("<img>").attr("src", $(this).attr("rel")) );
    },
    function(){
      // Empty our preview box
      $(".preview").html("");
    }
  );
});

In this simple example, we're just using the native hover method in jQuery to define two actions. The first when we mouse over any image having the class "zoomMe", and the second when we leave that same image.