Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

[РЕШЕНО] Смена картинки при наведении


Рекомендованные сообщения

Подскажите пожалуйста. Есть две картинки почти одинаковых. Разница в тоне картинок. Как сделать чтобы при наведении курсора миши одна сменялась на другую? Как бы жывая кнопка.

Ссылка на комментарий
Поделиться на других сайтах


я думал это форум интернет-магазина, заблудился видимо.

Хорошо. Как в скрипте opencart зделать то, что я написал сверху???

Ссылка на комментарий
Поделиться на других сайтах


Подскажите пожалуйста. Есть две картинки почти одинаковых. Разница в тоне картинок. Как сделать чтобы при наведении курсора миши одна сменялась на другую? Как бы жывая кнопка.

сделать это не сложно, есть два варианта:

1) через css

2) c использованием js

Какой описать?

Ссылка на комментарий
Поделиться на других сайтах


Хорошо. Как в скрипте opencart зделать то, что я написал сверху???

создать правильно html структуру и все...

на трех магазинах такое реализовал уже...

Ссылка на комментарий
Поделиться на других сайтах


хорошо, сейчас поставлю эту версию и сделаю описание...последнее время работаю только с 1.5.х

Спасибо большое!

Ссылка на комментарий
Поделиться на других сайтах


Первый способ:

Используем в качестве дополнительного изображения дополнительное изображение товара (первое с вывода)

открываем файл catalogcontrollerproductcategory.php

находим

$results = $this->model_catalog_product->getProductsByCategoryId($category_id, $sort, $order, ($page - 1) * $this->config->get('config_catalog_limit'), $this->config->get('config_catalog_limit'));
~130 строчка

Затем в цыкл foreach дописываем

