Here is an example I've put together to better illustrate this problem:
http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html
When you go from image A area to image B area or reverse, there are locations where the rollover doesn't show because the image map below is covered with transparent area of rollover image. Is there a way to make the rollover image hidden from mouse? In ActionScript I could do this by setting an object's mouseEnable property to false to get it out of the way, but I don't know how I can do this in HTML/JavaScript.
The rollover image (pink) is absolute positioned with a higher z-index above the black & white image. The practical usage is for highlighting floorplans on a floorplate of a building whenever mouse rolls over a floorplan.
Thanks,
Saeid
I don't know if this would work for your situation, but an easy way to do it could be to make your black & white image partially transparent (instead of white) and put the pink image below it (that is, give it a lower z-index). Does that help at all?
Related
I'm trying to overlay part of a page with a triangle. I have an absolutely positioned div that I put some text in. I can display / hide it in response to buttons being clicked. However, when I replace the text with a canvas nested in the div, I'm having trouble with the display. I would like for the canvas background to be transparent but have the triangle be visible, covering part of the page it's overlaying. My stylesheet has visibility none. I've tried a bunch of combinations of opacity, visibility, etc., but so far with no success. I usually end up with the background (unfilled part) and the triangle showing with the same opacity. Any ideas? Is there a whole better approach?
Well, I answered my own poorly worded question while I was lying wide awake last night. I made the div with the canvas element transparent and that was all it took.
Here is what I'm trying to do :
Have 2 divs one under the other. The bottom one is displaying an image and the up one is let's say white.
On hover, I want the white one to hide so that we can see the one under, with like its opacity down to 0 so it's transparent.
The things is, it should only show a part of that div with a transparent gradient circle around it, following the mouse's course.
Don't mind the white rectangle, it's about the background : the UP div would be a white fullscreen div, whereas the bottom one would be the sky, and when hovering with the mouse we would only see a part of the sky.
Do you guys have any idea on how I could do that, using HTML, css and/or JQuery? :/
one solution would be using a white PNG with a transparent gradient hole in it as the background of the upper div
then with onHover="script..." you set the position of the upper div
both divs must have absolute positioning so one gets on the top of the other
I am trying to create a banner for the top of page, but haven't found any code yet that combines all of what I need. I have included an illustration of what I'm trying to do.
A) I have 4 buttons (each an image file), two to either side default image in the center. This is the main/inactive state.
All of the buttons would have similar animation when hovered over. For the sake of this question, I only illustrated two of the buttons.
B) If you hover over Box 1 (top left), the button would change and text and lines would slide out from left to right. Also, the center image would change. And, to make things extra challenging, the left button and center image would link to Page 1. When you move away, the text slides back to the left, and the image returns to the default state in A. The blue box would behave the same way, linking to Page 2.
C) In a similar manner, if you hover over Box 4 (bottom right), the button would change and text and lines would slide out from right to left. Also, the center image would change. The right button and center image would link to Page 4. When you move away, the text slides back to the right, and the image returns to the default state in A. The green box would behave in the same manner, linking to Page 3.
The closest I've found is this: jQuery image slide on hover effect (horizontal) I was thinking that if I used the static images of all (A) as a background image, maybe I could create a transparent sprite, with only the active version of the hovered button and the center image, to slide left or right on hover.
I can see how the above example might would work for Boxes 1 and 3 (top left and right) and give the illusion of the lines sliding out as the image slides either left or right, but I'm not sure how it would work for Boxes 2 and 4.
Am I on the right track, or am I asking for way more than what's possible in JQuery? I'd be fine with loosing the animated text (I could just make them part of the hover images), but the buttons and center image need to change on hover, and they need to link to a page.
I've made a widget in jQuery that was confused with flash before. I think you need to breakdown each element of your widget into discrete pieces. You are making a new widget. There will be no methods doing what you want. You will have to use the .animate() method explained here. http://api.jquery.com/animate/ You will be animating one CSS class to another CSS class using the .animate() method.
This page has a good primer on the animate method.
http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html
Here's what I would do:
I would make the HTML of the page you want.
I would create CSS of each style of box that you will have.
I would have all the same CSS directives on every box that will
animate. I have found the animate method more agreeable if all CSS
that is to be computed has the same parameters but with different
values.
I would use full resolution images in the 4 outer boxes.
I would animate the div containing the image, not the image itself.
I would make the image fill the div dynamically so that when I
changed the size of the div the image would be a gimmie.
I would work in firebug testing out different commands and see how
they behave. This is critical. The interactive javascript console
is your friend.
This is a big task... when you're done this will be a nice feather in your cap! Maybe after that you could turn it into a jQuery plugin for others to use!
I decided to mess around with this for a bit, here is what I whipped up so far. No links as yet, but for a half hour I don't feel too bad about that :)
http://jsfiddle.net/BH8s5/3/
I am trying to do something similar to expose from jQuery toolkit.
http://flowplayer.org/tools/demos/toolbox/expose/index.html
Except I am trying to use an image as a background and have the overlay over it and reveal only a portion of the image as 100% visible (kind of like a reverse highlight).
My current solution is:
I make an overlay on a image background div and make the z-index of the visible section div higher than that of the overlay. But since the background of the visible section div is transparent the div just shows the overlay. The way the plugins I have seen get around this is by setting the background of the visible section div to a color allowing that whole div to set above the overlay since I am using a pretty big image, I don't have the option to use a colored background on the div. I also don't want to show a cloned copy of the original image because these background images are huge.
I couldn't find any documentation of how to do this online. I'd appreciate any feedback I could get.
My suggestion would be to absolutize the element, set it to a relatively high z-index, then sit your faded layer below that, but still higher than any other content. It would give the appearance of the effect you want.
On a click of some button I need to show an image of a vinyl record. The image will appear somewhere next to the button and is a transparent png to make it look round.
The problem is it needs to be shown using a circle mask animating from a dot in the centre of the image and expanding to show the whole "record". How to create a rounded animated mask that will reveal the "record" image without zooming/rescaling the image.
Does anyone know a JavaScript or preferably jQuery library capable of something like that?
If you know of such a thing in a different language it might help me to write something of my own.
Thanks.
Perhaps you could create a large white (or background-colored) PNG with an alpha transparency hole in the center. Place this on top of the image to be revealed, then scale it up while keeping it pinned at its center point. Once it's scaled to the point where the entire underlying image is within the transparent hole, remove the covering image.
I have no idea how this would perform (probably badly!), but it's a thought.
HTML comes in rectangles as a rule, if you have an image with transparency, then you can scale it, keeping it's centre constant.
If you need it to be selectable only within the circle, then you will need to check the mouse coordinate for click operations to see if it is within the circle, within it's containing rectangle. See: How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery
#6bytes suggested using rounded corners.
Chrome and FireFox currently surround round-corners via the border-radius and -moz-border-radius CSS attributes, so you can achieve a circle visually with 50% border radius. However, this is only a visual difference on an underlying rectangle, clicks within the rectangle still count as being on the circle itself.
#circle {
-moz-border-radius: 50%;
border-radius: 50%;
}
Basic Rectangle Demo: http://jsfiddle.net/rL4BU/2/
You can put some code in to check if clicks are within the circle to fix this.
Circle Clicks Demo: http://jsfiddle.net/rL4BU/4/