Jump to content

При наведении на изображение замена на другое


Recommended Posts

На страницу добавить изображение, при наведении курсора на которое оно заменялось бы другим изображением, после отвода курсора снова бы замещалось старым.
Как такое реализовать стандартными средствами кодов?

Link to post
Share on other sites

Согласен, но такие вещи как подмена картинки при наведении делаются через CSS.
P.S. без js товар будет попадать в корзину но без перелета и с обновлением страницы.

Link to post
Share on other sites

Noxter это общая практика? или твоё сугубо личное мнение что такие вещи делают все через CSS?
А говорить про корзину да не вопрос.
Увеличение
+ Практически вся админка (=

P.S. покажи тогда пример для products с заменой картинок через css к каждому товару.
Просто если ты помнишь про класс то тебе в нём придётся указать путь картинки.
Даже если ты пройдёшся forech по css он тупо работать не будет. так как он создаст кучу копий одного класса с разными картинками что приведёт к тому что воообще не фига работать не будет.

При смене же всего 1 картинки да css может будет и лучше, но не когда на странице их например 10 и под каждые 10 писать css бредятина. И по id уникальному ты не ченр не сделаешь так как тебе всё равно придётся использовать js для этого

Link to post
Share on other sites

В таком случае да, но если это использовать скажем для меню при наведении на пункт то разумно будет использовать CSS вместо Javascript.
Имхо это лично мое мнение. Сколько авторов столько и идей:)

P.S. Нигга можно узнать для чего это?

Link to post
Share on other sites
  • 3 years later...
<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}"/>

 

 

Link to post
Share on other sites

 

 

<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 назад возможно это было "круто",

Link to post
Share on other sites

Больше нигде не пишите это, лет 5 назад возможно это было "круто",

 

почти 3 года назад видимо было актуально)) я просто написал кому понадобится, сразу готовый код. главное рабочий и самый простой)

Link to post
Share on other sites

Код вполне рабочий. НЕ идеальный, конечно, но для не специалиста вполне достойный.
 

главное рабочий и самый простой)

 
 Я бы сделал попроще и  покороче:

<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} />

Link to post
Share on other sites

Вы правы, действительно перемудрил.

 

<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}" />

Link to post
Share on other sites

Всем здравствуйте. Как бы в тему. поделитесь пож. решением. При наведении курсора  на товар, что бы выделялся блок. Примерно, как на примере  http://instrument-54.ru/

Edited by Varyag
Link to post
Share on other sites

Всем здравствуйте. Как бы в тему. поделитесь пож. решением. При наведении курсора  на товар, что бы выделялся блок. Примерно, как на примере  http://instrument-54.ru/

 

делаете просто при свойстве :hover - в стиль  border:1px solid;

нужно под конкретную верстку смотреть как у вас на сайте

Edited by mishanya
Link to post
Share on other sites

делаете просто при свойстве :hover - в стиль  border:1px solid;

нужно под конкретную верстку смотреть как у вас на сайте

Шаблон дефолтный

Link to post
Share on other sites

делаете просто при свойстве :hover - в стиль  border:1px solid;

нужно под конкретную верстку смотреть как у вас на сайте

Добавил стиль 

.tiny_products .product:hover     подсвечивается другим цветом border   Все работает, но хотелось бы большего, что бы на клик мышки реагировало все поле, а не только на картинке и названии товара. кто может помочь?

Link to post
Share on other sites

Добавил стиль 

.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

Edited by mishanya
Link to post
Share on other sites

 


.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

не поняли меня. так все работает. Я же написал, что для перехода в карточку товара работают только области картинки и название товара (ссылки), а хотелось бы что бы в любом месте т.е всё поле было было как ссылка. И на этом спасибо за помощь

Link to post
Share on other sites

не поняли меня. так все работает. Я же написал, что для перехода в карточку товара работают только области картинки и название товара (ссылки), а хотелось бы что бы в любом месте т.е всё поле было было как ссылка. И на этом спасибо за помощь

 

а, вам нужно переделать тогда или чтобы блок был внутри ссылки, или делать просто js onclick

Link to post
Share on other sites

а, вам нужно переделать тогда или чтобы блок был внутри ссылки, или делать просто js onclick

Для меня это сложно. Может когда нибудь выложат такое бесплатное решение, а пока будем довольствоваться тем, что подсказали с hover. спасибо

Link to post
Share on other sites
 

Для меня это сложно. Может когда нибудь выложат такое бесплатное решение, а пока будем довольствоваться тем, что подсказали с 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>
Edited by mishanya
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...