Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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

Zoonder
 Share

Recommended Posts

Zoonder Collaborator

Zoonder

Опубліковано:
Опубліковано:

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

Надіслати
Поділитися на інших сайтах

Fizik87 Rising Star

Fizik87

Опубліковано:
Опубліковано:

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

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

1) через css

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

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

Надіслати
Поділитися на інших сайтах

Fizik87 Rising Star

Fizik87

Опубліковано:
Опубліковано:

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

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

открываем файл 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
Надіслати
Поділитися на інших сайтах

Zoonder Collaborator

Zoonder

Опубліковано:
  • Автор
Опубліковано:

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

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

Надіслати
Поділитися на інших сайтах

Fizik87 Rising Star

Fizik87

Опубліковано:
Опубліковано:

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

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

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

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

Надіслати
Поділитися на інших сайтах

  • 2 years later...
  • 4 weeks later...
  • 2 months later...
TamDe Rookie

TamDe

Опубліковано:
Опубліковано:

Для 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 months later...

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду