Часть изображения
- Автор темы bunny
- Дата начала
видимо Javascript
вот код на php, берет картинку 100x100, смещает изображение вверх-влево на 10 пикселей и выводит в броузер. использует библиотеку GD.
<?php
$width = 100;
$height = 100;
$input_image = "foto1.jpg";
$size = getimagesize( $input_image );
$canvas = imagecreatetruecolor( $width, $height );
$cropped = imagecreatefromjpeg( $input_image );
$newwidth = 100;
$newheight = 100;
$cropLeft = 0;
$cropHeight = 0;
imagecopyresized( $canvas, $cropped, -10,-10, $cropLeft, $cropHeight, $size[0], $size[1], $newwidth, $newheight );
header('Content-type: image/jpeg');
imagejpeg( $canvas, 'cropped.jpg' );
imagejpeg( $canvas );
imagedestroy( $canvas );
imagedestroy( $cropped );
?>
<?php
$width = 100;
$height = 100;
$input_image = "foto1.jpg";
$size = getimagesize( $input_image );
$canvas = imagecreatetruecolor( $width, $height );
$cropped = imagecreatefromjpeg( $input_image );
$newwidth = 100;
$newheight = 100;
$cropLeft = 0;
$cropHeight = 0;
imagecopyresized( $canvas, $cropped, -10,-10, $cropLeft, $cropHeight, $size[0], $size[1], $newwidth, $newheight );
header('Content-type: image/jpeg');
imagejpeg( $canvas, 'cropped.jpg' );
imagejpeg( $canvas );
imagedestroy( $canvas );
imagedestroy( $cropped );
?>
foto.jpg - картинка 400x300
выделяется область 100x100 с координатами левого верхнего угла left: 150px; top: 130px; (первый див после картинки)
остальное всё зарисовывается, с соответствующими координатами (следующие четыре дива)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "Для просмотра ссылки Войдиили Зарегистрируйся">
<html xmlns="Для просмотра ссылки Войдиили Зарегистрируйся" xml:lang="en" lang="en">
<head>
<style type="text/css">
.apos {position: absolute;}
.block {overflow-x: hidden; overflow-y: hidden; display: block;}
.outer {background-color: #000000; filter: alpha(opacity=50); opacity: 0.5;}
</style>
</head>
<body>
<div class="apos">
<img width="400" height="300" src="foto.jpg">
<div style="z-index: 1; left: 150px; top: 130px; width: 100px; height: 100px;" class="block"></div>
<div style="z-index: 0; left: 0px; top: 0px; width: 150px; height: 300px;" class="apos block outer"></div>
<div style="z-index: 0; left: 150px; top: 0px; width: 100px; height: 130px;" class="apos block outer"></div>
<div style="z-index: 0; left: 250px; top: 0px; width: 150px; height: 300px;" class="apos block outer"></div>
<div style="z-index: 0; left: 150px; top: 230px; width: 100px; height: 70px;" class="apos block outer"></div>
</div>
</body>
</html>
выделяется область 100x100 с координатами левого верхнего угла left: 150px; top: 130px; (первый див после картинки)
остальное всё зарисовывается, с соответствующими координатами (следующие четыре дива)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "Для просмотра ссылки Войди
<html xmlns="Для просмотра ссылки Войди
<head>
<style type="text/css">
.apos {position: absolute;}
.block {overflow-x: hidden; overflow-y: hidden; display: block;}
.outer {background-color: #000000; filter: alpha(opacity=50); opacity: 0.5;}
</style>
</head>
<body>
<div class="apos">
<img width="400" height="300" src="foto.jpg">
<div style="z-index: 1; left: 150px; top: 130px; width: 100px; height: 100px;" class="block"></div>
<div style="z-index: 0; left: 0px; top: 0px; width: 150px; height: 300px;" class="apos block outer"></div>
<div style="z-index: 0; left: 150px; top: 0px; width: 100px; height: 130px;" class="apos block outer"></div>
<div style="z-index: 0; left: 250px; top: 0px; width: 150px; height: 300px;" class="apos block outer"></div>
<div style="z-index: 0; left: 150px; top: 230px; width: 100px; height: 70px;" class="apos block outer"></div>
</div>
</body>
</html>