How to change icon based on zoom level using jQuery ?

Last Updated : 28 Mar, 2023

In this article, we will see how to change icon based on zoom level using jQuery, along with understanding its basic implementation through the examples.

CSS zoom property in jQuery allows us to set the zoom value for a specific element and also allows us to get and set the value of these properties based on specific conditions. Suppose, we have an icon <img> element on our webpage with a zoom level of 40% at the start. This zoom level’s associated icons should be displayed. When we alter the zoom level of <img>, the icon should change to reflect the new zoom level. We will discuss the different approaches using the Jquery methods that change an icon based on the zoom level.

Approach: Our approach is to initially set the zoom level for this <image> element to 40% and then utilize a button to adjust the zoom level of this <img> element. Another function will be invoked depending on the zoom level to update the src property of the <image> element. With the help of jQuery, a CSS property’s value can be set or retrieved using the .css() function, depending on which element it applies to.

Syntax:

// Change the value of a CSS property 
// for a specific element.
$("element").css("property", "value");
 
// Get the value of a CSS property for
// a specific element.
var value_of_property = $("element").css("property");

The .attr() method in jQuery is used to retrieve or modify an attribute’s value for the selected element. It can be used with <a>, <img>, <input>, and others.

Syntax:

// Change the attribute value of selected element.
$("element").attr("attributeName", "attributeValue");

// Get the value of a attribute of selected element.
var attributeValue = $("element").attr("attributeName");

We will explore & use both methods in order to apply and change the CSS and an attribute value of <img> element.

Steps for changing the icon based on the zoom level:

Step 1: Create an HTML page with the <img> element and set the src attribute of this element. Now apply basic styling to it like width and height. Apply the zoom property and initially set it to 0.4 or any other value you want. You may also use the percentage value for zoom.

Step 2: Import the following Jquery CDN link into <head> element:

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js">
</script>

Step 3: Now create multiple button elements and apply on-click events for changing the zoom level of this <img> element using the .css() property.

Step 4: When changing the zoom level call another method that changes the src attribute value of <img> using the .attr() method based on the zoom levels.

Example 1: This example illustrates changing the icon based on different zoom levels using jQuery.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <style> 
        #icon { 
            width: 400px; 
            height: auto; 
            zoom: 0.4; 
        } 
    </style> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to change icon based on zoom level using jQuery? 
    </h3> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230315100901/gfg_img1.png" 
        alt="icon"
        id="icon"><br><br> 
  
    <button onclick="changeZoomLevel0()"> 
        ZOOM 40% 
    </button> 
    <button onclick="changeZoomLevel1()"> 
        ZOOM 50% 
    </button> 
    <button onclick="changeZoomLevel2()"> 
        ZOOM 70% 
    </button> 
    <button onclick="changeZoomLevel3()"> 
        ZOOM 90% 
    </button> 
  
    <script> 
        function changeZoomLevel0() { 
            $("#icon").css("zoom", "0.4"); 
            ChangeIcons(); 
        } 
  
        function changeZoomLevel1() { 
            $("#icon").css("zoom", "0.5"); 
            ChangeIcons(); 
        } 
        function changeZoomLevel2() { 
            $("#icon").css("zoom", "0.7"); 
            ChangeIcons(); 
  
        } 
        function changeZoomLevel3() { 
            $("#icon").css("zoom", "0.9"); 
            ChangeIcons(); 
        } 
  
  
        let ChangeIcons = () => { 
  
            var zLevel = $("#icon").css("zoom"); 
  
            if (zLevel === '0.5') { 
                $("#icon").attr("src", 
"https://media.geeksforgeeks.org/wp-content/uploads/20230315100901/gfg_img1.png"); 
            } else if (zLevel === '0.7') { 
                $("#icon").attr("src", 
"https://media.geeksforgeeks.org/wp-content/uploads/20230315100901/gfg_img2.png"); 
            } 
            else if (zLevel === '0.9') { 
                $("#icon").attr("src", 
"https://media.geeksforgeeks.org/wp-content/uploads/20230315100901/gfg_img3.png"); 
            } 
            else { 
                $("#icon").attr("src", 
"https://media.geeksforgeeks.org/wp-content/uploads/20230315100900/GFG1.png"); 
            } 
        } 
    </script> 
</body> 
  
</html>

Output: In the above example, we have four buttons for changing zoom levels, and when anyone button is clicked the ChangeIcons() is called to change the icon by changing the src attribute of <img> element.

Example 2: In the example, we have applied the necessary properties to the body element rather than adjusting the zoom level of a particular element. When the body’s zoom level is changed, the icon changes as well.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <style> 
        body { 
            zoom: 1; 
        } 
  
        #icon { 
            width: 400px; 
            height: auto; 
        } 
    </style> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
  
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to change icon based on  
        zoom level using jQuery? 
    </h3> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230315100901/gfg_img3.png" 
        alt="icon"
        id="icon"><br><br> 
  
    <button onclick="changeZoomLevel0()"> 
        BODY ZOOM 60% 
    </button> 
    <button onclick="changeZoomLevel3()"> 
        BODYZOOM 90% 
    </button> 
  
    <script> 
        function changeZoomLevel0() { 
            $("body").css("zoom", "0.6"); 
            ChangeIcons(); 
        } 
  
        function changeZoomLevel3() { 
            $("body").css("zoom", "0.9"); 
            ChangeIcons(); 
        } 
  
  
        let ChangeIcons = () => { 
  
            var zLevel = $("body").css("zoom"); 
  
            if (zLevel === '0.6') { 
                $("#icon").attr("src", 
"https://media.geeksforgeeks.org/wp-content/uploads/20230315100901/gfg_img2.png"); 
            } 
            else { 
                $("#icon").attr("src", 
"https://media.geeksforgeeks.org/wp-content/uploads/20230315100901/gfg_img1.png"); 
            } 
        } 
    </script> 
</body> 
  
</html>