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

[nigga]

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

[delprofile]

<img src="images/img1.jpg" onmouseover="this.src='images/img2.jpg'" onmouseout="this.src='images/img1.jpg'" />

onmouseover – курсор на
onmouseout – курсор вне

[nigga]

Супер! спасибище delprofile

[delprofile]

Не за что! А на будущее чтоб таких вопросов не было хотя бы базовый курс html проштудируй.

[Noxter]

Если в браузере отключить Javascript то ничего работать не будет, советую использовать CSS.

[Noxter]

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

[delprofile]

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

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

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

[Noxter]

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

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

[n1c]

<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]

 

 

<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]

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

 

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

[Kors]

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

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

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

<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]

Перемудрил))

АЛЬТ зачем в условие засунул?

[Kors]

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

 

<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]

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

Изменено 22 февраля, 2016 пользователем Varyag

[mishanya]

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

 

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

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

Изменено 22 февраля, 2016 пользователем mishanya

[Varyag]

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

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

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

[Varyag]

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

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

http://demo.simplacms.ru/

[Varyag]

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

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

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

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

[mishanya]

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

.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]

 

.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]

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

 

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

[Varyag]

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

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

[mishanya]

 

Для меня это сложно. Может когда нибудь выложат такое бесплатное решение, а пока будем довольствоваться тем, что подсказали с 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