Наверное, многие видели такую рекламу; в углу страницы - загнутый уголок, подводишь к нему курсор - и он отгибается, открывая пространство с информацией... Сделаем тоже самое в нашем магазине. Пример Зарание, прошу прощения у администрации сайта за использования в качастве примера Символики/Логотипа... 1). Открываем файл catalog/view/theme/ВАША ТЕМА/template/common/header.tpl и перед закрывающимся тегом </head> вставляем код:
<script type="text/javascript">$(document).ready(function(){$("#pageflip").hover(function() {$("#pageflip img , .msg_block").stop().animate({width: '307px',height: '319px'}, 500);} , function() {$("#pageflip img").stop().animate({width: '50px',height: '52px'}, 220);$(".msg_block").stop().animate({width: '50px',height: '50px'}, 200);});});</script>
2). Далее (в этом же файле), после тега <body> вставляем этот код:
<div id="pageflip"><a href="http://myopencart.ru/download.php"><img src="catalog/view/theme/ВАША_ТЕМА/image/page_flip.png" alt="" /><span class="msg_block">Скачать русский OpenCart</span></a></div>
3). Затем, открываем файл со стилями нашей темы catalog/view/theme/ВАША ТЕМА/stylesheet/stylesheet.css и в самом конце добавляем три блока:
#pageflip {position: absolute;top: 0px;right: 0px;}#pageflip img {width: 50px; height: 52px;z-index: 99;position: absolute;top: 0px;right: 0px;-ms-interpolation-mode: bicubic;}#pageflip .msg_block {width: 50px; height: 50px;position: absolute;z-index: 50;top: 0px;right: 0px;background: url('../image/download.png') no-repeat right top;text-indent: -9999px;}
4). Теперь нам надо скопировать в папку catalog/view/theme/ВАША ТЕМА/image два png файла: (ссылка ниже) download.png и page_flip.png. Всё. P.S. Убедительная просьба отписаться у кого браузеры Mozilla, Safari, Netscape, Google Chrome и прочие, на проверку совместимости. Работает в IE6.0 и Opera 11.01. Архив: image.zip