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
Related
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 :)
On my site, I have a sticky navbar that is always positioned at the top of my site, so even as you scroll down, it's still visible.
It's also transparent, and just contains some black text.
The problem is that on my page, there are several divs with varying background colors. So as I scroll down the page, the text in the nav looks fine as I overlay divs with lighter backgrounds, but it's really hard to read on darker ones.
I figure I have two options:
Change the nav text color based on if I'm overlaying a div with class "dark"
Change the nav text color based on the background color of the div beneath it.
Are either of these possible? Or is there another option I'm not aware of?
I just read about Midnight.js, a jQuery plugin that allows you to use data-attributes on the elements you scroll over to define how your navigation should look. Might be worth to give it a look.
Check out jQuery Waypoints. It's perfect for your problem. You can specify exact waypoints so that the moment a differently colored div hits your menubar, an event is fired. and in that event you can change the menubar color. And then you'd have another waypoint at the bottom of that div so you could reset the color.
http://imakewebthings.com/jquery-waypoints/
I'm in the middle of making a sidebar for a web aplication that uses a user-uploaded image as the background element (seen here: http://c.mhy.me/WwMs). Since the image will be uploaded by the user, I'm wondering if I can change the colour of the logomark on the top (svg) based on the color profile of the image behind it.
For example, if the image has a lot of white, then change the logomark color to a light grey. Otherwise, keep it white for images that are primarily made up of darker colors.
Thanks in advance for the help.
You could use something like Background Check to identify the lightness of the image directly beneath the logomark and change the colour based on that.
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.
How would you fade in a background image (the body tag, and it is tiled) with jQuery? The background color is white and in a callback function I want to toggle the background image to on and off.
Any ideas?
Using jQuery for Background Image Animations
Unfortunately you can't really fade in a tiled background image. Since the image is part of the CSS rendering system it doesn't have a node in the DOM.
You can do some fancy stuff by using a frame type animation by moving the position of the background image but this wouldn't work with:
A. a whole body background
B. a tiled image.