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>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing