Всплывающее окно - нужно просто вытащить скрипты с другого сайта. Буду благодарен

@Bars999 · Регистрация: 14.12.2013

Студворк — интернет-сервис помощи студентам

Как сделать на сайте чтоб при наведении на картинку появлялся блок с описание пример как на картинке

Всплывающее окно - нужно просто вытащить скрипты с другого сайта. Буду благодарен

Это взято с сайта у них все готово и работает помогите вытащить от туда нужные скрипты и коды чтоб у меня тоже работало, буду очень благодарен.
Вот сам сайт (http://w1.dwar.ru/info/news/?show=news&id=2390)

Мне нужно, чтоб я мог взять от туда нужный код с картинкой и у меня была сама картинка и описание появлялась при наведении на нее.

Комментарий модератора

Прикрепляйте файлы и изображения к сообщениям.
https://www.cyberforum.ru/abou... post594251

@Gezerg · 26.01.2014, 09:59

Решение взято не совсем с сайта w1.dwar.ru
Мне тоже как-то нужно было такое реализовать.
Я делал вот так:

Код HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
     <title>День учености в Фэо щедр на подарки!</title>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="tooltip.js"></script>
</head>
 
<body>
<a href="#" title="
    <div class='title'>Колокольчик &laquo;Конец зубрешки&raquo;</div>
    <img src='http://w1.dwar.ru/images/data/artifacts/g_sd_7.gif' />
    <div class='description'>
        Звон таких колокольчиков возвещает о завершении скучных занятий и бесконечных лекций. Этот           подарок, отлитый из чистейшего золота, будет услаждать слух хозяина, напоминая о том, что любые мучения когда-нибудь заканчиваются. 
    </div>
    ">
    <img src="http://w1.dwar.ru/images/data/artifacts/g_sd_7.gif" />
</a>
......
</body>
</html>

Файл style.css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
a{
     color:#333;
     width:60px;
     height: 55px;
     text-decoration:none;
     text-align:center;
}
.title{
    width: 100%;
    text-align: center;
    border: 2px solid #ccc;
}
.tooltip{
     position:absolute;
     left:-2000px;
     background:#dedede;
     padding:5px;
     border:1px solid #fff;
     width:250px;
}
 
.tooltip p{
     margin:0;
     padding:0;
     color:#fff;
     background:#222;
     padding:2px 7px;
}

Файл tooltip.js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
        var my_tooltip = $("#"+name+i);
        
        $(this).removeAttr("title").mouseover(function(){
                my_tooltip.css({opacity:0.9, display:"none"}).fadeIn(400);
        }).mousemove(function(kmouse){
                my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
        }).mouseout(function(){
                my_tooltip.fadeOut(400);                  
        });
    });
}
 
    
$(document).ready(function(){
     simple_tooltip("a","tooltip");
});

Работает в точности как на том сайте.

@Bars999 · 26.01.2014, 11:36 **[ТС]**

