Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Галерея

Автор: PARROT 15.10.2005, 13:04

Здравствуйте!
Вот у меня такая задача:
Сделать так, чтобы при наведении мышью на маленькую фотографию, справа появлялась таже фотка, но большая.
Тоесть имеем: 1.jpg - маленькая фотография и 1_b.jpg - большая фотография
Далее делаем вывод из базы, маленьких фотографий:

Код


<td align=center><img src="<?=$mas[1];?>" onmouseover="suitInit(this, 1); this.style.filter = 'alpha(opacity=100)';" style="FILTER: alpha(opacity=30)" onmouseout="suitInit(this, 1);this.style.filter = 'alpha(opacity=30)'"  style='cursor:pointer'></td>

Тут должна появляться большая фотография по наведении на маленькую, а по умолчанию можно поставить любую фотографию, чтобы пусто не было.

Код


<td aling=right><IMG id="imgbigsuits" src="student/5_b.jpg" style="border:1 solid #363C6B"></td>

\
А вот собственно код, котоый должен всем этим заниматься, но не работает smile

Код


var suitsBigImg        = new Array();

suitsBigImg[1]                = new Image();
suitsBigImg[1].src        = '/student/1_b.jpg'

suitsBigImg[2]                = new Image();
suitsBigImg[2].src        = '/student/2_b.jpg'

suitsBigImg[3]                = new Image();
suitsBigImg[3].src        = '/student/3_b.jpg'

suitsBigImg[4]                = new Image();
suitsBigImg[4].src        = '/student/4_b.jpg'

suitsBigImg[5]                = new Image();
suitsBigImg[5].src        = '/student/5_b.jpg'

suitsBigImg[6]                = new Image();
suitsBigImg[6].src        = '/student/6_b.jpg'

suitsBigImg[7]                = new Image();
suitsBigImg[7].src        = '/student/7_b.jpg'

suitsBigImg[8]                = new Image();
suitsBigImg[8].src        = '/student/8_b.jpg'

suitsBigImg[9]                = new Image();
suitsBigImg[9].src        = '/student/9_b.jpg'

suitsBigImg[10]                = new Image();
suitsBigImg[10].src        = '/student/10_b.jpg'

suitsBigImg[11]                = new Image();
suitsBigImg[11].src        = '/student/11_b.jpg'

suitsBigImg[12]                = new Image();
suitsBigImg[12].src        = '/student/12_b.jpg'

А пример можно посмотреть тут:
http://www.pkspo.spb.ru/index.php?page=student
Помогите пожалуйста. smile

Во вторник нужно сдать сайт.

Автор: GIK 15.10.2005, 13:30

Цитата

Сделать так, чтобы при наведении мышью на маленькую фотографию, справа появлялась таже фотка, но большая.

Используй событие onMouseOver, после которой вызывается функция, которая в свою очередь меняет картинку.

Автор: PARROT 15.10.2005, 13:49

GIK, можно более по подробнее?
Я вроде использую это событие. smile

Автор: Aliance 15.10.2005, 14:03

PARROT, забыла выложить саму функцию suitInit smile

Только предзагрузку smile

Итак, про второй аргумент тут понятно, мы решили что он делает :о)
Первый нужно ставить не this.href как у нас было раньше и тем более не this (иначе ты ссылаешься на картинку), а вручную прописывать имя БЕЗ формата

Код


<td align=center><img src="<?=$mas[1].'.jpg';?>" onmouseover="suitInit('<?=$mas[1].'_b.jpg';?>', 0); this.style.filter = 'alpha(opacity=100)';" style="FILTER: alpha(opacity=30)" onmouseout="suitInit('<?=$mas[1].'_b.jpg';?>', 1);this.style.filter = 'alpha(opacity=30)'"  style='cursor:pointer'></td>

Добавлено @ 14:05
PS: массив измени так, чтоб он был БЕЗ .jpg на конце

Автор: PARROT 15.10.2005, 14:09

Aliance, а вот насчет функции... у меня ее нет. smile

Щас попробую поискать.

