Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » JS: всплывающая картинка при наведении на ссылку

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

z_IFIR



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Нужен скрипт, который при наведении на ссылку формировал бы всплывающее окно и показывал в нем картинку заданного (небольшого) размера.

----------
in суслик we trust!





Исправил название /Cheery/

Всего записей: 1617 | Зарегистр. 13-06-2002 | Отправлено: 12:33 04-03-2005 | Исправлено: Cheery, 21:25 13-03-2005
3xp0



Moderator
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var kartinka1 = new Image();
var kartinka2 = new Image();
var kartinka3 = new Image();
 
kartinka1.src = "111.jpg";
kartinka2.src = "222.jpg";
kartinka3.src = "333.jpg";
 
function dayFotku(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}
//  End -->
</script>
 
<a href="линк" onmouseover="dayFotku('kartinka1')">ТВОЯ ССЫЛКА</a>
<a href="линк" onmouseover="dayFotku('kartinka2')">ТВОЯ ССЫЛКА2</a>
<a href="линк" onmouseover="dayFotku('kartinka3')">ТВОЯ ССЫЛКА3</a>

Всего записей: 6398 | Зарегистр. 22-09-2002 | Отправлено: 12:51 04-03-2005
z_IFIR



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
не работает
 
Добавлено:
 а я кажется нашел то, что мне нужно - http://www.bosrup.com/web/overlib/

Всего записей: 1617 | Зарегистр. 13-06-2002 | Отправлено: 11:14 12-03-2005
kb82

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
3xp0
Зачем писать неотлаженные, неправильные скрипты? (похоже, просто часть скрипта выдрана откуда-то).
Вот более меннее работающий скрипт (кривовато, но переделал навскидку из-то, что 3xp0 написал):
 
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var kartinka1 = new Image();
var kartinka2 = new Image();
var kartinka3 = new Image();
 
kartinka1.src = "1.jpg";
kartinka2.src = "2.jpg";
kartinka3.src = "3.jpg";
 
function dayFotku(picimage) {
document.images['picture'].src = eval(picimage + ".src");
}
//  End -->
</script>
<body>  
<a href="#" onmouseover="dayFotku('kartinka1')">&#210;&#194;&#206;&#223; &#209;&#209;&#219;&#203;&#202;&#192;</a>
<a href="#" onmouseover="dayFotku('kartinka2')">&#210;&#194;&#206;&#223; &#209;&#209;&#219;&#203;&#202;&#192;2</a>
<a href="#" onmouseover="dayFotku('kartinka3')">&#210;&#194;&#206;&#223; &#209;&#209;&#219;&#203;&#202;&#192;3</a>
<br>
 
<img src="0.jpg" name="picture">
</body>  

Всего записей: 122 | Зарегистр. 03-03-2005 | Отправлено: 10:00 14-03-2005
Yarkij



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А собственно!
Так и не было ответа в этом топе, как сделать всплывающую картинку?

http://www.bosrup.com/web/overlib/
тут только всплывающий текст!...
а коды в топе приведены для изменения картинки.. а не всплывающей...
 
Возможно чтобы на подобии этого текста сделать картинку????
 
Спасибо)

Всего записей: 111 | Зарегистр. 21-02-2005 | Отправлено: 12:20 19-03-2005
mutano



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Yarkij
Картинку вначале перемести за грань страници, чтоб видно небыло
<картинка>style.left=-1000 например и также с ТОПом, потом когда онмаусмув по ссылке картинку на нужное мето перемещай, а потом кагда мыш уйдет с картинки(непомню как событие называется) пряч картинку обратно

----------
Одна голова хорошо, а два сапога - пара.

Всего записей: 568 | Зарегистр. 10-03-2005 | Отправлено: 13:18 19-03-2005
Yarkij



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
mutano
Cпасибо)
но у мя со скриптами совсем туго(
пхпня эт еще да..  
а вот скрипты.... я профан

Всего записей: 111 | Зарегистр. 21-02-2005 | Отправлено: 15:55 19-03-2005
Yarkij



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кто-то может помочь готовым примером????

Всего записей: 111 | Зарегистр. 21-02-2005 | Отправлено: 00:07 21-03-2005
mutano



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Yarkij
У меня чесно говоря тоже не очень, мне что б че-нибудь написать надо вначале, часа 2 читать учебники, я JS уже года так 2 не писал
Попробуй уже напечатаные здесь исходники поправить

Всего записей: 568 | Зарегистр. 10-03-2005 | Отправлено: 08:55 21-03-2005 | Исправлено: mutano, 08:59 21-03-2005
Yarkij



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
mutano
те коды что написаны чуть не то что мне надо!
а ОвеЛиб... у меня не получаеться туда картинку воткнуть...
хотя это именно то что мне нужно)

Всего записей: 111 | Зарегистр. 21-02-2005 | Отправлено: 14:48 21-03-2005
z_IFIR



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Во-первых, спасибо всем, кто помогал!
 
Во-вторых, еще раз насчет
http://www.bosrup.com/web/overlib/
 
Вот сайт (правда еще не доделанный), где реализована именно картинка с помощью этой библиотеки - http://lstk.ru
 
Всплывающие картинки находятся в разделе Фотографии. Смотрите, там по коду все будет понятно.
 
Вообще, имхо, у этой overlib очень большие возможности!

----------
in суслик we trust!

Всего записей: 1617 | Зарегистр. 13-06-2002 | Отправлено: 16:01 21-03-2005
mutano



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
z_IFIR
Балин! Ты бы обьяснил толком че тебе надо, а то имхо все кроме тебя думали, что надо картинку вместо ссылки вставить

