Bài Viết, Tất cả bài viết, Thủ thuật wordpress

Hướng dẫn code chức năng di chuột vào ảnh này sẽ ra ảnh khác

Đăng vào Tháng 3 26, 2025Tháng 3 26, 2025 bởi admin

admin

26/03/2025

7 Phút đọc

30 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo hiệu ứng di chuột vào ảnh để hiển thị một ảnh khác, một kỹ thuật phổ biến trong thiết kế website giúp tạo hiệu ứng thú vị và tương tác cho người dùng. Việc này có thể áp dụng cho các trang web của bạn, giúp nâng cao trải nghiệm người dùng và cải thiện giao diện của website. Bài viết cũng sẽ bao gồm các bước chi tiết và mã code để bạn có thể dễ dàng áp dụng vào website của mình.

Hướng dẫn code chức năng di chuột vào ảnh này sẽ ra ảnh khác

Tại Sao Cần Sử Dụng Hiệu Ứng Di Chuột Vào Ảnh?

Việc sử dụng hiệu ứng di chuột vào ảnh để thay thế ảnh khác là một trong những cách đơn giản để tạo ra một giao diện động và sinh động cho trang web. Hiệu ứng này có thể được áp dụng trong nhiều trường hợp, chẳng hạn như:

Ảnh sản phẩm: Khi người dùng di chuột vào ảnh của sản phẩm, họ có thể thấy thêm ảnh chi tiết hoặc ảnh khác của sản phẩm.
Ảnh portfolio: Các nhiếp ảnh gia hoặc designer có thể sử dụng hiệu ứng này để hiển thị các bức ảnh khác nhau trong bộ sưu tập của họ.
Tăng tính tương tác: Hiệu ứng này giúp người dùng cảm thấy trang web của bạn mượt mà và dễ dàng tương tác.

Vậy làm thế nào để tạo ra hiệu ứng này? Hãy cùng tìm hiểu ngay!

Cách Tạo Hiệu Ứng Di Chuột Vào Ảnh Hiển Thị Ảnh Khác

Chúng ta sẽ sử dụng HTML, CSS và một chút PHP trong WordPress để tạo ra hiệu ứng này. Dưới đây là các bước chi tiết:

Bước 1: Tạo HTML Cho Ảnh

Đầu tiên, bạn cần có 2 bức ảnh. Khi người dùng di chuột vào ảnh A, ảnh B sẽ thay thế ảnh A. Dưới đây là cấu trúc HTML cho 2 ảnh này:

<div class="image-hover-container">
    <img src="path-to-image-a.jpg" alt="Image A" class="image-hover-a" />
    <img src="path-to-image-b.jpg" alt="Image B" class="image-hover-b" />
</div>

</div>

Bước 2: Thêm CSS Để Tạo Hiệu Ứng Hover

Để tạo hiệu ứng khi di chuột, chúng ta sẽ sử dụng CSS. Dưới đây là mã CSS giúp tạo hiệu ứng thay đổi ảnh khi người dùng di chuột vào ảnh A.

.image-hover-container {
    position: relative;
    display: inline-block;
}

.image-hover-a {
    width: 100%;
    transition: opacity 0.3s ease;
}

.image-hover-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-hover-container:hover .image-hover-b {
    opacity: 1;
}

.image-hover-container:hover .image-hover-a {
    opacity: 0;
}

.image-hover-container {

position: relative;

display: inline-block;

}

.image-hover-a {

width: 100%;

transition: opacity 0.3s ease;

}

.image-hover-b {

position: absolute;

top: 0;

left: 0;

width: 100%;

opacity: 0;

transition: opacity 0.3s ease;

}

.image-hover-container:hover .image-hover-b {

opacity: 1;

}

.image-hover-container:hover .image-hover-a {

opacity: 0;

}

Bước 3: Thêm Vào WordPress Với Shortcode

Nếu bạn muốn dễ dàng chèn mã này vào bài viết hoặc trang của WordPress, bạn có thể tạo một shortcode để sử dụng lại.

Mở functions.php trong theme của bạn.
Thêm đoạn mã PHP sau để tạo shortcode:

