Помощник
|
Всплывающая картинка над ссылкой |
LordNighton
|
Сообщение
#1
|
||
|
|
||
|
|||
alexdrob |
12.1.2010, 18:34;
Ответить: alexdrob
Сообщение
#2
|
|
обсуждалось минут 10 назад)
http://www.html.by/showthread.php?t=9591 |
|
|
LordNighton
|
Сообщение
#3
|
|
alexdrob,это не то, что мне нужно. В ссылке, указанной Вами был пример на счет того, чтобы показывать картинку лишь там, где она уже есть и спозиционирована. В моей же версии скрипта картинка должна появляться рядом с курсором.
|
|
|
alexdrob |
12.1.2010, 23:47;
Ответить: alexdrob
Сообщение
#4
|
|
<!DOCTYPE html> <html> <head> <title>Untitled</title> </head> <script> function showImg(fn){ var el = document.getElementById('img'); if(fn) el.innerHTML = '<img src="' + fn + '" />'; else el.innerHTML =' '; } function move(){ var el = document.getElementById('img'); el.style.top = event.y; el.style.left = event.x; } </script> <body> <a href="#" onmouseover="showImg('http://html.by/images/icons/icon1.gif')" onmouseout="showImg('')" onmousemove="move()">??????</a> <a href="#" onmouseover="showImg('http://html.by/images/icons/icon2.gif')" onmouseout="showImg('')" onmousemove="move()">??????</a> <a href="#" onmouseover="showImg('http://html.by/images/icons/icon3.gif')" onmouseout="showImg('')" onmousemove="move()">??????</a> <a href="#" onmouseover="showImg('http://html.by/images/icons/icon4.gif')" onmouseout="showImg('')" onmousemove="move()">??????</a> <a href="#" onmouseover="showImg('http://html.by/images/icons/icon5.gif')" onmouseout="showImg('')" onmousemove="move()">??????</a> <div id="img" style="position:absolute;"></div> </body> </html> где картинка появится подгоняйте тут el.style.top = event.y-20;
ell.style.left = event.x-20; |
|
|
exponat |
13.9.2013, 18:31;
Ответить: exponat
Сообщение
#5
|
|
Полезный код!
Помогите мне пожалуйста. У меня цикл при выводе новостей. Вот при наведении на них хочу чтоб отображалась превью фото и дескрипшенс новости. У меня проблема вот в чем. Выше пример (где статически выводится изображение) реализовывается когда мы знаем точное количество ссылок и фото. А если у меня цикл в котором выводится 70 ссылок в столбец: [PHP]{ echo "<a class='link1' href='?action=news_inf&id=".$result_news['id']."' onmouseover=\"showImg('img1','http://www.domain.ru/image/news/".$result_news['img']."')\" onmouseout=\"showImg('img1','')\"> ".htmlspecialchars($result_news['title'], ENT_QUOTES)."<div id='img1'></div></a>"; }[/PHP] В результате на какую бы я ссылку не навел - картинка выводится правильная но в возле первой ссылки! Потому что там стоит статичный img1. Как мне сделать чтоб к img приписывался в цикле свой номер? |
|
|
MetSerp |
13.9.2013, 18:54;
Ответить: MetSerp
Сообщение
#6
|
|
Смотря какой у вас цикл, если for то у вас наверняка уже есть итератор, его и приписывайте.
Если while или foreach то заведите итератор и просовывайте его, но мне кажется вы изначально немного кривовато начали реализовывать, с таким подходом вы намучаетесь. вы используете jquery в проекте? |
|
|
exponat |
15.9.2013, 11:01;
Ответить: exponat
Сообщение
#7
|
|
|
Вот помогли с выводом для каждой ссылки с циклом:
тут без изменения [JS]function showImg(id,fn){ var el = document.getElementById(id); if(fn) el.innerHTML = '<img style="width:100px;" src="' + fn + '" />'; else el.innerHTML =''; }[/JS] А вот полный код с циклом: [PHP]<?php $zapros_news = mysql_query("SELECT * FROM `news` ORDER BY `id` DESC LIMIT 70") or die(mysql_error()); echo "<table cellpadding='0' cellspacing='0' border='0' >"; $date1=0; $i = 0; while ($result_news = mysql_fetch_assoc($zapros_news)) { $date = $result_news['date']; if ($date!=$date1) { echo "<tr><td align='left' style='border-bottom:1px solid #666; padding-top:5px;padding-bottom:3px; '><b><font size='3'>".$date."</font></b></td><td style='border-bottom:1px solid #666;'></td></tr>"; } echo "<tr><td align='left' style='border-bottom:1px dashed #CCCCCC; padding-top:3px; padding-bottom:3px;'><div style='margin-left:5px; margin-right:5px;'><font size='2'><span class='time_l'> ".$result_news['time']." </span>"; { echo "<a class='link1' href='?action=news_inf&id=".$result_news['id']."' onmouseover=\"showImg('img".++$i."','http://www.domain.ru/image/news/".$result_news['img']."')\"onmouseout=\"showImg('img".$i."','')\"> ".htmlspecialchars($result_news['title'], ENT_QUOTES)."<div id='img".$i."'></div></a>"; } echo "</font></div></td></tr>"; $date1 = $result_news['date']; } echo "</table>"; ?>[/PHP] Оно работает. Но коряво - когда наводиш на ссылку - картинка выводится под ней, но курсором навести на картинку не получается. Она исчезает. Хочется чтоб она не исчезала под курсором. И как мне возле картинки вывести дескрипшенс новости? В БД дескрипшенс сохраняется в таблице news столбце descriptions.
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
"Извините, что ожидание затянулось, но не думайте, пожалуйста, что мы про вас забыли. Мы заводим задачи по всем обращениям и контролируем работу над ними самым тщательным образом." Вопрос |
0 | kuz999 | 1246 | 5.2.2024, 14:06 автор: kuz999 |
|
Размещу статью с ссылкой на ваш ресурс Донор: ИКС : 38000, Page Rank = 5.94 (xPR), Траст = 10 |
6 | Курыкин | 3144 | 5.11.2023, 2:55 автор: AndrePro |
|
Площадки для статей с анкорной ссылкой Бесплатная база |
26 | Retyk | 15199 | 10.5.2020, 14:11 автор: Retyk |
|
Опубликую вашу статью с ссылкой бесплатно. На своем блоге - ИКС - 90 |
0 | Retyk | 1392 | 7.9.2019, 18:30 автор: Retyk |
|
Бесплатно опубликуем статьи на сайте с ИКС 1500 с прямой ссылкой | 0 | Alex-777 | 1515 | 31.7.2019, 16:11 автор: Alex-777 |
Текстовая версия | Сейчас: 24.4.2024, 9:08 |