Всего записей: 568 | Зарегистр. 10-03-2005 | Отправлено: 19:08 21-03-2005
Yarkij



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
z_IFIR
Лучший!!!
спасибо!
помог капитально!
 
mutano
имхо - он красиво тему назвал и описал чо хотит!)

Всего записей: 111 | Зарегистр. 21-02-2005 | Отправлено: 03:24 23-03-2005
RollingWall



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Можно и так:
 

Код:
 
 
<head>
  <title></title>
   
  <script>
 
function langas ( adres,foto_tekst,sirina_okna,vysota_okna,foto_width,foto_height,poz_sleva,poz_sverhu )  
{
       myWin= open("", "displayWindow", "width="+sirina_okna+",height="+vysota_okna+",status=no,toolbar=no,menubar=no,resizable=no,left="+poz_sleva+",top="+poz_sverhu+"");
  myWin.document.open();  
  myWin.document.write("<html><head><title>foto</title><LINK href='css.css' type=text/css rel=stylesheet><META HTTP-EQUIV='Content-Type' CONTENT='text/html; CHARSET=Windows-1251'>");
  myWin.document.write("</head><body bgcolor=white topmargin=0 leftmargin=0>");
  myWin.document.write("<center><br>");
  myWin.document.write("<img src='images/"+adres+"' width="+foto_width+" height="+foto_height+" border=0 align='left' valign='top'> <font class='tekstas_maz_lange'>"+foto_tekst+"</font>");    
  myWin.document.write("</center>");    
  myWin.document.write("<br></center>");
  myWin.document.write("</body></html>");  
  myWin.document.close();
}
</script>
 
</head>
 
<body>
 
<a href="javascript: langas('1.jpg','PhotoGallery PhotoGallery PhotoGallery PhotoGallery PhotoGallery',300,160,100,100,10,10);">
<img src="images/1.jpg" width="40" height="40" alt="" vspace="3" border="0" align="middle">
</a>
 
</body>
 
 

 
Вроде везде срабатывает, да и в одной строке можно все параметры сразу задать и даже, наверное, автоматизировать.

Всего записей: 6 | Зарегистр. 15-04-2005 | Отправлено: 11:08 15-04-2005
Mistica



Junior Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Заслали меня сюда, но здесь тоже все не то....

Цитата:
Всем привет!  
Уже сижу несколько дней в поисковиках, но так ничего путного не нашла с чем я могла бы справиться.
Суть проблемы:
имеется огромная таблица (учитывается ее пополнение в будущем) с сылками и сортировкой, мне нужно чтоб при наведении на ссылку показывалась картинка как вот на этих сайтах:
 
1. http://lon.allakhazam.com/db/cardlist.html?listby=card_set;sublistby=oathbound
2. http://www.animationfactory.com/en/clipart.html?cid=E1
 
Как реализованно все это на втором сайте ОЧЕНЬ мне подходит и более менее просто в создании основного контента, но вот стили и скрипт, там для меня сплошные дебри! со своим не знанием js и не очень хорошим html и css я так и не нашла как избавиться от title сайта в превью картинки и еще не поняла может он работать с прямой сссылкой на картинку или нет и т.п. и еще там в скрипте много где прописан их сайт.
 
Со скриптом первого сайта сложности в позиционировании - никак не удеется сдвинуть div вниз по вертикали, да и вообще во все стороны :/  (хотелось бы четко посередине окна браузера или где-нибудь в углу). и еще к каждой ссылке пописывать onMouseOver....заколебешься - мягко говоря. да и черт знает сколько всего там лишнего....  
 
Оба первых варианта работают в IE NN и  FF - что и требуется.
 
http://videoflm.narod.ru/index.html здесь тоже реализация мне понравилась, но не работает в IE и NN (оперой не тестилось) но там я не шарилась в скриптах и стилях.
 
Конечно самое порстое для меня решение было на css, но оно грузит весь контент (скрытый) - может есть скрипт который запрещает загрузку пока на ссылку мышь не наведешь? штук двадцать ссылок еще можно реализовать, но для 200 не подходит.
 
php и прочее использовать не могу - не поддерживает.
 
Надеюсь на ваши советы и помощь.  

 
Наверное по моим ссылкам никто не ходил..... ?!  
Ну а по последнему скрипту в этом топике, картинка не прячется когда мышь убираешь, да и скрипт в в моем случаее, будет расти вместе с основным кодом., ну это еще ничего наверное если б знать, как ее позиционировать....
Может есть готовое решение по тем же tooltip? (картинка всплывает при наведении мыши и прячется при отведении, не загружается вместе с основным документом, позиционирование легко прописать...)  
Не перепутайте со скриптом подмены, а то так вся таблица удет с моими то знаниями
 
http://www.frequency-decoder.com/demo/link-preview-v2/websnapr.zip  не качается (( а сохранением страницы не выдирается стиль (((  Но я так понимаю он работает только с ссылками на страницу.  А на такую <a href="1.jpg">1</a> его можно настроить?  тогда мне останеться только класс поменять и стиль подстироить...

Всего записей: 79 | Зарегистр. 04-03-2004 | Отправлено: 09:04 29-04-2009
AlekseyK

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подскажите, пожалуйста, как сделать следующее:
имеется страница с кучей ссылок на картинки вида foto/10201.png
нужно подключить к странице скрипт/CSS, который бы автоматом брал картинку из ссылки и показывал ее при наведении на эту ссылку

Всего записей: 194 | Зарегистр. 27-01-2002 | Отправлено: 13:49 30-03-2010
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » JS: всплывающая картинка при наведении на ссылку


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru