nigga Опубликовано 2 декабря, 2012 Жалоба Поделиться Опубликовано 2 декабря, 2012 На страницу добавить изображение, при наведении курсора на которое оно заменялось бы другим изображением, после отвода курсора снова бы замещалось старым. Как такое реализовать стандартными средствами кодов? Цитата Ссылка на сообщение Поделиться на другие сайты
delprofile Опубликовано 2 декабря, 2012 Жалоба Поделиться Опубликовано 2 декабря, 2012 <img src="images/img1.jpg" onmouseover="this.src='images/img2.jpg'" onmouseout="this.src='images/img1.jpg'" />onmouseover – курсор наonmouseout – курсор вне Цитата Ссылка на сообщение Поделиться на другие сайты
nigga Опубликовано 2 декабря, 2012 Автор Жалоба Поделиться Опубликовано 2 декабря, 2012 Супер! спасибище delprofile Цитата Ссылка на сообщение Поделиться на другие сайты
delprofile Опубликовано 2 декабря, 2012 Жалоба Поделиться Опубликовано 2 декабря, 2012 Не за что! А на будущее чтоб таких вопросов не было хотя бы базовый курс html проштудируй. Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 2 декабря, 2012 Жалоба Поделиться Опубликовано 2 декабря, 2012 Если в браузере отключить Javascript то ничего работать не будет, советую использовать CSS. Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 3 декабря, 2012 Жалоба Поделиться Опубликовано 3 декабря, 2012 Согласен, но такие вещи как подмена картинки при наведении делаются через CSS.P.S. без js товар будет попадать в корзину но без перелета и с обновлением страницы. Цитата Ссылка на сообщение Поделиться на другие сайты
delprofile Опубликовано 3 декабря, 2012 Жалоба Поделиться Опубликовано 3 декабря, 2012 Noxter это общая практика? или твоё сугубо личное мнение что такие вещи делают все через CSS?А говорить про корзину да не вопрос.Увеличение+ Практически вся админка (=P.S. покажи тогда пример для products с заменой картинок через css к каждому товару.Просто если ты помнишь про класс то тебе в нём придётся указать путь картинки.Даже если ты пройдёшся forech по css он тупо работать не будет. так как он создаст кучу копий одного класса с разными картинками что приведёт к тому что воообще не фига работать не будет.При смене же всего 1 картинки да css может будет и лучше, но не когда на странице их например 10 и под каждые 10 писать css бредятина. И по id уникальному ты не ченр не сделаешь так как тебе всё равно придётся использовать js для этого Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 3 декабря, 2012 Жалоба Поделиться Опубликовано 3 декабря, 2012 В таком случае да, но если это использовать скажем для меню при наведении на пункт то разумно будет использовать CSS вместо Javascript.Имхо это лично мое мнение. Сколько авторов столько и идейP.S. Нигга можно узнать для чего это? Цитата Ссылка на сообщение Поделиться на другие сайты
n1c Опубликовано 21 февраля, 2016 Жалоба Поделиться Опубликовано 21 февраля, 2016 <img src="{$product->image->filename|resize:300:300}" onmouseover="this.src='{if $product->images[1]->filename}{$product->images[1]->filename|resize:300:300}{else}{$product->image->filename|resize:300:300}{/if}';" onmouseout="this.src='{if $product->image->filename}{$product->image->filename|resize:300:300}{else}{$product->image->filename|resize:300:300}{/if}';" alt="{$product->name|escape}"/> Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 21 февраля, 2016 Жалоба Поделиться Опубликовано 21 февраля, 2016 <img src="{$product->image->filename|resize:300:300}" onmouseover="this.src='{if $product->images[1]->filename}{$product->images[1]->filename|resize:300:300}{else}{$product->image->filename|resize:300:300}{/if}';" onmouseout="this.src='{if $product->image->filename}{$product->image->filename|resize:300:300}{else}{$product->image->filename|resize:300:300}{/if}';" alt="{$product->name|escape}"/>Больше нигде не пишите это, лет 5 назад возможно это было "круто", Цитата Ссылка на сообщение Поделиться на другие сайты
n1c Опубликовано 21 февраля, 2016 Жалоба Поделиться Опубликовано 21 февраля, 2016 Больше нигде не пишите это, лет 5 назад возможно это было "круто", почти 3 года назад видимо было актуально)) я просто написал кому понадобится, сразу готовый код. главное рабочий и самый простой) Цитата Ссылка на сообщение Поделиться на другие сайты
Kors Опубликовано 22 февраля, 2016 Жалоба Поделиться Опубликовано 22 февраля, 2016 Код вполне рабочий. НЕ идеальный, конечно, но для не специалиста вполне достойный. главное рабочий и самый простой) Я бы сделал попроще и покороче: <img src="{$product->image->filename|resize:300:300}" {if $product->images[1]->filename} onmouseover="this.src='{$product->images[1]->filename|resize:300:300}';" onmouseout="this.src='{$product->image->filename|resize:300:300}';" alt="{$product->name|escape}"{/if} /> Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 22 февраля, 2016 Жалоба Поделиться Опубликовано 22 февраля, 2016 Перемудрил))АЛЬТ зачем в условие засунул? Цитата Ссылка на сообщение Поделиться на другие сайты
Kors Опубликовано 22 февраля, 2016 Жалоба Поделиться Опубликовано 22 февраля, 2016 Вы правы, действительно перемудрил. <img src="{$product->image->filename|resize:300:300}" {if $product->images[1]->filename} onmouseover="this.src='{$product->images[1]->filename|resize:300:300}';" onmouseout="this.src='{$product->image->filename|resize:300:300}';"{/if} alt="{$product->name|escape}" /> Цитата Ссылка на сообщение Поделиться на другие сайты
Varyag Опубликовано 22 февраля, 2016 Жалоба Поделиться Опубликовано 22 февраля, 2016 (изменено) Всем здравствуйте. Как бы в тему. поделитесь пож. решением. При наведении курсора на товар, что бы выделялся блок. Примерно, как на примере http://instrument-54.ru/ Изменено 22 февраля, 2016 пользователем Varyag Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 22 февраля, 2016 Жалоба Поделиться Опубликовано 22 февраля, 2016 (изменено) Всем здравствуйте. Как бы в тему. поделитесь пож. решением. При наведении курсора на товар, что бы выделялся блок. Примерно, как на примере http://instrument-54.ru/ делаете просто при свойстве :hover - в стиль border:1px solid;нужно под конкретную верстку смотреть как у вас на сайте Изменено 22 февраля, 2016 пользователем mishanya Цитата Ссылка на сообщение Поделиться на другие сайты
Varyag Опубликовано 22 февраля, 2016 Жалоба Поделиться Опубликовано 22 февраля, 2016 делаете просто при свойстве :hover - в стиль border:1px solid;нужно под конкретную верстку смотреть как у вас на сайтеШаблон дефолтный Цитата Ссылка на сообщение Поделиться на другие сайты
Varyag Опубликовано 22 февраля, 2016 Жалоба Поделиться Опубликовано 22 февраля, 2016 делаете просто при свойстве :hover - в стиль border:1px solid;нужно под конкретную верстку смотреть как у вас на сайтеhttp://demo.simplacms.ru/ Цитата Ссылка на сообщение Поделиться на другие сайты
Varyag Опубликовано 23 февраля, 2016 Жалоба Поделиться Опубликовано 23 февраля, 2016 делаете просто при свойстве :hover - в стиль border:1px solid;нужно под конкретную верстку смотреть как у вас на сайтеДобавил стиль .tiny_products .product:hover подсвечивается другим цветом border Все работает, но хотелось бы большего, что бы на клик мышки реагировало все поле, а не только на картинке и названии товара. кто может помочь? Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 23 февраля, 2016 Жалоба Поделиться Опубликовано 23 февраля, 2016 (изменено) Добавил стиль .tiny_products .product:hover подсвечивается другим цветом border Все работает, но хотелось бы большего, что бы на клик мышки реагировало все поле, а не только на картинке и названии товара. кто может помочь? .tiny_products .product { width: 210px; margin-right: 10px; margin-bottom: 30px; display: -moz-inline-box; display: inline-block; word-spacing: normal; vertical-align: top; border: 1px solid transparent; overflow: hidden; } .tiny_products .product:hover { border: 1px solid #F00; } https://yadi.sk/i/u3_Zif0mpLoHq Изменено 23 февраля, 2016 пользователем mishanya Цитата Ссылка на сообщение Поделиться на другие сайты
Varyag Опубликовано 23 февраля, 2016 Жалоба Поделиться Опубликовано 23 февраля, 2016 .tiny_products .product { width: 210px; margin-right: 10px; margin-bottom: 30px; display: -moz-inline-box; display: inline-block; word-spacing: normal; vertical-align: top; border: 1px solid transparent; overflow: hidden; } .tiny_products .product:hover { border: 1px solid #F00; } https://yadi.sk/i/u3_Zif0mpLoHqне поняли меня. так все работает. Я же написал, что для перехода в карточку товара работают только области картинки и название товара (ссылки), а хотелось бы что бы в любом месте т.е всё поле было было как ссылка. И на этом спасибо за помощь Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 23 февраля, 2016 Жалоба Поделиться Опубликовано 23 февраля, 2016 не поняли меня. так все работает. Я же написал, что для перехода в карточку товара работают только области картинки и название товара (ссылки), а хотелось бы что бы в любом месте т.е всё поле было было как ссылка. И на этом спасибо за помощь а, вам нужно переделать тогда или чтобы блок был внутри ссылки, или делать просто js onclick Цитата Ссылка на сообщение Поделиться на другие сайты
Varyag Опубликовано 23 февраля, 2016 Жалоба Поделиться Опубликовано 23 февраля, 2016 а, вам нужно переделать тогда или чтобы блок был внутри ссылки, или делать просто js onclickДля меня это сложно. Может когда нибудь выложат такое бесплатное решение, а пока будем довольствоваться тем, что подсказали с hover. спасибо Цитата Ссылка на сообщение Поделиться на другие сайты
mishanya Опубликовано 23 февраля, 2016 Жалоба Поделиться Опубликовано 23 февраля, 2016 (изменено) Для меня это сложно. Может когда нибудь выложат такое бесплатное решение, а пока будем довольствоваться тем, что подсказали с hover. спасибо замените ваш вывод на такой например <ul class="tiny_products"> {foreach $products as $product} <!-- Товар--> <li class="product"> <a href="products/{$product->url}"> <div> <!-- Фото товара --> {if $product->image} <div class="image"> <img src="{$product->image->filename|resize:200:200}" alt="{$product->name|escape}"/> </div> {/if} <!-- Фото товара (The End) --> <!-- Название товара --> <h3>{$product->name|escape}</h3> <!-- Название товара (The End) --> {if $product->variants|count > 0} <!-- Выбор варианта товара --> <form class="variants" action="/cart"> <table> {foreach $product->variants as $v} <tr class="variant"> <td> <input id="featured_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/> </td> <td> {if $v->name}<label class="variant_name" for="featured_{$v->id}">{$v->name}</label>{/if} </td> <td> {if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if} <span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span> </td> </tr> {/foreach} </table> <input type="submit" class="button" value="в корзину" data-result-text="добавлено"/> </form> <div style="clear:both;"></div> <!-- Выбор варианта товара (The End) --> {else} Нет в наличии {/if} </div> </a> </li> <!-- Товар (The End)--> {/foreach} </ul> Изменено 23 февраля, 2016 пользователем mishanya Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.