When users hover over a small thumbnail I want that image to replace the background image.
How can I do this using Javascript/JQuery?
$('thumbnail id').hover(function(){
$(this).css('background-image','new image');
});
JQuery's hover would take care of this. Basically you want to get the image and set its hover functions to set the background image (and unset on hover out if that is your desired behavior)
$('#tumbnail_id').hover(function() {
// set the background
}, function() {
// unset the background
});
assuming your tumbnail HTML tag has an id of tumbnail_id. You can do some more clever stuff with your selectors and CSS classes if you have several thumbnails, but this is the basics of adding in your hover functionality.
Related
I want to change the cursor with my own image when it's hover on my specific divison
i have try below as per describe in Possible to replace cursor with my own custom image? this link
demo:hover
{
cursor:url("img/point.png");
}
but this is not working properly it's change cursor but not with my image
$(function () {
$(".btn").on("mouseover",function(){
$(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
});
$(".btn").on("mouseleave",function(){
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
});
});
The above code is the way I change the image when the user hover on the button, when user click on it , it will redirect to other page. And the Html element is like:
<img class="btn" src="images/index_03.gif" />
The problem is , I am sure the path is correct , but when the user click on the button , during the time of loading the next page or in some case, when i hover on the image , the hovered image is not shown but broken link, why is it and how to fix it? Thanks for helping
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
This code will reload the image, every time (or from cache).
So, during the page loading as other data is also loading at the same time, onhover image loading will be slow or broken.
I suggest you should load both images at the same time and at the same position and show/hide them on hover to get faster results.
Using CSS sprites instead of javascript calls will eliminate mouseover flickering, and reduce the total number of http requests required for your site (making it load faster).
You can achieve the same 'mouseover' functionality by using the css ':hover' pseudo element to alter the 'clip' property of the image (supported in IE6 and above).
Check out these CSS Tricks articles:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them.
CSS Sprites with Inline Images
Inside a page I am having a TR on which when user click it change it's color to blue and arrow color to white. This is achieved by changing elements' class dynamically.
But due to this what happen is, when user click on TR user saw image loading delay. How to preload that CSS image.
this.className = this.className + " active";
CSS
.table td.arrow div {background-image:url("../stuff/arrow.png");}
tr.active td.arrow div { background-image:
url("../stuff/arrow_active.png"); }
Update
One more thing want to update that static content is getting loaded from other server.
The browser only loads images from the CSS that are shown. So you could place your arrow_active image in a element, that is visible but has no opacity.
But i would suggest you use sprites: Less HTTP requests + no preloading problems: css-tricks.com/css-sprites , alistapart.com/articles/sprites
You could solve your problem like this with pure CSS.
http://jsfiddle.net/Q6dTf/
Alternatively you could use a :before pseudo element if you dont want to add a new HTML element.
As #meo said you are probably better off using sprites, but in case you want to preload images you can just create a dummy Image instance that loads the image into the browser's cache.
Like:
var preload = new Image();
preload.src = '../stuff/arrow_active.png'; //triggers the download
In case you want to wait for the preloading to wait for the page to build you can listen for the load event that the preload will fire when it has finished loading the file (be careful as this is complicated terrain).
I have a list of images in columns. I want to change the position of the image when user clicks on the image. I want to change the position of the image to the top image in that column. Please give me some idea how to do it.
There are several ways to do this. Either you manipulate the DOM or you change the CSS class. Dom manipulation way :
document.getElementById(parentNode.id).removeChild(this);
document.getElementById(parentNode.id).prependChild(this);
Use the .detach() command from jquery, it will allow you to set it back in later with all the events intact: http://jsfiddle.net/rkw79/QnWhR/
$('img').click(function() {
var x = $(this).detach();
x.prependTo('body');
});
animated version: http://jsfiddle.net/rkw79/PXPgT/
I'm using CSS sprites for a number of images on my site. I want to implement my up arrow and down arrows as sprites.
The arrows share one img tag on the website and I use javascript to swap in the proper image.
Let's say I'm changing a down arrow in the image to an up arrow. In the CSS, the down arrow is cssDownArrow and the up arrow is cssUpArrow.
The strategy I chose was to go to where I had
menuArrow.src = "/website/images/upArrow.gif";
and change it to this (cssUpArrow is the CSS class for the sprite and clear.gif is the placeholder image I"m using for the image tags where the sprites will be swapped in):
menuArrow.src = "/website/images/clear.gif";
menuArrow.class = "cssUpArrow";
However, when I do this, it doesn't show the correct image from the sprite, but keeps the one that was there before.
To some degree I understand why this is happening, but am not sure as to the best solution? Any help? Thanks!
You need to use className.
menuArrow.className = "cssUpArrow";
When using sprites for images you should have them in one image file and set the elements background to that image url, and then change the background position based on what image you want to show in the sprite.