[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: событие элемента img
_Dimarik__
Программирую на javascript всего ничего. надо чтоб при наведении мышкой на фотку она как бы приподнялась над всеми и увеличилась в размере. я попытался это сделать. но код во-первых не работает, а во вторых мне кажется нерационально написан...
ну короче вот код:
<?php
$imageSmallPhotoArray = glob('*.jpg');
$i = 1;//переменная для цикла
echo "<table>";
while($i <= 2)
{
$iMinusOne = $i - 1;
//url на маленькие и большие фотки
$imageSmallPhotoArray[$iMinusOne] = 'http://localhost/'.$imageSmallPhotoArray[$iMinusOne];

//получаем размер small фотографии
$imageSize = getimagesize($imageSmallPhotoArray[$iMinusOne]);
if($imageSize[0] > 100)//если ширина > 100
$newWidth = $imageSize[0] - 40;
if (($i % 3) == 1)//когда начало новой строки
echo "<tr>";
echo "<td><img src=\"$imageSmallPhotoArray[$iMinusOne]\" width=\"$newWidth\"
onmouseover=\"PhotoEnlarge($iMinusOne, $newWidth)\"></td>";
echo "<script type=\"text/javascript\">
function handle(N, width)
{
N = parseInt(N);
width = parseInt(width);
img[N].width = width;
}
</script>"
;
if (($i % 3) == 0)//когда конец строки
echo "</tr>";
$i++;
}
if (($i % 3) != 0)
echo "</tr>";
echo "</table>";
?>




Спустя 17 минут, 1 секунда (15.08.2010 - 13:52) waldicom написал(а):
То, что не рационально - это факт: зачем объявлять функцию в цикле? Может из-за этого и не работает. Что говорит Firebug?

Спустя 6 минут, 10 секунд (15.08.2010 - 13:58) _Dimarik__ написал(а):
Сведения об ошибке на веб-странице




Сообщение: Предполагается наличие объекта
Строка: 2
Символ: 1
Код: 0
URI-код: http://localhost/forPhotos.php


Спустя 2 минуты, 26 секунд (15.08.2010 - 14:00) _Dimarik__ написал(а):
а теперь вот так сделал:
<?php
$imageSmallPhotoArray = glob('*.jpg');
$i = 1;//переменная для цикла
echo "<table>";
while($i <= 2)
{
$iMinusOne = $i - 1;
//url на маленькие и большие фотки
$imageSmallPhotoArray[$iMinusOne] = 'http://localhost/'.$imageSmallPhotoArray[$iMinusOne];

//получаем размер small фотографии
$imageSize = getimagesize($imageSmallPhotoArray[$iMinusOne]);
if($imageSize[0] > 100)//если ширина > 100
$newWidth = $imageSize[0] - 40;
if (($i % 3) == 1)//когда начало новой строки
echo "<tr>";
echo "<td><img src=\"$imageSmallPhotoArray[$iMinusOne]\" width=\"$newWidth\"
onmouseover=\"PhotoEnlarge($iMinusOne, $newWidth)\"></td>";

if (($i % 3) == 0)//когда конец строки
echo "</tr>";
$i++;
}
if (($i % 3) != 0)
echo "</tr>";
echo "</table>";
?>
<script type="text/javascript">
function PhotoEnlarge(N, width)
{
N = parseInt(N);
width = parseInt(width);
img[N].width = width;
}
</script>

ошибки которые IE выдал
Сведения об ошибке на веб-странице

Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.0.04506.648; .NET4.0C; .NET4.0E; AskTbCPUID/5.8.0.12304)
штамп времени: Sun, 15 Aug 2010 12:28:25 UTC


Сообщение: 'img' - определение отсутствует
Строка: 8
Символ: 8
Код: 0
URI-код: http://localhost/forPhotos.php


Сообщение: 'img' - определение отсутствует
Строка: 8
Символ: 8
Код: 0
URI-код: http://localhost/forPhotos.php


Сообщение: 'img' - определение отсутствует
Строка: 8
Символ: 8
Код: 0
URI-код: http://localhost/forPhotos.php


Сообщение: 'img' - определение отсутствует
Строка: 8
Символ: 8
Код: 0
URI-код: http://localhost/forPhotos.php


Спустя 2 часа, 57 минут, 7 секунд (15.08.2010 - 16:58) waldicom написал(а):
Что можно сделать:
избавиться от конструкций вида \" ибо нафига такое извращенство? Почему бы не написать так:

