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.
Related
I have multiple background images that are behind a block of text each. I would like to fade each background image and have the text move up when one background image fades into another.
For example
BG1 (background image 1) has Tegxt1 on top of it. As BG1 fades into BG2, Text1 moves up and is replaced by Text2.
How can I do this with simple jquery and javascript and CSS?
Here's what I tried
this._currentTimeout = setTimeout(function() {
this.slides$.eq(newSlideIndex).css('z-index', 3).fadeTo(ANIMATION_FADE_DURATION, 1, function() {
this.slides$.eq(this.currentSlideIndex).css('z-index', 1).css('opacity', 0);
this.slides$.eq(newSlideIndex).css('z-index', 2);
this.currentSlideIndex = newSlideIndex;
this._setTransitionTimerForNewSlide(this._getNextSlideIndex(), 5000);
}.bind(this));
}.bind(this), durationUntilTransition);
You did not provide enough code to generate a complete working example (How is your html structured? Where is your jQuery located on the page? What does your existing CSS look like?), so unfortunately no one on StackOverflow and give you a perfect answer. The best we can do is create a small demo of what you could do to accomplish this affect. It's then up to you to learn from the example and apply the concept to your own code.
If I was going to try to accomplish this, here's the approach I would take:
Stack images on top of each other with position: absolute;
The first image group should have the highest z-index, so it's on top. CSS can do this!
The second image group should have the second-highest z-index, so that it shows behind the first image during the fade. CSS again!
all other image_groups should have z-index below the second image. Yay for CSS!
Animate the image and text seperately
The image just needs to fade out
The text needs to fade up and out
After the first (top) image group is completely faded, move it to the bottom of the list
Remove the inline style="..." that jQuery's .animate() applies to the image group. Once we do this, the image group will adhere to the css rules we set up in step one.
JS Fiddle Demo
The first step will be done manually by you when you're writing HTML and CSS, but then your jQuery can handle steps 2-4. Then just repeat as much as you'd like. Ask questions if you need to, but try hard to apply this to your own code. Good luck!!
How to give multiple effects on photo canvas using camanjs?
My Case : "After i applied the filter effect and then add text on image the previous filter effect reverted to original image means previous effect lost from photo."
You can make use of:
this.reloadCanvasData();
I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!
This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)
If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.
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.
I'm trying to create a web design and there are a bit strange forms, something like this:
when the user hover on 1 section the background should change only for it:
the same for the second and third one:
Hope I'm clear...
I have no idea what technology should I use in order to achieve this affect. Can anyone please help?
Could use absolutely positioned pngs with image replacement on hover, then throw a rectangular div inside there
There are two ways:
use SVG to draw the shapes, with a fallback for older versions of IE.
Use background images. on normal shaped divs.
I would go with three separate images, each with the whole background and one "selected" area - on hovering a div just replace the background to the one having that div as "selected".
Quick example for the JS code:
function ReplaceBg(oDiv, num) {
oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)";
}
function RestoreBg(oDiv) {
oDiv.parentNode.style.backgroundImage = "url(images/background.png)";
}
And the HTML:
<div style="background-image: url(images/background.png);">
<div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div>
<div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div>
<div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div>
</div>
Hope the idea is clear enough..
There is a CSS3 syntax boreder-radius and you can do this with it, but you had do the work here , I mean you had set the random pixels and look for the one which suits best. For example here it is -- http://jsfiddle.net/divinemamgai/Ld7He/
OR
Maybe you should keep the main background image as white for images 1 and 3 and for image 2 use png
based background-image and change it on mouseover using Jquery and don't forget to keep the highest z-index for image 2.
Hope this helps you.
May this help http://jsfiddle.net/JeaffreyGilbert/G3VG7/