реализация экрана..ссылка картинка на экране.

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

реализация экрана..ссылка картинка на экране.

Как реализовать такую задумку.
пример.
ссылка1
ссылка2
ссылка3
...

--------------------------
|..............................|
|.........экран...........|
|_______________|

при наведении на ссылки на экране повяляется картинка которая соответствует ссылке 1 (2,3...) + пока картинка грузится играет гиф загрузка (как во флешь прелоадер) как только она загрузилась появляется на экране..

oIo_DeN_oIo

Цитата:

пока картинка грузится играет гиф загрузка

а пока грузится гиф загрузка, у пользователя играют нервы... :)

oIo_DeN_oIo
Алгоритмически:
1) Ссылки лучше сделать не ссылками, а

Код:

<p url="someUrl" onclick="linkClick(this)">some picture</p>

и не стесняться нестандартного атрибута у тега абзаца;
2) "Экран" пусть представляет собой два слоя расположенных друг над другом, где первый (divLoading) - слой показа псевдопрогресса загрузки, а второй (divImg) - слой показа загруженного изображения с пустым пока тегом изображения (imgImg):

Код:

<img src="" onLoad="divLoading.style.display = 'none'">

3) function linkClick(p) должна делать следующие вещи:
а) Извлекать из переданной ссылки на абзац значение url (p.getAttribute('url'));
б) показывать divLoading: divLoading.style.display = 'block';
в) присваивать imgImg.src = url;

За некоторым числом нюансов это все.

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

oIo_DeN_oIo

HTML код:

<script>

<!-- 

function image_url(jpg){

document.getElementById('ekran').style.backgroundImage='url('+jpg+')';

document.getElementById('ekran').style.backgroundRepeat='no-repeat';

}

function out(){

document.getElementById('ekran').style.backgroundImage='none';

}

//-->

</script>

<div id="ekran" style="width: 150px; height: 100px; border: thin dotted">

Экран 100 на 150

</div>

<a href="http://link1.ru" onmouseover="image_url('picture1.gif')" onmouseout="out()">одна ссылочка</a><br>

<a href="http://link2.ru" onmouseover="image_url('picture2.gif')" onmouseout="out()">вторая ссылочка</a>

........

Цитата:

вот накидал по быстрому... функцию сможешь сделать?

наверно нет :sorry:

oIo_DeN_oIo я обновил свой пост с кодом. :) Картинки еще прелоудить надо... функция прелоуда картинок обсуждалась здесь http://forum.oszone.net/thread-72995.html