Версия для печати
Оригинальная версия ( http://prestadev.ru/forum/tema-565.html )

PrestaShop CMS :: Русская поддержка интернет-магазина PrestaShop > Прочее > Alt в виде картинки


Разместил: YellowDuck Время: 22-01-2010 03:02
Подскажите, плиз если кто знает, как делается такая штука? При наведении курсора на объект, вместо alt текста появляется изображение.

Разместил: landex Время: 22-01-2010 03:13
Не совсем альт - http://www.club2071.ru/man/settlement/
сохрани на комп и поковыряй на досуге, если автоматизировать - будет круто, если ручками и много товаров - замудохаешся,

Разместил: YellowDuck Время: 22-01-2010 03:53
По той ссылке, что ты дал, похоже на карту изображений, я xoчу примерно вот так сделать http://www.aktywnysmyk.pl/, тут это срабатывает и при наведении на ссылки и кнопки и картинки

Я порылся через фаербак, но знаний пока мало, чтобы разобраться
фаербаг показал код <img alt="..." src="картинка.jpg"/>

Разместил: landex Время: 22-01-2010 04:08
копай в эту сторону <a class="highslide tooltip"

Разместил: landex Время: 22-01-2010 04:11
вот http://www.google.ru/search?hl=ru&safe=off&client=firefox&rls=ru.yandex%3Aru%3Aofficial&hs=6n4&newwindow=1&q=a+class+highslide+tooltip&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA&lr=&aq=f&oq=главное знать что искать ;)

Разместил: YellowDuck Время: 22-01-2010 05:01
Спасибо, это вроде то, что надо щас пороюсь

Разместил: YellowDuck Время: 27-01-2010 03:33
Вдруг кому-то понадобится для украшательств:
http://www.nickstakenburg.com/projects/prototip/ - скрипт с набором из 19 всплывающих эффектов

Пузырчатые подписи:
Код http://web-graphics.com/mtarchive/001717.php
посмотреть примеры http://web-graphics.com/mtarchive/BubbleTooltips.html

Здесь без явы скрипт, на css
http://ruseller.com/lessons.php?rub=2&id=136

Разместил: Berk Время: 31-03-2010 13:26
YellowDuck, ты я так понял и не сделал, то что хотел?
Было бы удобно получать увеличенное превью из списка товаров, чтобы небыло необходимости заходить в товар.

Разместил: YellowDuck Время: 31-03-2010 15:46
Поигрался, и решил, что пока мне это не надо. Проблем с реализацией никаких нет, прикручивай любой скрипт и все.

Увеличенное превью встроенная функция престы.

Разместил: Berk Время: 01-04-2010 00:17
я не программер, мне надо инструкция
если не нахожу инструкцию, то пробую методом проб и ошибок
если не получается и заканчивается пиво, плачу 10-15 у.е. программистам

Разместил: Fant63 Время: 03-04-2011 22:39
Хочется вставить вот http://www.nickstakenburg.com/projects/prototip2/ всплывающие подсказки в модуль товаров на главной - что бы там отображалось большое описание - как это можно реализовать?

Разместил: Fant63 Время: 16-04-2011 18:41
Что то я делаю не то...
Вот отличные всплывающие подсказки
http://vadikom.com/demos/poshytip/

Исходники
http://vadikom.com/files/?file=poshytip/poshytip-1.0.zip

Вроде ничего сложного ( это жёстко урезанная демо страница):

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


    <!-- Tooltip classes -->
    <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />

    <!-- jQuery and the Poshy Tip plugin files -->
    <script type="text/javascript" src="includes/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="../src/jquery.poshytip.js"></script>



</head>
<a id="demo-basic" title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a>
<body>
    
</body>
</html>


В header.tpl указываем пути к скриптам и таблицам стилей css, вставляем между
<head> и </head> ( все пути верные - проверял не один раз)
Код:
<!-- jQuery and the Poshy Tip plugin files -->
        <script type="text/javascript" src="{$js_dir}jquery-1.4.min.js"></script>
        <script type="text/javascript" src="{$js_dir}jquery.poshytip.js"></script>
        <script type="text/javascript" src="{$js_dir}jquery.tip.js"></script>
        <!-- /jQuery and the Poshy Tip plugin files -->
        
        <!-- Setup examples on this page -->
        {literal}<script type="text/javascript">
        $(function(){

            $('#demo-basic').poshytip();
        });
        </script>{/literal}
        <!-- /Setup examples on this page -->
        
        <!-- Tooltip classes -->
        <link rel="stylesheet" href="{$img_dir}tip-yellow/tip-yellow.css" type="text/css" />
        <link rel="stylesheet" href="{$img_dir}tip-violet/tip-violet.css" type="text/css" />
        <link rel="stylesheet" href="{$img_dir}tip-darkgray/tip-darkgray.css" type="text/css" />
        <link rel="stylesheet" href="{$img_dir}tip-skyblue/tip-skyblue.css" type="text/css" />
        <link rel="stylesheet" href="{$img_dir}tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
        <link rel="stylesheet" href="{$img_dir}tip-twitter/tip-twitter.css" type="text/css" />
        <link rel="stylesheet" href="{$img_dir}tip-green/tip-green.css" type="text/css" />
        <!-- /Tooltip classes -->


чуток ниже, так же между
<head> и </head> добавляем
Код:
<!-- Setup examples on this page -->
        {literal}<script type="text/javascript">
        $(function(){

            $('#demo-basic').poshytip();
        });
        </script>{/literal}
        <!-- /Setup examples on this page -->


Далее, что сформировалась подсказка вставляем в tpl файлы
Код:
<a id="demo-basic" title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a>


пробовал вставлять этот код:
Код:
<!-- Setup examples on this page -->
        {literal}<script type="text/javascript">
        $(function(){

            $('#demo-basic').poshytip();
        });
        </script>{/literal}
        <!-- /Setup examples on this page -->

в tpl файлы, чуть выше кода формирования подсказок, но это не к чему не приводит

4 дня уже бьюсь, есть идеи?


Сообщение отредактировано Fant63 16-04-2011 14:48 ...

Разместил: Fant63 Время: 16-04-2011 19:08
Хм... а вообще куда вставляется этот код:
Код:
<!-- Setup examples on this page -->
        <script type="text/javascript">
        $(function(){

            $('#demo-basic').poshytip();
        });
        </script>
        <!-- /Setup examples on this page -->

Разместил: Fant63 Время: 16-04-2011 19:21
В первом посте демо страница не правильная, вот правильная и работающая демо страница:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


    <!-- Tooltip classes -->
    <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
    <link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />

    <!-- jQuery and the Poshy Tip plugin files -->
    <script type="text/javascript" src="includes/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="../src/jquery.poshytip.js"></script>

    <!-- Setup examples on this page -->
    <script type="text/javascript">
        $(function(){

            $('#demo-basic').poshytip();
        });
    </script>

</head>
<a id="demo-basic" title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a>
<body>
    
</body>
</html>


Разместил: Fant63 Время: 17-04-2011 18:06
Гугл хром показывает ошибку

Разместил: YellowDuck Время: 18-04-2011 15:00
А на какой версии престы пробовали?

Разместил: Fant63 Время: 18-04-2011 16:21
Версия v.1.4.0.17

Пришёл в выводу, что подсказки не получаются именно из за этой ошибки, пробовал этот код закинуть в отдельный js - тоже не помогло (
Код:
<!-- Setup examples on this page -->
        {literal}<script type="text/javascript">
        $(function(){

            $('#demo-basic').poshytip();
        });
        </script>{/literal}
        <!-- /Setup examples on this page -->

www.prestadev.ru