Автор: Aliance 15.10.2005, 14:13

В ICQ есть history там она есть smile

Код


 function suitInit (uri, state) {
   var main_image = document.getElementById('main_img');
   if (state == 1) {
      main_image.src = uri;
   } else {
      main_image.src ='';
   }
}

Но это не лучший вариант smile

Дай мне строение твоего массива PHP - напишу целиком скрипт smile

Добавлено @ 14:14
Господин GIK - пока вы не научитесь правильной работе с подсветкой форума - я Ваши посты буду скрывать!
Кроме того, PARROT - она! smile

Автор: GIK 15.10.2005, 14:16

Цитата

Кроме того, PARROT - она!

Сори

Автор: PARROT 15.10.2005, 14:16

Код


<table width=60% cellpadding="0" cellspacing="0" valign=top align=center>
<tr>
<td>
<table width=30% cellpadding="0" cellspacing="5" valign=top>
<?
$res2=mysql_query("SELECT * FROM foto");
$i = 0;
$cols = 4;
?>
<tr>
<?
while($mas = mysql_fetch_array($res2)) {
 if($i==$cols) {
?>
</tr><tr>
<?
$i = 0;
}
?>
<td align=center><img src="<?=$mas[1];?>" onmouseover="suitInit(this, 1); this.style.filter = 'alpha(opacity=100)';" style="FILTER: alpha(opacity=30)" onmouseout="suitInit(this, 1);this.style.filter = 'alpha(opacity=30)'"  style='cursor:pointer'></td>
<?
$i++;
}
?>
</tr>
</table>
</td>
<td aling=right><IMG id="imgbigsuits" src="student/5_b.jpg"></td>
</tr>
</table>

Вот фотки без префикса _b.jpg, лежат в базе.

Автор: GIK 15.10.2005, 14:43

Чесно говоря, я не понял у скольких картин нужно менять размер?
Объясните задачу по подробнее?

Код


functon img_v (type)
{ switch (type)
  {case "over": 
       document.images1.src.width=240 
       break;
    case "out":
       document.images1.src.width=120
      break;
  
   }

 }

Код


  onmouseout="img_v(out)"
  onmouseover="img_v(over)"

Р.S. Как всеже правильно использовать подсветку?

Автор: PARROT 15.10.2005, 14:48

Цитата(GIK @ 15.10.2005, 15:43)

Чесно говоря, я не понял у скольких картин нужно менять размер?

Не менять размер, а вызывать такую же картинку, но большого размера.
А количество, зависит от количества элементов массива:

Код


<?=$mas[1];?>

Автор: GIK 15.10.2005, 14:56

Цитата

Не менять размер, а вызывать такую же картинку, но большого размера.

Ну и загружай себе любую картину из папки.

Код


document.img1.src="1.gif"

После вызова функции

Код


document.img1.src="1_b.gif"

Или я опять что-то непонял?

Автор: PARROT 15.10.2005, 15:17

Вот результат работы: http://forum.vingrad.ru/index.php?act=ST&f=74&t=67445&st=0

Автор: Sardar 15.10.2005, 20:37

PARROT ты обращаешся к функции suitInit, которой нет. Если этот код ты где то вырезала, то его выбрасываем, пишем эквивалент:

Код

//так как пути однотипные, то создатим их по шаблону от 1-12
var imgs=loadImages([1,12], '/student/[::item::]_b.jpg');
var empty_image='/images/empty.jpg'; //пустая картинка

function loadImages(row, tpl) {
  var imgs=[];
  for(var i=row[0]; i<=row[1]; i++) {
    imgs[i]=new Image();
    imgs[i].src=tpl.replace('[::item::]', i);
  }
  return imgs; 
}

//вызываем это из onmouseover, передаём порядковый номер первым параметром
function showImage(num) {
  document.getElementById('big_image').src=imgs[num];
}

//а это вызываем в onmouseout
function hiddeImage() {
  document.getElementById('big_image').src=empty_image;
}

Естественно что все изменения маленькой картинки(прозрачность и т.п.) нужно делать также в (show/hidde)Image.