не то(

@PeterLS · 26.01.2014, 13:06

А что если вот такой вариант переделать под себя?

@Bars999 · 26.01.2014, 13:09 **[ТС]**

PeterLS, Мне любой главное чтоб работало, и желательно взять с w1.dwar.ru - так как вся идея в том что эти маленькие картинки я и буду драть за основу с их сайта, а пользоветель наводя на них будет видить подробную информацию все как на скрине, хотелось бы видеть

@PeterLS · 26.01.2014, 13:14

Вот еще мысли

Добавлено через 1 минуту
И еще
Собери все это и получишь то что тебе нужно. Я бы мог сделать, но тогда ты так и не поймешь как это делается.

@Bars999 · 26.01.2014, 13:16 **[ТС]**

PeterLS, 2 вариант на ios не будет работать(

@PeterLS · 26.01.2014, 13:30

Попробуй использовать событие onmouseover и onmouseout (кстати на твоем сайте в примере используется именно это событие).
Более подробно о них здесь.
А пример здесь.

@Bars999 · 26.01.2014, 13:38 **[ТС]**

PeterLS, Основной сайт у меня на dle) на козе просто тестирую все разработки.
Мне бы поставить нужные скрипты и CSS

Чтоб я из их скрипта вытаскивал

HTML5
1
2
3
<!-- art3729 -->
<span div_id="AA_3729" style="position: relative; display: inline-block; background: url(http://w2.dwar.ru/images/data/artifacts/snejny_fio.gif); width:60px; height:60px; cursor:pointer; vertical-align: bottom; margin: 0 0.25em 0.25ex 0;" onmouseover="artifactAlt(this,event,2)" onmouseout="artifactAlt(this,event,0)" onclick="window.open('http://w2.dwar.ru/artifact_info.php?artikul_id=3729', '', 'width=700,height=550,location=yes,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false;"></span>
<!-- // art3729 -->

и

JavaScript
1
<script type="text/javascript">art_alt["AA_3729"] = {"id":"3729","title":"\u0412\u043e\u043b\u0448\u0435\u0431\u043d\u0430\u044f \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0430","kind_id":"34","color":"#990099","image":"\/images\/data\/artifacts\/snejny_fio.gif","picture":"\/images\/data\/artifacts\/snejny_fio.gif","kind":"\u041a\u0432\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u0432\u0435\u0449\u0438","price":"<span title=\"\u041c\u0435\u0434\u043d\u044b\u0439\"><img src=\"\/images\/m_game1.gif\" border=0 width=11 height=11 align=absmiddle><\/span>&nbsp;1","skills_e":[],"exp":{"title":"\u0412\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438","value":"60\u0434"},"nogive":"\u041f\u0440\u0435\u0434\u043c\u0435\u0442 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c","noweight":"\u041f\u0440\u0435\u0434\u043c\u0435\u0442 \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0435\u0441\u0442\u0430 \u0432 \u0440\u044e\u043a\u0437\u0430\u043a\u0435","flags2":{"cant_put_in_storage":"\u041f\u0440\u0435\u0434\u043c\u0435\u0442 \u043d\u0435\u043b\u044c\u0437\u044f &laquo;\u0437\u0430\u043c\u043e\u0440\u043e\u0437\u0438\u0442\u044c&raquo;"},"desc":"\u041f\u0440\u0435\u043b\u0435\u0441\u0442\u043d\u0430\u044f \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0430, \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0432 \u0441\u0432\u043e\u0435\u043c \u0440\u043e\u0434\u0435, \u0442\u0430\u043a \u043a\u0430\u043a, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0438\u0445 \u0441\u043e\u043f\u043b\u0435\u043c\u0435\u043d\u043d\u0438\u0446, \u0442\u0430\u0435\u0442 \u043e\u043d\u0430 \u043a\u0440\u0430\u0439\u043d\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e. \u042d\u0442\u043e\u0442 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0430\u0440 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0443 \u0414\u0443\u0445\u0430 \u041d\u043e\u0432\u043e\u0433\u043e \u0413\u043e\u0434\u0430 \u0432 \u043d\u0430\u0433\u0440\u0430\u0434\u0443 \u0437\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0432 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0435\u0441\u0435\u043b\u043e\u0433\u043e \u043f\u0440\u0430\u0437\u0434\u043d\u0438\u043a\u0430.\r\n\r\n<I>\u0412\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u0435 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438 \u043f\u0440\u043e\u043f\u0430\u0434\u0443\u0442 \u0438\u0437 \u043c\u0438\u0440\u0430 \u0424\u042d\u041e \u0441 \u043f\u0440\u0438\u0445\u043e\u0434\u043e\u043c \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0434\u043d\u044f \u0432\u0435\u0441\u043d\u044b.<\/I>","nosell":"\u041f\u0440\u0435\u0434\u043c\u0435\u0442 \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0434\u0430\u0442\u044c \u0432 \u0441\u043a\u0443\u043f\u043a\u0443","drop":true,"add_attrs":" artikul_id=\"3729\"","icon_list":["drop","info"],"action":"info","_act1":0,"_act2":3,"_act3":0,"_act4":0};</script>

И былобы отлично если у меня все работало бы)

@PeterLS · 26.01.2014, 13:46

