Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Галерея, наведение мышью на объект 
:(
    Опции темы
PARROT
Дата 15.10.2005, 13:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50



Здравствуйте!
Вот у меня такая задача:
Сделать так, чтобы при наведении мышью на маленькую фотографию, справа появлялась таже фотка, но большая.
Тоесть имеем: 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 Во вторник нужно сдать сайт.

Это сообщение отредактировал(а) PARROT - 15.10.2005, 13:06


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
GIK
Дата 15.10.2005, 13:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



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

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


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
PARROT
Дата 15.10.2005, 13:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50



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

Это сообщение отредактировал(а) PARROT - 15.10.2005, 13:50


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
Aliance
Дата 15.10.2005, 14:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



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 на конце

Это сообщение отредактировал(а) Aliance - 15.10.2005, 14:04
PM MAIL WWW ICQ Skype   Вверх
PARROT
Дата 15.10.2005, 14:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50



Aliance, а вот насчет функции... у меня ее нет. smile Щас попробую поискать.


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
Aliance
Дата 15.10.2005, 14:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



В 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
PM MAIL WWW ICQ Skype   Вверх
GIK
Дата 15.10.2005, 14:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



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

Сори smile


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
PARROT
Дата 15.10.2005, 14:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50



Код

<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, лежат в базе.


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
GIK
Дата 15.10.2005, 14:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



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

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. Как всеже правильно использовать подсветку?


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
PARROT
Дата 15.10.2005, 14:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50



Цитата(GIK @ 15.10.2005, 15:43)
Чесно говоря, я не понял у скольких картин нужно менять размер?

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

<?=$mas[1];?>


Это сообщение отредактировал(а) PARROT - 15.10.2005, 14:51


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
GIK
Дата 15.10.2005, 14:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



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

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

document.img1.src="1.gif"

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

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

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


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
PARROT
Дата 15.10.2005, 15:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50



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


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
Sardar
Дата 15.10.2005, 20:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



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.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0546 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.