 Нужна помощь с Javascript |
На этом месте находится расчудесная шапка. Включите flash - не пожалеете!
Новости форума
Здравствуйте, гость ( Вход | Регистрация )
  |
| abrodski |
 7.7.2010, 3:03
Сообщение
#1
|
 Турист  Группа: Пользователи Сообщений: 12 Регистрация: 25.4.2010 Из: Sweden Пользователь №: 29 756 Репутация:  0   |
Здрасте всем!
Мой сайт работает на Джумле. Я нашел где-то на просторах Интернета такой вот текст на англ. яз. про то как можно с помощью JavaScript сделать так чтобы когда наводишь курсор мышки на фотку, то тут же появлялась бы другая фотка (скажем бОльшего размера и т.д.) Вот оригинальный текст описание и код: Changing images with MouseOver and MouseOut events This is probably the most common use of Javascript. There are countless ways to get this working, but I present one that I use frequently. This script like many of my other ones rely on numbered image files. Make images with names such as org0.jpg, org1.jpg and org2.jpg. These would be initially displayed. Get 3 more files named new1.jpg, new2.jpg and 3.jpg which would be the files displayed when the mouse is over the original images. <script LANGUAGE = "JavaScript"> <!-- function new_img(no){ document.images[no].src="new"+no+".jpg"; } function org_img(no){ document.images[no].src="org"+no+".jpg"; } --> </SCRIPT> <BODY> <IMG SRC="org0.jpg" onMouseOver="new_img(0)" onMouseOut="org_img(0)"> <IMG SRC="org1.jpg" onMouseOver="new_img(1)" onMouseOut="org_img(1)"> <IMG SRC="org2.jpg" onMouseOver="new_img(2)" onMouseOut="org_img(2)"> </BODY> Во-первых, мне кажется что они вообще ошиблись, т.к. если идет org0.jpg, org1.jpg и т.д. то соответственно должно быть и new0.jpg, new1.jpg и т.д. А у них сразу идет new1.jpg Например, у меня есть статья и в ней есть фотка. Можно ли с ней сделать этот трюк? И как? Я пытался с помощью модуля Custom HTML. Но у меня вышло что фотка появлялась там где была позиция модуля, а трюк вообще не работал.  -------------------- www.asylum-seeker.org
forum.asylum-seeker.org gallery.asylum-seeker.org |
   |
 
