Создать игру, создание игр, конструктора игр, игровые движки, разработка игр, сделать игру
Приветствую Вас Гость · Вход · Регистрация  ·  Новые сообщения · Участники · Правила · Поиск · RSS
Страница 1 из 11
Форум разработчиков игр » Для Веб-мастера » Скрипты JS » Картинная галерея
Картинная галерея
Hagrael Дата: Четверг, 08.07.2010, 12:16 | Сообщение # 1
Просмотр профиля: Hagrael

Сообщений: [1476]

  • Предварительная загрузка картинок (вы их не смотрите, а они в это время загружаются на ваш компьютер)

  • Переход от картинки к картинке осуществляется без перехода на другие страницы, запрос серверу не отправляется, что также экономит время

  • Наведя мышь на кнопку, вы увидите уменьшенное изображение картинки, ссылку на которую предоставляет эта кнопка


Ну, а вот, собственно, код:
Code
<html>

<head>
   <title>Картинная галерея</title>
   <script>
   image1=new Image()
   image2=new Image()
   image3=new Image()
   image4=new Image()

   image1.src='images_for_galery/1.jpg'
   image2.src='images_for_galery/2.jpg'
   image3.src='images_for_galery/3.jpg'
   image4.src='images_for_galery/4.jpg'

   function stimage() {
   document.images["mainimage"].src=image1.src
   document.images["mainimage"].border=4
   document.images["mainimage"].style.borderColor='#997246'
   }

   function changeimage(needimage) {
   document.images["mainimage"].src=needimage.src
   document.images["smallimage"].src='images/пустота.png'
   document.images["smallimage"].style.borderWidth=0
   }

   function showsmallimage(needimage,x) {
   if (document.images["mainimage"].src!=needimage.src) {
       document.images["smallimage"].style.left=x
       document.images["smallimage"].src=needimage.src
       document.images["smallimage"].style.borderWidth=2+'px'
   }
   }

   function hidesmallimage() {
   document.images["smallimage"].src='images/пустота.png'
   document.images["smallimage"].style.borderWidth=0+'px'
   }

   </script>
</head>

<body onload="stimage()">

<img name="smallimage" height="120" style="position: absolute; top: 435px; left: 453px; opacity: 0.6; border: 0px solid #997246;">

<center><img name="mainimage" height="399"><br><br>
<table><tr><td height="50" colspan="4"> </td></tr><tr></tr><td height="80" colspan="5"> </td><tr>
<td><input type="button" value="1" onClick="changeimage(image1)" onMouseOver="showsmallimage(image1,455)" onMouseOut="hidesmallimage()"></td>
<td><input type="button" value="2" onClick="changeimage(image2)" onMouseOver="showsmallimage(image2,485)" onMouseOut="hidesmallimage()"></td>
<td><input type="button" value="3" onClick="changeimage(image3)" onMouseOver="showsmallimage(image3,515)" onMouseOut="hidesmallimage()"></td>
<td><input type="button" value="4" onClick="changeimage(image4)" onMouseOver="showsmallimage(image4,545)" onMouseOut="hidesmallimage()"></td>
</tr></table>
</center>

</body>

</html>

Но я делал не для всеобщего пользования, и потому конкретной готовой функции нет, уж извиняйте. И работать без нужных картинок в нужной директории код не будет тоже (вполне логично).
Вот здесь можно скачать то, что вышло: URL


George & Daniel:
Война сухофруктов
PaintKiller Дата: Четверг, 08.07.2010, 12:56 | Сообщение # 2
Просмотр профиля: PaintKiller

Сообщений: [1739]
Круть!
Скорп Дата: Четверг, 08.07.2010, 12:58 | Сообщение # 3
( Космический мутант )
Просмотр профиля: Скорп

Сообщений: [936]
Красиво)

Рандомный текст.
Hagrael Дата: Четверг, 08.07.2010, 13:03 | Сообщение # 4
Просмотр профиля: Hagrael

Сообщений: [1476]
Всем СПС. А ведь можно было просто написать alert() happy happy happy
Но тогда было бы совсем не так красиво)


George & Daniel:
Война сухофруктов
Форум разработчиков игр » Для Веб-мастера » Скрипты JS » Картинная галерея
Страница 1 из 11
Поиск:

При полном или частичном копировании материалов сайта ссылка на Make-Games.ru обязательна. Make-Games.ru © 2008 - 2016 Хостинг от uWeb
Топ Разработка игр Рейтинг@Mail.ru