Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.08.2010, 18:03
Интересующийся
Отправить личное сообщение для _Dimarik__ Посмотреть профиль Найти все сообщения от _Dimarik__
 
Регистрация: 15.08.2010
Сообщений: 12

событие элемента img
Надо увеличить фотографию при наведении на неё мышью.
для одной фотографии я сделал:
Код:
<?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++;	
		}

а во-вторых если увеличивать фотографию как это я сделал, то при увеличении остальные фотографии будут сдвигаться. а мне надо чтобы при наведении эта фотография как бы приподнималась над всеми, и увеличивалась. причём так как первоначальная версия фотографии находится в ячейке, то при увеличении фотографии, она должна будет выходить за границы ячейки и иметь центр симметрии в центре ячейки.
Ответить с цитированием
  #2 (permalink)  
Старый 16.08.2010, 18:11
Интересующийся
Отправить личное сообщение для GreatRash Посмотреть профиль Найти все сообщения от GreatRash
 
Регистрация: 28.10.2009
Сообщений: 11

Чтобы отстальные фотки не сдвигались, надо картинке перед увеличением проставить position: absolute; с соответствующим z-index'ом, и при увеличении сдвигать ее влево (отрицательный left) на половину ширины.
Ответить с цитированием
  #3 (permalink)  
Старый 16.08.2010, 20:58
Интересующийся
Отправить личное сообщение для _Dimarik__ Посмотреть профиль Найти все сообщения от _Dimarik__
 
Регистрация: 15.08.2010
Сообщений: 12

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 совсем недавно учить начал.. подскажите кто чем может.. любой совет окажется полезным
Ответить с цитированием
  #4 (permalink)  
Старый 16.08.2010, 21:06
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

Можно склонировать фотку на которой кликнули, сделать клону position: absolute; спозиционировать по центру страницы, а самой фотке сделать visibility: hidden; ну и обработчик на клон, который будет удалять или прятать клон (от желания вашего зависит), и показывать первоначальную фотку.
Ответить с цитированием
  #5 (permalink)  
Старый 16.08.2010, 21:21
Интересующийся
Отправить личное сообщение для _Dimarik__ Посмотреть профиль Найти все сообщения от _Dimarik__
 
Регистрация: 15.08.2010
Сообщений: 12

а можете подкорректировать код? я то я мало js знаю(((
Ответить с цитированием
  #6 (permalink)  
Старый 17.08.2010, 11:28
Интересующийся
Отправить личное сообщение для GreatRash Посмотреть профиль Найти все сообщения от GreatRash
 
Регистрация: 28.10.2009
Сообщений: 11

Вам не код надо корректировать, а верстку походу. Абсолютно спозиционированные элементы позиционируются относительно <body>, но если у родителя задать position: relative;, то абсолютно позиционированные элементы будут позиционироваться относительно родителя.
Поэтому у вас все и улетает.
Ответить с цитированием
  #7 (permalink)  
Старый 17.08.2010, 15:30
Интересующийся
Отправить личное сообщение для _Dimarik__ Посмотреть профиль Найти все сообщения от _Dimarik__
 
Регистрация: 15.08.2010
Сообщений: 12

нет. не вэтом похожу дело.
<?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>

тут вообще никаких стилей нет. и всё равно улетает
Ответить с цитированием
  #8 (permalink)  
Старый 17.08.2010, 15:41
Интересующийся
Отправить личное сообщение для _Dimarik__ Посмотреть профиль Найти все сообщения от _Dimarik__
 
Регистрация: 15.08.2010
Сообщений: 12

и ещё. как сделать так чтобы увеличение картинки происходило ПЛАВНО???
и ещё. если мы кликнули по картинке №1, то она должна увеличиться. Если сразу после этого кликнули по картинке №2, то картинка №1 должна уменьшиться до первоначальных размеров, а картинка №2 увеличиться. А если кликнули в свободную область, то картинка №2 должна уменьшиться???
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить id элемента, вызвавшего событие. Mutagena jQuery 2 19.03.2010 10:16
как отследить событие загрузки img? GrEb Events/DOM/Window 3 12.02.2010 16:47
У элемента img внутри form пропадает событие после onsubmit формы Eugene Events/DOM/Window 2 18.06.2009 19:21
Отловить событие изменения элемента pavl Events/DOM/Window 13 13.04.2009 14:00
какое событие возникает во время формирования html IT-AleX Events/DOM/Window 2 20.02.2009 16:13