I am aware that using CSS sprites is the way to go when you use images for both states, but what about when you have text as the unhovered state & an image on hover?
There a few ways I can think of, but wondering which method is the best in peoples opinions?
I can think of doing it via JavaScript or loading it via a hidden CSS element.
Are you using CSS Sprites for other relevant images on your website?
If not, then you should do it.
Have your "other relevant images" and "menu images" in the same sprite image.
Even if it's just for one other image, it will mean your :hover menu images are automatically preloaded.
You can use the same sprite, just set the sprite to a transparent section, or background-position out of the button, and when in hover, set it to the right place and text-indent the text, if the button image has the text on it.
Most browsers won't preload hidden images.
Related
So I'm making some sort of interactive map for a roleplaying game I have, where I want to be able to hover a country and it can scale up a bit and have a hover effect and so you can be able to click on it and it will give you main info of the country and stuff. Now the issue comes that I'm trying to check if there is a way to have multiple PNG layered up on HTML, CSS, JS and avoid having the transparent background of the top layer hover only that specific one. I'm trying to check if there is a way for the code to detect only the colored area of the img or if this is not possible.
I've tried layering with the z-index, but that doesn't really resolve the issue.
I would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png
I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas
Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image
I have an imagemap with several mapped areas.
I want on mouseover to overlay my imagemap (essentially my backgroundimage) with previously loaden images. The overlaying images have exactly the size of my backgroundimage and need to fadeIn when the mouse enters the mapped areas, and fadeOut when the mouse leaves.
I want to accomplish this with pure jQuery, no CSS (with overlaying the images previously, display:none and than fading one into each other, etc. - I am aware that there are such solutions, as proposed here e.g. JQuery mouseover image overlay).
There should be a way to paste an image over an existing one, without hiding it in a div tag or something, shouldnt there?
If code is needed, I can provide. But I rather want a hint and figure it out myself - thus I learn more :)
Is it possible to have a row of Links and when the mouse hovers over one of the links, the background fades into the background image set to that link.
Lets say theres 5 links [Coke][Burger][Cow][Chicken][Dog]
when you load the webpage there is just the original background, but then when you hover over [Chicken] the background image changes to a chicken, then if you hover over [Coke] Theres the cocacola logo as the background.
I think you get the idea?
well, I would do that by css using ids (#lnkCoke, #lnkBurger, etc.) and the :hover pseude-class
but if you want to do it by javascript I would use data attributes (Coke) and mouse events (onmouseover and onmouseout) to change the background image
is there any possibility how to load an image with jQuery in background and than animate the transition? I have a gallery of big fullscreen images as a background for my website. I have paths of all images in some hidden elements, at first I make the background div bit transparent, than I change the background-image property with jQuery and at last I make it again visible..But there is a bit long time before the image is loaded. I dont want to show any loader or something else..I only want to load the image in background and than male the transition..Is it possible? Thanks
did you try jquery image load
http://api.jquery.com/load-event/