событие элемента img
Надо увеличить фотографию при наведении на неё мышью.
для одной фотографии я сделал: Код:
<?php
while($i <= $allPhotos)
{
$iMinusOne = $i - 1;
//url на маленькие и большие фотки
$imageSmallPhotoArray[$iMinusOne] = 'http://localhost/'.$imageSmallPhotoArray[$iMinusOne];
$imageBigPhotoArray[$iMinusOne] = 'http://localhost/'.$imageBigPhotoArray[$iMinusOne];
//получаем размер small фотографии
$imageSize = getimagesize($imageSmallPhotoArray[$iMinusOne]);
if($imageSize[0] > 100)//если ширина > 100
$newWidth = $imageSize[0] - 20;
if (($i % 3) == 1)//когда начало новой строки
echo "<tr>";
echo "<td><img src=\"$imageSmallPhotoArray[$iMinusOne]\" width=\"$newWidth\" ></td>";
if (($i % 3) == 0)//когда конец строки
echo "</tr>";
$i++;
}
а во-вторых если увеличивать фотографию как это я сделал, то при увеличении остальные фотографии будут сдвигаться. а мне надо чтобы при наведении эта фотография как бы приподнималась над всеми, и увеличивалась. причём так как первоначальная версия фотографии находится в ячейке, то при увеличении фотографии, она должна будет выходить за границы ячейки и иметь центр симметрии в центре ячейки. |
Чтобы отстальные фотки не сдвигались, надо картинке перед увеличением проставить position: absolute; с соответствующим z-index'ом, и при увеличении сдвигать ее влево (отрицательный left) на половину ширины.
|
function PhotoCenter(N, width, height, path)
{
N = parseInt(N);
width = parseInt(width);
height = parseInt(height);
document.getElementById(N).width = width;
document.getElementById(N).src = path;
document.getElementById(N).style.position = 'absolute';
document.getElementById(N).style.top = '50%';
document.getElementById(N).style.right = '50%';
document.getElementById(N).style.marginLeft = width / 2;
document.getElementById(N).style.marginTio = height / 2;
document.getElementById(N).onclick = function (){
this.parentNode.removeChild(this);
}
document.appendChild(document.getElementById(N));
}
Проблемы: 1. фотография помещяется не по центру. Она скраю справа. Даже черезчур справа (появилась горизонтальная полоса прокрутки даже) 2. при щелчке на фотографию, полученную с помощью функции PhotoCenter, фотография не помещаятся на предыдущее место, а исчезает. 3. В IE вообще некорректно работает. То есть. При щелчке на фотографию функция PhotoCenter работает так, что фотка вообще исчезает. На всякий случай ещё раз поясню задачу. Имеется фотография. При щелчке на неё она должна переместиться в центр экрана (причём дизайн страницы не должен измениться). она должна оказаться как бы над страницей. Потом при щелчке на эту фотку, которая над страницей, она должна вернуться на своё прежнее место. функцию написал может и криво... javascript совсем недавно учить начал.. подскажите кто чем может.. любой совет окажется полезным |
Можно склонировать фотку на которой кликнули, сделать клону position: absolute; спозиционировать по центру страницы, а самой фотке сделать visibility: hidden; ну и обработчик на клон, который будет удалять или прятать клон (от желания вашего зависит), и показывать первоначальную фотку.
|
а можете подкорректировать код? я то я мало js знаю(((
|
Вам не код надо корректировать, а верстку походу. Абсолютно спозиционированные элементы позиционируются относительно <body>, но если у родителя задать position: relative;, то абсолютно позиционированные элементы будут позиционироваться относительно родителя.
Поэтому у вас все и улетает. |
нет. не вэтом похожу дело.
<?php
require_once("config.php");
$id = 293;
//вывод загруженных фотографий
echo "<table>";
//узнаём сколько у нас фотографий всего загруженj (без фотографии Main)
$allPhotos = NumberOfPhotos($id);
$pathToSmallPhoto = "photos/$id/small/*.jpg";
$pathToBigPhoto = "photos/$id/*.jpg";
$imageSmallPhotoArray = glob($pathToSmallPhoto);
$imageBigPhotoArray = glob($pathToBigPhoto);
$i = 1;//переменная для цикла
while($i <= $allPhotos)
{
$iMinusOne = $i - 1;
//url на маленькие и большие фотки
$imageSmallPhotoArray[$iMinusOne] = 'http://localhost/'.$imageSmallPhotoArray[$iMinusOne];
$imageBigPhotoArray[$iMinusOne] = 'http://localhost/'.$imageBigPhotoArray[$iMinusOne];
//получаем размер small фотографии
$imageSize = getimagesize($imageSmallPhotoArray[$iMinusOne]);
$imageBigPhotoSize = getimagesize($imageBigPhotoArray[$iMinusOne]);
if($imageSize[0] > 100)//если ширина > 100
$newWidth = $imageSize[0] - 20;
if (($i % 3) == 1)//когда начало новой строки
echo "<tr>";
echo "<td width=180 height=270 align=center><img id=\"$iMinusOne\"
src=\"$imageSmallPhotoArray[$iMinusOne]\" width=\"$newWidth\"
onmouseover=\"PhotoEnlarge($iMinusOne)\" onmouseout=\"PhotoReduce($iMinusOne)\"
onclick=\"PhotoCenter($iMinusOne, $imageBigPhotoSize[0], $imageBigPhotoSize[1],'$imageBigPhotoArray[$iMinusOne]')\"></td>";
if (($i % 3) == 0)//когда конец строки
echo "</tr>";
$i++;
}
if (($i % 3) != 0)
echo "</tr>";
echo "</table>";
?>
<script>
function PhotoEnlarge(N)
{
N = parseInt(N);
document.getElementById(N).width+=20;
}
function PhotoReduce(N)
{
N = parseInt(N);
if(document.getElementById(N).width > 120)
document.getElementById(N).width-=20;
}
function PhotoCenter(N, width, height, path)
{
N = parseInt(N);
width = parseInt(width);
height = parseInt(height);
document.getElementById(N).width = width;
document.getElementById(N).src = path;
document.getElementById(N).style.position = 'absolute';
document.getElementById(N).style.top = '50%';
document.getElementById(N).style.left = '50%';
document.getElementById(N).style.marginLeft = width / 2;
document.getElementById(N).style.marginTio = height / 2;
document.getElementById(N).onclick = function (){
this.parentNode.removeChild(this);
}
document.appendChild(document.getElementById(N));
}
</script>
тут вообще никаких стилей нет. и всё равно улетает |
и ещё. как сделать так чтобы увеличение картинки происходило ПЛАВНО???
и ещё. если мы кликнули по картинке №1, то она должна увеличиться. Если сразу после этого кликнули по картинке №2, то картинка №1 должна уменьшиться до первоначальных размеров, а картинка №2 увеличиться. А если кликнули в свободную область, то картинка №2 должна уменьшиться??? |
| Часовой пояс GMT +3, время: 12:37. |