veSeliy Сообщение 13/03/2007 14:31 Копия темы
Как сделать превью в виде изображения при наведении на ссылку? Всем привет!

Нужна помощь! Подскажите, пожалуйста, как сделать следующее.
Имеется несколько ссылок. При наведении на ссылку, появляется маленькое изображение, характеризующее ссылку (по типу, как работает alt, только вместо надписи изображение).
Искал что-то подобное в Интернете. Пока не нашел.

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

Пробовал найти пример. Не нашел ничего, кроме milliondollarhomepage.com. Только вместо текста должно быть изображение.

В-общем, всем заранее спасибо.

С уважением.

SolNikolay Сообщение 13/03/2007 14:45 Копия темы
В joomla есть такая функция :)

lcfsoft Сообщение 13/03/2007 14:47 Копия темы
Типа вот этого:
function show ( name ) {
x = currentX;
y = currentY + 20;
if (NS4) {
document.layers[name].xpos = parseInt ( x );
document.layers[name].left = parseInt ( x );
document.layers[name].ypos = parseInt ( y );
document.layers[name].top = parseInt ( y );
document.layers[name].visibility = «show»;
} else
if(IE4) {
document.all[name].style.left = parseInt ( x );
document.all[name].style.top = parseInt ( y );
document.all[name].style.visibility = «visible»;
} else { //Mazilla
document.getElementById(name).style.left = parseInt ( x );
document.getElementById(name).style.top = parseInt ( y );
document.getElementById(name).style.visibilit y = «visible»;
}
}

function hide ( name ) {
if (NS4) {
document.layers[name].visibility = «hide»;
} else
if(IE4) {
document.all[name].style.visibility = «hidden»;
} else {
document.getElementById(name).style.visibilit y = «hidden»;
}
}

Это функции. По наведению пишешь:
onMouseOver=«window.status='Админ медиа-сайтов'; show('box6'); return true;" onMouseOut=«hide('box6'); return true;"'

Ну допустим это ты пишешь по наведению на ссылку.
А сразу за ссылкой напишешь вот это:
Сюда засуешь свою картинку, или что ты хочешь там. : )

lcfsoft Сообщение 13/03/2007 14:48 Копия темы
млин. ))

Pilat Сообщение 13/03/2007 14:48 Копия темы
Этого как грязи.
bassistance.de/jquery-plu... www.codylindley.com/blogs...
Искать надо на AJAX и Tip . Конечно, Ajax тут необязательный элемент, но аяксовые библиотеки лучше тестируются на совместимость.

Вообще вокруг jQuery таких штук делается много.

lcfsoft Сообщение 13/03/2007 14:49 Копия темы
Ну допустим это ты пишешь по наведению на ссылку.
А сразу за ссылкой напишешь вот это:
< DIV ID='box6' class=hidden >
Сюда засуешь свою картинку, или что ты хочешь там. : )
< /DIV >

lcfsoft Сообщение 13/03/2007 14:58 Копия темы
Я думаю для этой цели не стоит фреймверки юзать... Даже такие маленькие по весу...

Pilat Сообщение 13/03/2007 15:04 Копия темы
Ну, и JS тоже не обязателен, в конце концов.

www.tokar.ru/www/vi/<br>
уже картинку покажет, а ведь доработать можно – как раз что-то нужное может получиться. Но общее решение лучше через хорошую навороченную библиотеку.

Что-то у меня кусок html не удайтся сюда вставить.

veSeliy Сообщение 13/03/2007 15:12 Копия темы
Круто. Надо попробовать ;-)

veSeliy Сообщение 13/03/2007 15:13 Копия темы
Ггыы :-)
Joomla не используется ;-)

veSeliy Сообщение 13/03/2007 15:14 Копия темы

SolNikolay Сообщение 13/03/2007 15:15 Копия темы
Что-то не работает в IE6.

veSeliy Сообщение 13/03/2007 15:26 Копия темы
if (NS4) и if(IE4), наверно должны быть заменены на
if (navigator.appName=='Netscape') и if (navigator.appName=='Microsoft Internet Explorer') ???

lcfsoft Сообщение 13/03/2007 15:47 Копия темы
ну да. ) Это не мое. Я так глазами пробежал. Видать глобальные там...
(ссылку дать не могу, туда пригивилигерованный доступ. просто открыто было. и я как раз топик заметил. Решил копирнуть. ) По идее должно пахать, я это делал когда то давно. : )