А не проще тогда подключить все их скрипты себе и просто копировать куски их кода?

@Bars999 · 26.01.2014, 13:53 **[ТС]**

PeterLS, вот это то я и хочу, но что именно копировать не знаю, помоги пожалуйста

@PeterLS · 26.01.2014, 13:57

Я не знаю какой скрипт на том сайте отвечает за это. Я могу написать заново, но вытащить с сайта не смогу.

@Bars999 · 26.01.2014, 13:59 **[ТС]**

Былобы супер мне главное что бы работало, так же как и у них

@Gezerg · 26.01.2014, 14:03

Не знаю чем тебе мой вариант не устроил.
Вот сверстал так как на том сайте.

@PeterLS · 26.01.2014, 14:28

Bars999, тут прямо то, что Вам нужно. 100%
Это именно тот плагин. Можно создавать именно те подсказки, которые вы хотите видеть.

@Bars999 · 26.01.2014, 14:44 **[ТС]**

PeterLS, аж голова пухнет уже.
можно мне сам скрипт, css и с сайта w1.dwar.ru код любой картинки к примеру:

HTML5
1
2
3
<!-- art3729 -->
<span div_id="AA_3729" style="position: relative; display: inline-block; background: url(http://w2.dwar.ru/images/data/artifacts/snejny_fio.gif); width:60px; height:60px; cursor:pointer; vertical-align: bottom; margin: 0 0.25em 0.25ex 0;" onmouseover="artifactAlt(this,event,2)" onmouseout="artifactAlt(this,event,0)" onclick="window.open('http://w2.dwar.ru/artifact_info.php?artikul_id=3729', '', 'width=700,height=550,location=yes,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false;"></span>
<!-- // art3729 -->

чтоб я все поставил и все заработало, а дальше я уже пойму принцип, а то запутался я( уже как с неделю мучаюсь

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	26.01.2014, 11:36 [ТС]
	не то( 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	26.01.2014, 13:06
	А что если вот такой вариант переделать под себя? 1

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	26.01.2014, 13:09 [ТС]
	PeterLS, Мне любой главное чтоб работало, и желательно взять с w1.dwar.ru - так как вся идея в том что эти маленькие картинки я и буду драть за основу с их сайта, а пользоветель наводя на них будет видить подробную информацию все как на скрине, хотелось бы видеть 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	26.01.2014, 13:14
	Вот еще мысли Добавлено через 1 минуту И еще Собери все это и получишь то что тебе нужно. Я бы мог сделать, но тогда ты так и не поймешь как это делается. 1

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	26.01.2014, 13:16 [ТС]
	PeterLS, 2 вариант на ios не будет работать( 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	26.01.2014, 13:30
	Сообщение было отмечено Bars999 как решение Решение Попробуй использовать событие onmouseover и onmouseout (кстати на твоем сайте в примере используется именно это событие). Более подробно о них здесь. А пример здесь. 1

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	26.01.2014, 13:46
	Сообщение было отмечено Bars999 как решение Решение А не проще тогда подключить все их скрипты себе и просто копировать куски их кода? 1

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	26.01.2014, 13:53 [ТС]
	PeterLS, вот это то я и хочу, но что именно копировать не знаю, помоги пожалуйста 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	26.01.2014, 13:57
	Я не знаю какой скрипт на том сайте отвечает за это. Я могу написать заново, но вытащить с сайта не смогу. 1

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	26.01.2014, 13:59 [ТС]
	Былобы супер мне главное что бы работало, так же как и у них 0

@Gezerg 4 / 4 / 2 Регистрация: 01.12.2012 Сообщений: 39
	26.01.2014, 14:03
	Не знаю чем тебе мой вариант не устроил. Вот сверстал так как на том сайте. 0

@PeterLS 71 / 69 / 22 Регистрация: 24.11.2012 Сообщений: 502 Записей в блоге: 1
	26.01.2014, 14:28
	Bars999, тут прямо то, что Вам нужно. 100% Это именно тот плагин. Можно создавать именно те подсказки, которые вы хотите видеть. 1