|
| abrodski |
9.7.2010, 10:20
Сообщение
#2
|
|
Турист Группа: Пользователи Сообщений: 12 Регистрация: 25.4.2010 Из: Sweden Пользователь №: 29 756 Репутация: 0 |
Мне помогли на другом форуме и после 2 часов экспериментов я нашел такое решение.
Я поместил следующий JS код в Custom HTML модуль и разместил его в позиции copyright моего шаблона. <script type="text/javascript"> (function () { var el, id, imgSwap = { // Create the map of id to images img1: { oldImg: 'images/stories/org0.jpg', newImg: 'images/stories/new0.jpg' } }; for (id in imgSwap) { if (imgSwap.hasOwnProperty(id)) { el = document.getElementById(id); if (el) { // Attach event handlers el.onmouseover = function (el, src) { return function () { el.src = src; }; }(el, imgSwap[id].newImg); el.onmouseout = function (el, src) { return function () { el.src = src; }; }(el, imgSwap[id].oldImg); } } } })(); </script> После этого я открыл статью там где я в свое время разместил ту фотку на которую наводится курсов мыши (т.е. оригинальное изображение, которое мы и меняем). Я её открыл без редактора noeditor, так чтобы иметь доступ к её коду. Там внизу я нашел тэг img и оно выглядело так <img src="images/stories/org0.jpg" border="0" etc..... Я добавил это id="img1" и получилось следующие: <img src="images/stories/org0.jpg" id="img1" border="0" etc..... Теперь все работает, но проблема с задержкой. Проходит 1-2 сек. ПОСЛЕ наведения курсора мыши до того момента когда появляется 2-я фотка. После этого уже дилея не наблюдается, но хотелось бы найти способ сделать так чтобы ОБА имиджа грузились СРАЗУ! Мне кое-кто пытался помочь с этим и вот что он написал, но я не совсем понял... ok as it seems to me the easiest way is to create an external js-file and then put the link to it into the head section of your page. or create an external css-file linking it the same way to the page. but there is a difference between these 2 solutions. no doubt Kor is right about css. it seems much easy to be done. but using css or the js from my first post will cause a lag during the first image changing for every involved image. in other words every firstly loading image needs some time to be loaded. the method which i've been talking about in my second post changing the images will act without any lag because all the images involved in this function are already loaded with the page. if we talk about little images there is no any difference but if the images are not that little the lag mentioned above will take place. so you have to decide it by yourself. Может кто знает? -------------------- www.asylum-seeker.org
forum.asylum-seeker.org gallery.asylum-seeker.org |
|
|
|
| Nii |
10.7.2010, 19:17
Сообщение
#3
|
|
Только зарегистрировавшийся Группа: Пользователи Сообщений: 1 Регистрация: 10.7.2010 Пользователь №: 30 372 Репутация: 0 |
Ну вообще в целом очень приятно разбираться в коде без выделения - это я так тонко намекаю на тег [code].
А если по делу то: создаётся ощущение что вы не совсем понимаете что делаете, - но независимо от этого хотите всё же это сделать. - и как бы эффект от этого не очень высок скажем так)) Конечно будет пауза - ибо при нажатии на картинку вы меняете ей путь - и браузер грузит другую картинку (большего размера) - что логично. Ещё более логично то что - вы очевидно не имеете возможности сделать загрузку картинки мгновенно. Отсюда напрашивается загрузка картинки заранее. То есть алгоритм такой - вы грузите сразу две картинки - одна большая - другая маленькая - браузер кеширует их и когда вы нажимаете на картинку и меняете путь - то браузер просто показывает большую вместо маленькой - сразу же (ибо загружена). Вот вам ссылка: вот ещё ссылка а вообще достаточно одной) И сдаётся мне что вы разберётесь теперь со всем сами. |
|
|
|
| abrodski |
12.7.2010, 4:58
Сообщение
#4
|
|
Турист Группа: Пользователи Сообщений: 12 Регистрация: 25.4.2010 Из: Sweden Пользователь №: 29 756 Репутация: 0 |
Да я уже и так во всем разобрался и все работает (можете зайти на сайт посмотреть)...только не пугайтесь, т.к. он в процессе разработки (я его держу live тем не менее).
В Джумле надо открыть статью без редактора в HTML коде и прописать id=''img1'' как в примере <img src="images/stories/org0.jpg" id="img1" border="0" И потом сделать Custom HTML модуль и в нем прописать такой код <script type="text/javascript"> (function () { var el, id, imgSwap = { // Create the map of id to images img1: { oldImg: 'images/stories/org0.jpg', newImg: 'images/stories/new0.jpg' } }; for (id in imgSwap) { if (imgSwap.hasOwnProperty(id)) { el = document.getElementById(id); if (el) { // Attach event handlers el.onmouseover = function (el, src) { return function () { el.src = src; }; }(el, imgSwap[id].newImg); el.onmouseout = function (el, src) { return function () { el.src = src; }; }(el, imgSwap[id].oldImg); // Preload images var preloadImg = new Image(); preloadImg.src = imgSwap[id].newImg; } } } })(); </script> Правда если что либо изменяешь в статье, то потом приходится обновлять вручную id=''img1'' . Но это уже мелочи... P.S. Из 5-6 форумов где я спросил, только в одном по настоящему помогли. А так...болтология везде... Люди САМИ не разбираются и еще пытаются помочь. -------------------- www.asylum-seeker.org
forum.asylum-seeker.org gallery.asylum-seeker.org |
|
|
|
| ura ivanovich |
11.8.2011, 14:14
Сообщение
#5
|
|
Турист Группа: Пользователи Сообщений: 25 Регистрация: 10.6.2009 Пользователь №: 25 115 Репутация: 0 |
Предлагаем услуги по веб программированию сайтов
|
|
|
|
|
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
|
Текстовая версия | Сейчас: 22.5.2012, 17:22 |
|
|