Looking for recommendations on a plugin that can switch background images when hovering over different buttons.
I have three buttons, each with a corresponding image. When I hover over the buttons, I want the background image to change accordingly. I'm really struggling with this and could use some help!
If you're looking for a simple solution, check out this method: Fiddle. You can also utilize a sprite sheet available at: https://i.sstatic.net/OWeVC.png
There are a couple of ways to achieve this effect. One approach is to use CSS, as shown below:
#mylink-1 {
background: transparent url('/img/my-img.png') 0 0 no-repeat;
}
#mylink-1:hover {
background: transparent url('/img/my-img-over.png') 0 0 no-repeat;
}
#mylink-2 {
background: transparent url('/img/my-img-2.png') 0 0 no-repeat;
}
#mylink-2:hover {
background: transparent url('/img/my-img-2-over.png') 0 0 no-repeat;
}
Alternatively, you can utilize a sprite sheet like this:
#mylink-1 {
background: transparent url('/img/my-img.png') 0 0 no-repeat;
}
#mylink-1:hover {
background: transparent url('/img/my-img-over.png') 0 -20px no-repeat;
}
The other approach involves using JavaScript, especially if you're working with jQuery:
$('#mylink-1').on('hover', function() {
$(this).css({ background: 'transparent url("/img/my-img-over.png") 0 0 no-repeat' });
});
If you have multiple links to modify and want to streamline the process using numbered images or sprites, consider this method:
var i = 1;
// For non-sprite images
#('.mylinks').each(function() {
$(this).css({ background: "transparent url('/img/my-img-' + i +'-over.png') 0 0 no-repeat" });
i++;
});
var i = 0;
// For sprite images
#('.mylinks').each(function() {
$(this).css({ background: "transparent url('/img/my-img-over.png') 0 ' + i + 'px no-repeat" });
i -= 20;
});
Explore hundreds of examples by searching for tour questions online. Here are some suggestions that could be helpful: 1,2,3
Have you considered using CSS for this task instead?
#button1:hover
{
background: url(/image/btn1.png) no-repeat;
}
#button2:hover
{
background: url(/image/btn2.png) no-repeat;
}
#button3:hover
{
background: url(/image/btn3.png) no-repeat;
}
Trying to set up a signup form for a web-app and encountering some issues. Using hooks in a function to render the signup page, which is routed from the login page. Currently, everything works fine when returning HTML directly from the function (signup), ...
I am currently working on an Index view where a table displays a list of items, each with a link to show its details in another partialview loaded through Ajax. Users have expressed interest in being able to easily navigate between "Next Item" and "Previo ...
If I have three different divs with unique IDs on a webpage <div id="product-id-001"></div> <div id="product-id-002"></div> <div id="product-id-003"></div> Is there a way to add image elements based on the ID of each d ...
As a newcomer to Laravel and Ajax, I've encountered an issue. When running the following script: $.ajax({ type : 'GET', url : 'getListeGenreCategorieAjax/'+$(this).val() , dataType : 'html', ...
I'm a beginner in PHP and encountering the following errors: Warning: include_once(headerSite.php): failed to open stream: No such file or directory in C:\xampp\htdocs\dbtest\index.php on line 3 Warning: include_once(): Failed ope ...
Recently, I noticed a mouse-hover effect on two websites and found it quite appealing. https://i.sstatic.net/Ly0gP.png https://i.sstatic.net/oDe1i.png This is the specific effect that caught my attention. Can anyone provide me with insight on how to impl ...
This is my code snippet for creating a dropdown menu to select classes: <div class="dropdown"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button"id="menu1" data-toggle="dropdown">Go To Class<span class="caret"></ ...
Does anyone know how to implement a redirect after displaying an alert message once a form is submitted? $.ajax({ type: "post", data: person, async:false, url: 'https://webapp.example.c ...
Can SCSS be used to determine if an element is empty? For instance, I'm interested in assigning a variable based on whether the class has content or not. <div class="defaultClass"> <!-- This div is empty --> </div> Is there a w ...
I need assistance with saving canvas (signatures) created using Asp.Net webforms and JQuery into a SQL server database. Can anyone provide suggestions on how I can achieve this? What type of field should I use to store it in the database? ...
Currently, I am in the process of constructing a website that requires a menu to gracefully slide from the left side of the screen (with a width of 0px) to the right side (expanding to a width of 250px), all with the help of jQuery animations. Here is wha ...
I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...
Could you please guide me on creating a dynamic list in Angular.js? I have successfully implemented a feature where users can add items to the list by clicking a button and filling out the required fields. To see this in action, check out this fiddle: http ...
My Datepicker is expanding and filling the entire screen. What could be causing this issue? Here is my code: Additionally, how can I change the date format in jQuery to appear as dd-mm-yyyy? https://i.stack.imgur.com/IQzVV.png HTML: <!DOCTYPE html&g ...
When displaying text, some alphabets take up more space than others. So how can I adjust the white space between elements '#re1' and '#re2' automatically in the scenario described below? In this code snippet, what is the best way to ad ...
I've been spending a good couple of hours trying to unravel the mystery behind the "ved" parameter in Google search results. Curiosity always gets the best of me. Here's what I've discovered so far: The value of "ved" changes- 1 - for ever ...
Recently, I decided to incorporate Material-UI into a React project for the first time. The AppBar was set up to trigger Drawer, which displayed a list of menu items in the sidebar. However, an issue arose with excessive margin-top spacing. Here is an ill ...
Snippet of HTML Code: <select name="ser" id="ser" class="form-control" onchange="getPrice(this.value);"> <option value="">--Select--</option> <option value="Value11">Value1</option> <option value="Value2">Value2</op ...
I have created a simple script that changes the background image when hovering over a div. However, I am experiencing a flickering issue where the image briefly turns white before transitioning. I have tried to resolve this problem but have not been succes ...
Within a panel in an UpdatePanel, there is both a dropdown list and a file upload control. The goal is to enable the Upload button when a value is selected from the dropdown and a file is uploaded. This functionality is achieved through a JavaScript functi ...