echo "<td><img src='$imageSmallPhotoArray[$iMinusOne]' width='$newWidth' onmouseover='PhotoEnlarge($iMinusOne, $newWidth)'></td>";

или так
echo '<td><img src="' . $imageSmallPhotoArray[$iMinusOne] . '" width="' . $newWidth . '" onmouseover="PhotoEnlarge(' . $iMinusOne . ', ' . $newWidth . ')"></td>';


Затем хочу посоветовать Firefox+Firebug: эта связка сбережет Вам еще много нервов при верстке/дебаге.

Затем просто посмотреть уже сгенерированный хтмл-код или скопировать его сюда

Спустя 6 минут, 42 секунды (15.08.2010 - 17:04) _Dimarik__ написал(а):
Надо увеличить фотографию при наведении на неё мышью.
для одной фотографии я сделал:
<?php
$imageSize = getimagesize('3.jpg');
if($imageSize[0] > 50)//если ширина > 50
$newWidth = $imageSize[0] - 40;
echo "<img name=photo src=3.jpg width=$newWidth onmouseover=\"PhotoEnlarge()\" onmouseout=\"PhotoReduce()\">";
?>
<script>
function
PhotoEnlarge()
{
document.photo.width+=40;
}
function PhotoReduce()
{
if(document.photo.width > 90)
document.photo.width-=40;
}
</script>

но во-первых надо сделать это для массива фотографий, который заполняется циклом:
		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++;
}

а во-вторых если увеличивать фотографию как это я сделал, то при увеличении остальные фотографии будут сдвигаться. а мне надо чтобы при наведении эта фотография как бы приподнималась над всеми, и увеличивалась. причём так как первоначальная версия фотографии находится в ячейке, то при увеличении фотографии, она должна будет выходить за границы ячейки и иметь центр симметрии в центре ячейки.

Спустя 31 секунда (15.08.2010 - 17:05) _Dimarik__ написал(а):
Firebug - дополнение к мозилке?

Спустя 34 минуты, 6 секунд (15.08.2010 - 17:39) waldicom написал(а):
Тут, насколько я понимаю две проблемы:

1. для одной фотографии работает, для нескольких нет (ошибка javascript)
2. фотка вылазиет за рамки td'шки (css ошибка)

Решать лучше последовательно и начинать с первой.

Цитата (_Dimarik__ @ 15.08.2010 - 16:05)
Firebug - дополнение к мозилке?

Да, так и есть.

Спустя 4 минуты, 28 секунд (15.08.2010 - 17:43) _Dimarik__ написал(а):
ну я думаю сделать так. так как у меня максимальная ширина фотографии 200, то надо сделать ширину столбца 250. поэтому если при наведении курсором на фотку она увеличится, структура не изменится.
Ещё надо сделать так чтоб при щелчке на фотографии, она плавно перемещалась в центр экрана (та же фотка, но её увеличенная копия). я погуглил. нашёл вот это:
http://javascript.ru/forum/dom-window/2005...ode-ehtogo.html
разбирая приведённый код, я добавил функцию, которая происходит при щелчке по фотографии
function PhotoCenter()
{
document.photo.style.display='block';
document.photo.style.left=55;
document.photo.style.top=100;
}
только я так и не понял что значит document.photo.style.display='block'; и где можно про свойство display почитать, киньте ссылку плиз если можно. а то мне одна туфта пока я искал попадалась((
и у меня фотография при щелчке не перемещалась на расстояние в 55 слева и 100 сверху

Спустя 1 час, 57 минут, 8 секунд (15.08.2010 - 19:41) _Dimarik__ написал(а):
ну уже не знаю как и что сделать...... вроде бы всё нормально сделал...
echo "<td><img id=\"$iMinusOne\" src=\"$imageSmallPhotoArray[$iMinusOne]\" width=\"$newWidth\"
onmouseover=\"PhotoEnlarge($iMinusOne)\" onmouseout=\"PhotoReduce($iMinusOne)\"></td>"; - вот это я изменил. id к каждому изображению вставил.
<script>
function PhotoEnlarge(N)
{
N = parseInt(N);
document.img[N].width+=10;
}
function PhotoReduce(N)
{
N = parseInt(N);
if(document.img[N].width > 110)
document.img[N].width-=10;
}
</script>
IE вот это пишет:

Сообщение: 'document.img' - есть null или не является объектом
Строка: 67
Символ: 3
Код: 0

ПОЧЕМУ ЭТО НЕ ЯВЛЯЕТСЯ ОБЪЕКТОМ?????? И ЧТО МНЕ ДЕЛАТЬ??? В ЧЁМ ОШИБКА????
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.