如何将图像放大到另一个位置？

Question

Hi i would like to create a image gallery where images are repositioned and resized after rollover. Im not sure if i have to use javascript or is just css enough. I tried jQuery but i couldnt match each img with the rollovered image. I also thought if i could give each picture different id in the php script so afterwards i can use these id-s to match rollovered image in jquery. Heres a pictures with explanation :

this php script generates the gallery :

  function showGallery()
{
$id = 0;
$size ='';
$galleryHTML = "<ul>";
$images = new DirectoryIterator("pildid");

foreach($images as $image) {

$file = $image -> current();
$filename = $file -> getFilename();
$src = "pildid/$filename";
$info = new Finfo( FILEINFO_MIME_TYPE );
$type = $info->file($src);
$galleryhtml = "";  
if($type ==="image/jpeg" )

    $galleryhtml ="<li><img src='$src' id='' height='100px' width='120px'/></li>";
    echo $galleryhtml;


}
 $galleryhtml = "</ul>";
 include_once('view/galerii.php');


}

Answer 1

You will need to use javaScript to accomplish this.

Here is a jsFiddle that will show you the image you mouseover.

http://jsfiddle.net/Qtu9N/2/

<style>
.preview-image {
    height: 100px;
    width: 100px;
}
#feature-image {
    height: 500px;
    width: 500px;
}
</style>


<div>
    <img class="preview-image" src="http://i1.cdnds.net/13/24/618x497/gaming-pokemon-x-and-y-artwork-3.jpg">
    <img class="preview-image" src="https://images-na.ssl-images-amazon.com/images/G/01/videogames/detail-page/pokemon.blk-wte.oshawatt.lg.jpg">
</div>
<div>
    <img id="feature-image">
</div>

<script>
$('.preview-image').on('mouseover', function (e) {
    var featureSource = e.target.src;
    //possibly transform the link here
    //your preview images should be lower quality
    //and the big image should be higher quality
    $('#feature-image').attr('src', featureSource);
});
</script>