$img_ress = $this->model_catalog_product->getProductImages($result['product_id']);
if (isset($img_ress[0])) {
$image2 = $this->model_tool_image->resize($img_ress[0], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
} else {
$image2 = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
}
Находим

$this->data['products'][] = array(
после 'thumb' добавляем

'image2' => $image2,
Должно получиться что-то типо:

$this->data['products'][] = array(
'name'	=> $result['name'],
'model'   => $result['model'],
'rating'  => $rating,
'stars'   => sprintf($this->language->get('text_stars'), $rating),
'thumb'   => $this->model_tool_image->resize($image, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height')),
'image2'  => $image2,
'price'   => $price,
'options' => $options,
'special' => $special,
'href'	=> $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&path=' . $this->request->get['path'] . '&product_id=' . $result['product_id']),
'add'   => $add
);
Теперь идем в catalogviewthemeТЕМАtemplateproductcategory.tpl

нходим вывод товара (должен быть ниже проверки <?php if ($products) { ?> в цикле for)

з этого вывода нам нужно где выводиться картинка

<a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a>
заменяем эту строчку на

<a class="dop_img" style="background:url(<?php echo $products[$j]['image2']; ?>) no-repeat;" href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a>
Теперь открываем файл стилей catalogviewthemeТЕМАstylesheetstylesheet.css и дописываем

table.list a.dop_img {
display:block;
width:100px; //Ширина изображения
height:100px; // Высота изображения
}
table.list a.dop_img:hover img {
opacity:0;
}

Готово!

p.s этот код может не работать в IE6...

Что бы способ был более и менее кроссбраузерным я использую js

<script type="text/javascript"<!--
$('table.list a.dop_img').hover(function(){
$(this).addClass('hover_a');
},function(){
$(this).removeClass('hover_a');
});
//--></script>

И для подстраховки добавленый выше стиль

table.list a.dop_img:hover img
заменяем на

table.list a.dop_img:hover img, table.list a.hover_a img

Все!

Второй способ:

Добавляем дополнительно изображение для изменения!

идем в базу данных (phpmyadmin), выполняем следующий код

ALTER TABLE `oc_product` ADD `image2` VARCHAR( 255 ) NOT NULL AFTER `image` ;
Затем открываем admincontrollercatalogproduct.php, находим функцию

private function getForm() {
После

if (isset($this->request->post['image'])) {
$this->data['image'] = $this->request->post['image'];
} elseif (!empty($product_info)) {
$this->data['image'] = $product_info['image'];
} else {
$this->data['image'] = '';
}
Вставляем

if (isset($this->request->post['image2'])) {
$this->data['image2'] = $this->request->post['image2'];
} elseif (!empty($product_info)) {
$this->data['image2'] = $product_info['image2'];
} else {
$this->data['image2'] = '';
}
Затем после

if (!empty($product_info) && $product_info['image'] && file_exists(DIR_IMAGE . $product_info['image'])) {
$this->data['preview'] = $this->model_tool_image->resize($product_info['image'], 100, 100);
} else {
$this->data['preview'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
}
Вставляем

if (!empty($product_info) && $product_info['image2'] && file_exists(DIR_IMAGE . $product_info['image'])) {
$this->data['preview2'] = $this->model_tool_image->resize($product_info['image2'], 100, 100);
} else {
$this->data['preview2'] = $this->model_tool_image->resize('no_image.jpg', 100, 100);
}
Открываем adminmodelcatalogproduct.php. Тут в функции public function addProduct, public function editProduct после

if (isset($data['image'])) {
$this->db->query("UPDATE " . DB_PREFIX . "product SET image = '" . $this->db->escape($data['image']) . "' WHERE product_id = '" . (int)$product_id . "'");
}
Необходимо добавить

if (isset($data['image2'])) {
$this->db->query("UPDATE " . DB_PREFIX . "product SET image2 = '" . $this->db->escape($data['image2']) . "' WHERE product_id = '" . (int)$product_id . "'");
}
Открываем файл adminviewtemplatecatalogproduct_form.tpl

и после

<tr>
<td><?php echo $entry_image; ?></td>
<td><input type="hidden" name="image" value="<?php echo $image; ?>" id="image" />
  <img src="<?php echo $preview; ?>" alt="" id="preview" class="image" onclick="image_upload('image', 'preview');" /></td>
</tr>
добавляем

<tr>
<td><?php echo $entry_image; ?></td> <!--Если захотите можете поменять название колонки-->
<td><input type="hidden" name="image2" value="<?php echo $image2; ?>" id="image2" />
  <img src="<?php echo $preview2; ?>" alt="" id="preview2" class="image" onclick="image_upload('image2', 'preview2');" /></td>
</tr>
С админкой все!

Теперь переходин на фронт. Открываем catalogmodelcatalogproduct.php и немного редактируем запрос в функции getProductsByCategoryId. После p.image необходимо добавить "p.image2,"

Открываем файл catalogcontrollerproductcategory.php

После

if ($result['image']) {
$image = $result['image'];
} else {
$image = 'no_image.jpg';
}
дописываем

if ($result['image2']) {
$image2 = $result['image2'];
} else {
$image2 = 'no_image.jpg';
}
и меняем

$this->data['products'][] = array(
'name'	=> $result['name'],
'model'   => $result['model'],
'rating'  => $rating,
'stars'   => sprintf($this->language->get('text_stars'), $rating),
'thumb'   => $this->model_tool_image->resize($image, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height')),
'price'   => $price,
'options' => $options,
'special' => $special,
'href'	=> $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&path=' . $this->request->get['path'] . '&product_id=' . $result['product_id']),
'add'   => $add
);
на

[CODE]
$this->data['products'][] = array(
'name'	=> $result['name'],
'model'   => $result['model'],
'rating'  => $rating,
'stars'   => sprintf($this->language->get('text_stars'), $rating),
'thumb'   => $this->model_tool_image->resize($image, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height')),
'image2'  => $this->model_tool_image->resize($image2, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height')),
'price'   => $price,
'options' => $options,
'special' => $special,
'href'	=> $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&path=' . $this->request->get['path'] . '&product_id=' . $result['product_id']),
'add'   => $add
);

Все! В файле catalogviewthemeТЕМАtemplateproductcategory.tpl и в стилях берем с первого примера

P.S

Этот пример делал на OpenCart

v1.4.9.6 скачанного с офф сайта...

  • +1 3
Ссылка на комментарий
Поделиться на других сайтах


а onMouseOver, onMouseOut чем хуже?

Мне вот тоже интересно. Этот вариант помоему самый лёгкий, но он помоему не приемлем если есть css и т.д. Хотя хотелось бы услышать знающих.

Ссылка на комментарий
Поделиться на других сайтах


а onMouseOver, onMouseOut чем хуже?

каждый пишет как ему удобно...

я не люблю в теги вставлять лишние свойства...

можно вообще использовать только css без js...Тем более все браузера (кроме осла) понимают :hover для тегов

Ссылка на комментарий
Поделиться на других сайтах


  • 2 года спустя...
  • 4 недели спустя...
  • 2 месяца спустя...

Для 1.5.4 :

/catalog/controller/product/category.php

Находим строки:

$results = $this->model_catalog_product->getProducts($data); foreach ($results as $result) {
После них вставляем:
$results_img = $this->model_catalog_product->getProductImages($result['product_id']);
$dop_img = array();
foreach ($results_img as $result_img) {
    if ($result_img['image']) {
        $image_dop = $this->model_tool_image->resize($result_img['image'], 241, 241);
    } else {
        $image_dop = false;
    }
    $dop_img[] = $image_dop;
}
Немного ниже ищем строки:
$this->data['products'][] = array( 'product_id' => $result['product_id'],
Ниже нее добавляем:
'dop_img' => $dop_img,
Теперь в category.tpl меняем вывод картинки на :
<a class="dop_img" style="background:url(<?php echo $product['dop_img'][0];?>) no-repeat;" href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a>
И правим css:
a.dop_img {
display:block;
}
a.dop_img:hover img {
opacity:0;
}
Ссылка на комментарий
Поделиться на других сайтах


  • 3 месяца спустя...

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.