@public #js #javascript #hover #image #jquery

This is how to change an Image src on Mouse hover with jQuery

HTML

<img src="url1.jpg" data-alt-src="url-2.jpg" class="hover_images"/>
...
<img src="url3.jpg" data-alt-src="url-4.jpg" class="hover_images"/>
...
<img src="url5.jpg" data-alt-src="url-6.jpg" class="hover_images"/>

Javascript

$('.hover_images').hover(function(){
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
});
/** Big Thank to http://stackoverflow.com/a/17507894 **/

Here is a demo

This GDlib Trick let you stack different transparent png Images to one JPG.

<?php

header("Content-Type: image/jpeg");

$image_arr=array('path1.png', 'path2.png', 'path3.png');

$base  = imagecreatetruecolor(913, 500);
$color = imagecolorallocate($base, 255, 255, 255);
imagefill($base, 0, 0, $color);

foreach($image_arr as $key=>$image_val){
    $this_layer=imageCreateFromPNG($image_val);
    ImageCopy ( $base, $this_layer, 0 , 0 , 0 , 0 , 913 , 500 );
}

imagejpeg($base,NULL, 85);
imagedestroy($base);
?>

@public #gdlib #php #image #transform #stack #jpg

Wozu das Ganze?

Wenn man aus mehreren einzelnen Bildern am Ende ein gesamtes Bild erzeugt, dann ist es besser sich nicht auf die Browser zu verlassen und dass diese die übereinander geschichteten Bilder korrekt darstellen.

Statt JPG als PNG ausgeben

public gdlib php image transform stack png transparent php

This GDlib Trick let you stack different transparent png Images to one transparent png.

<?php

$image_arr=array('path1.png', 'path2.png', 'path3.png');
echo gd_gen_image($image_arr);


function gd_gen_image($arr){
    $base  = imagecreatetruecolor(913, 500);
    $color = imagecolorallocatealpha($base, 0, 0, 0, 127);
    imagefill($base, 0, 0, $color);
    imagesavealpha($base, TRUE);

    foreach($arr as $key=>$image_val){
        $this_layer=imageCreateFromPNG($image_val);
        ImageCopy ( $base, $this_layer, 0 , 0 , 0 , 0 , 913 , 500 );
    }

    // Begin capturing the byte stream
    ob_start();
        imagePNG($base);
    $out=ob_get_clean();
    // END capturing the byte stream
    return "<img src='data:image/png;base64," . base64_encode( $out ) . "' />";
}

?>

@public #gdlib #php #image #transform #stack #png #transparent

Statt PNG als JPG ausgeben: http://codebase.webmaster-fragen.de/snippet/public-gdlib-php-image-transform-stack-php/

Projects

Tags

Capsule Servers

Lost connection to server.