function image_hover_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'image_a' => '',
            'image_b' => '',
            'width' => '100%',
        ), 
        $atts, 
        'image_hover'
    );

    if (empty($atts['image_a']) || empty($atts['image_b'])) {
        return 'Vui lòng cung cấp cả hai ảnh.';
    }

    $output = '
    <div class="image-hover-container" style="width: ' . esc_attr($atts['width']) . ';">
        <img src="' . esc_url($atts['image_a']) . '" alt="Image A" class="image-hover-a" />
        <img src="' . esc_url($atts['image_b']) . '" alt="Image B" class="image-hover-b" />
    </div>';

    return $output;
}

add_shortcode('image_hover', 'image_hover_shortcode');

function image_hover_shortcode($atts) {

$atts = shortcode_atts(

array(

'image_a' => '',

'image_b' => '',

'width' => '100%',

$atts,

'image_hover'

);

if (empty($atts['image_a']) || empty($atts['image_b'])) {

return 'Vui lòng cung cấp cả hai ảnh.';

}

$output = '

</div>';

return $output;

}

add_shortcode('image_hover', 'image_hover_shortcode');

Code Hoàn Chỉnh Hiệu Ứng Di Chuột Vào Ảnh Hiển Thị Ảnh Khác

Nếu các bạn không biết làm thế nào, yên tâm chỉ cần coppy toàn bộ code dưới đây bỏ vào file funtion.php là được thôi nhé

function image_hover_shortcode($atts) {
    // Thiết lập thuộc tính mặc định
    $atts = shortcode_atts(
        array(
            'image_a' => '',
            'image_b' => '',
            'width' => '100%',
        ), 
        $atts, 
        'image_hover'
    );

    // Kiểm tra nếu ảnh được cung cấp
    if (empty($atts['image_a']) || empty($atts['image_b'])) {
        return 'Vui lòng cung cấp cả hai ảnh.';
    }

    // Tạo HTML cho shortcode
    $output = '
    <div class="image-hover-container" style="width: ' . esc_attr($atts['width']) . ';">
        <img src="' . esc_url($atts['image_a']) . '" alt="Image A" class="image-hover-a" />
        <img src="' . esc_url($atts['image_b']) . '" alt="Image B" class="image-hover-b" />
    </div>';

    // Trả về output HTML
    return $output;
}

add_shortcode('image_hover', 'image_hover_shortcode');

// Thêm CSS để xử lý hiệu ứng hover
function image_hover_styles() {
    ?>
    <style>
    .image-hover-container {
        position: relative;
        display: inline-block;
    }

    .image-hover-a {
        width: 100%;
        transition: opacity 0.3s ease;
    }

    .image-hover-b {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .image-hover-container:hover .image-hover-b {
        opacity: 1;
    }

    .image-hover-container:hover .image-hover-a {
        opacity: 0;
    }
    </style>
    <?php
}

add_action('wp_head', 'image_hover_styles');

function image_hover_shortcode($atts) {

// Thiết lập thuộc tính mặc định

$atts = shortcode_atts(

array(

'image_a' => '',

'image_b' => '',

'width' => '100%',

$atts,

'image_hover'

);

// Kiểm tra nếu ảnh được cung cấp

if (empty($atts['image_a']) || empty($atts['image_b'])) {

return 'Vui lòng cung cấp cả hai ảnh.';

}

// Tạo HTML cho shortcode

$output = '

</div>';

// Trả về output HTML

return $output;

}

add_shortcode('image_hover', 'image_hover_shortcode');

// Thêm CSS để xử lý hiệu ứng hover

function image_hover_styles() {

<style>

.image-hover-container {

position: relative;

display: inline-block;

}

.image-hover-a {

width: 100%;

transition: opacity 0.3s ease;

}

.image-hover-b {

position: absolute;

top: 0;

left: 0;

width: 100%;

opacity: 0;

transition: opacity 0.3s ease;

}

.image-hover-container:hover .image-hover-b {

opacity: 1;

}

.image-hover-container:hover .image-hover-a {

opacity: 0;

}

</style>

<?php

}

add_action('wp_head', 'image_hover_styles');

Sử Dụng Shortcode Trong WordPress

Bây giờ, bạn có thể sử dụng shortcode [image_hover] trong bất kỳ bài viết hoặc trang nào của WordPress. Dưới đây là ví dụ:

[image_hover image_a="https://example.com/path-to-image-a.jpg" image_b="https://example.com/path-to-image-b.jpg" width="80%"]

1	[image_hover image_a="https://example.com/path-to-image-a.jpg" image_b="https://example.com/path-to-image-b.jpg" width="80%"]

Kết Luận

Với vài bước đơn giản, bạn đã có thể tạo ra một hiệu ứng di chuột vào ảnh để hiển thị ảnh khác trên website của mình. Việc sử dụng hiệu ứng này không chỉ giúp tăng tính tương tác của trang web mà còn nâng cao trải nghiệm người dùng. Đặc biệt, với việc tạo shortcode trong WordPress, bạn có thể dễ dàng tái sử dụng mã này ở bất kỳ đâu trong trang web mà không cần phải chỉnh sửa mã HTML mỗi lần.

Nếu bạn áp dụng hiệu ứng này cho các sản phẩm hoặc ảnh portfolio của mình, nó sẽ giúp người dùng dễ dàng tìm hiểu thêm thông tin mà không cần phải mở thêm trang hoặc cửa sổ mới.

Chúc bạn thành công trong việc tạo ra những trang web đẹp mắt và tương tác!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Thủ Thuật Flatsome: Tạo Shortcode Đánh Giá Khách Hàng Cực Đẹp Cho Website WordPress

Bạn đang xây dựng một website bằng theme Flatsome và muốn hiển thị các đánh giá khách hàng chuyên nghiệp, đẹp mắt, tùy chỉnh linh...
Plugin Nulled Là Gì? Có Nên Tải Miễn Phí Trên Internet?

Ngày nay, khi xây dựng website bằng WordPress, rất nhiều người tìm đến các plugin bản quyền (premium) để tối ưu hóa tính năng, tăng...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép WordPress

Mục LụcTại Sao Cần Sử Dụng Hiệu Ứng Di Chuột Vào Ảnh?Cách Tạo Hiệu Ứng Di Chuột Vào Ảnh Hiển Thị Ảnh KhácCode Hoàn Chỉnh...
Bao Giờ Google Cập Nhật PageRank? Cập Nhật Mới Nhất Về PageRank 2025

Kể từ khi ra đời, PageRank đã trở thành một yếu tố quan trọng trong thuật toán của Google để đánh giá và xếp hạng...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Mục LụcTại Sao Cần Sử Dụng Hiệu Ứng Di Chuột Vào Ảnh?Cách Tạo Hiệu Ứng Di Chuột Vào Ảnh Hiển Thị Ảnh KhácCode Hoàn Chỉnh...
Thủ thuật Css Tạo Hiệu Ứng Line Effect Khi Rê Chuột Vào Bài Viết WordPress

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một hiệu ứng line effect độc đáo và bắt mắt khi rê chuột...
1001 Lưu Ý Cẩn Thận Trong SEO 2025 Trên Google

SEO (Search Engine Optimization) luôn là một lĩnh vực không ngừng thay đổi, và vào năm 2025, Google đã có những cập nhật quan trọng...
Tối Ưu Hóa SEO Cho Các Doanh Nghiệp Nhỏ Năm 2025 Mới Nhất

Trong kinh doanh hiện đại, sự hiện diện trực tuyến không chỉ là một lợi thế mà còn là điều cần thiết cho sự thành...
Code chức năng wordpress yêu cầu thay đổi mật khẩu định kỳ

Dưới đây là code hoàn chỉnh để yêu cầu người dùng WordPress thay đổi mật khẩu định kỳ mỗi 6 tháng. Chức năng chính của...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Hướng Dẫn Làm Sạch Header WordPress Để Tăng Tốc Độ Tải Trang Và Cải Thiện SEO

Khi sử dụng WordPress, nhiều người dùng không để ý rằng phần Header của website chứa rất nhiều mã không cần thiết. Những đoạn mã...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

Mục LụcTại Sao Cần Sử Dụng Hiệu Ứng Di Chuột Vào Ảnh?Cách Tạo Hiệu Ứng Di Chuột Vào Ảnh Hiển Thị Ảnh KhácCode Hoàn Chỉnh...