veSeliy Сообщение 13/03/2007 16:11 Копия темы
Не работает пока.
portfolio.veseliy.ru/temp...
currentX и currentY должны как-то по-иному обзываться. Не подскажешь как?

lcfsoft Сообщение 13/03/2007 17:40 Копия темы
Поправил твой код. lcf.name/dev/stuff/temp.h... Как образец моего программирования не в коем случае не воспринимать, просто для образца, чтобы по быстрому... Я тебе когда функции давал, я не имел в виду что прям 100 процентов должно работать, а чтобы было понятно примерное положение вещей. :) В сети есть масса информации. Чтобы лишнего не накодить, думаю тебе стоит воспользоваться советом Константина и заюзать фреймворк.

Если будешь свое менять дальше, то надо параметры стиля объеденить в классы, переделать вызовы функций, добавить кроссбраузерность. Я просто сделал, чтобы было видно что работает. Убрал всю кроссбраузерность, в опере и ие работает, проверь... Дальше, пофантазируй.

Saint Сообщение 13/03/2007 18:02 Копия темы
Можно и без Js. Если надо стукнись в icq, а то может ты уж сам придумал че.

Pomidorisgogo Сообщение 14/03/2007 03:38 Копия темы
Я может чего-то не понимаю, но зачем такие сложности? Банально ведь с помощью CSS делается, зачем скрипты городить? www.dynamicdrive.com/styl...

veSeliy Сообщение 14/03/2007 08:20 Копия темы
Опа!
И так все просто.
Спасибо огроменное!!!

Pilat Сообщение 14/03/2007 12:11 Копия темы
Сложности затем, чтобы появилась возможность видеть всплывающие картинки для ссылки в любом месте страницы. Например, для приведённого примера, картинки всплывают _под_ ссылающимся текстом и _справа_ – значит, расположенные близко к нижнему правому краю окна картинки увидеть не удастся. JavaScript позволяет вычислить положение тултипа.

Вот, кстати, ещё пример на CSS – cssing.org.ua/2006/02/15/...

Pilat Сообщение 14/03/2007 12:12 Копия темы
Потому что у IE6 глюк с :hover не в ссылке.

Pomidorisgogo Сообщение 14/03/2007 12:14 Копия темы
Вы смотрели код по указанной мной ссылке? Картинки будут всплывать там, где Вы им укажете – в любом месте страницы. Для этого и вычислять ничего не надо, а достаточно задать им соответствующие координаты.

SolNikolay Сообщение 14/03/2007 12:15 Копия темы
Я знаю. Хотел от вас услышать :)
Зачем тогда советуете, раз знаете, что не работает?

Pomidorisgogo Сообщение 14/03/2007 13:26 Копия темы
Вдруг обнаружила отзыв. Спасибо! :)

Pilat Сообщение 14/03/2007 16:33 Копия темы
Картинки должны всплывать примерно там, где указатель мыши, а не где я им указал :) – и не выходя за пределы видимой части страницы. В Вашем примере они всплывают частично за пределами страницы и нет возможности это исправить.

Pilat Сообщение 14/03/2007 16:34 Копия темы
Да только чтобы навести на мысль, что это возможно.

Pomidorisgogo Сообщение 14/03/2007 16:40 Копия темы
Чего-то я не понимаю сути проблемы, если честно. В моём примере всё всплывает в пределах страницы, если конечно картинка не больше Вашего разрешения монитора. Или Вы хотите сказать, что она должна автоматически выплывать в видимой области экрана, если ссылка, например, расположена в самом низу страницы?

Pilat Сообщение 14/03/2007 16:57 Копия темы
Ну да, именно это, – такой же обычный алгоритм всплывания тултипов, и не только внизу, а и слева-справа-вверху.

Pomidorisgogo Сообщение 14/03/2007 17:02 Копия темы
Ну тогда да. Просто в заглавном сообщении такая цель не оговаривалась.

veSeliy Сообщение 15/03/2007 08:59 Копия темы
Всем спасибо за помощь!
Пока пробую метод Ольги ;-)
Возможно, и с другими методами поэкспериментирую.