I have an HTML image of a mannequin. An image map defines body parts. I have two divs on top of the image map, one to show the hover selection and one to show the current (active part). The problem I have is: when a part is marked as 'active', I reposition the background on the 'active' layer to show a highlighted background image (a sprite map which uses a different colour. When the 'active' state i displayed, I can't click through it's transparent parts to select a different part.
One possible solution would be to use pointer-events, but I wanted to keep it as compatible as possible.
When i.e. a div has opacity:0; to make it transparent, it's still on top of other div's.
This way the div underneath won't be clickable.
This can be fixed by changing the display-mode of a div to hidden.
This way the div will be 'removed' and div's laying underneath will be clickable.
If you want to be able to click through transparent parts of an image, try using them as .PNG files.
-not sure if this might be helpful to you-
It's difficult to visualise the issue without being able to look at code or a diagram, but I've tried something in JSFiddle that may help.
In the example I've created, the 'hover' element starts off being unclickable where the 'active' element covers it (but is clickable where it is uncovered). After clicking the 'hover' element, its z-index property is altered so that it appears on top of the other elements. You can see it works because it is subsequently clickable everywhere.
Relevant jquery:
$( "#hover" ).css( "z-index", "2" );
I'm hoping this solution is helpful but, again, it's hard to tell if I've got the right idea without seeing a visual example of the original problem.
The idea behind this solution is you can rearrange the z-index values of elements upon clicks registering as many times as you need in order to make sure the relevant parts of the page are always clickable by the user.
Related
I've actually got the tooltip showing where I want it to show, that part is working. The text it's displaying is contained in a <span> that's hidden until they hover over a div that has the tooltip class on it, similar to the example on w3schools.com.
I have a column of div's and only certain ones get the tooltip class. The problem I'm having is that the span is successfully hidden in the div's that don't have the tooltip class, but it's still reserving the space for it and I'm having trouble figuring out how to get it to not do that.
I'm hiding the <span> with CSS's visibilty:hidden which hides the text but the space for it is still reserved. If I change it to display:none instead of visibility:hidden it hides the text and does not reserve the space for it, which makes sense and that is almost what I want except I can't make it visible again without posting back.
So now I'm debating putting the whole thing inside of an ajax call so I don't have to refresh the whole page, but I'm not sure that would work either.
Is this even possible, or does anyone have any suggestions?
I appreciate any help anyone can offer.
Thanks
You can try span{position:absolute}
Use js instead of css.
If you use css then it'll also create problems on responsive.
You can use bootstrap tooltip or simple jQuery
https://jqueryui.com/tooltip/
what you can do is, give that div an id, and through css hover, set the tooltip's display to block,
or you can use, javascript for this, regidter those divs with a on hover, function , check the target of the hovered element, if it matches with that one, set tooltip's div display property to block,,simple
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I am trying to create an image map where there is one main image, and when you hover over certain areas different images come up.
Something like this How to apply Hovering on html area tag? but instead of creating an outline it would show different images.
I do not want to usse jQuery and would prefer to rely on CSS and HTML.
Thanks in advance.
You could cover smaller blank images over the large main image and use the hover code separately for each image
The non hover image is a "blank" png and the hover is the desired result
Just use the code for each "blank" image with the main image in the background with z-index of "0"
As said in previous answer, you could do this by using the z-index property. But try setting the main image's z-index as 0, and all small images(that you want to show over main image) as lower than 0.
And finally, activate by swapping the z-index between values lower or higher than 0 on mouse hover.
Hope this helps :)
Basically, I am using Iframes on my website, and I have a 200px bar on the left which I am using for navigation. There are several links here, of which when I hover over them the text and background colors invert (so you can see it, basically).
What I want is that so the background color will span the whole of the navigation frame - currently, it is only a small square around the box. I want it to look like this at any resolution and so far... my attempts have been useless.
I am using HTML and CSS, and would preferably like a solution using those languages.
Thank you for your help.
I'm fairly sure this can't be done without the use of JavaScript. Consider the code at
http://jsfiddle.net/ZPzBL/
the a:hover only allows the style of the link to be changed.
If you want the whole div to change colour (which, if I've read your question correctly, is what you want), then using purely html, you'd need to have a style with .wrapper:hover, such as this:
http://jsfiddle.net/ZPzBL/1/,
but this means that the whole div changes colour as soon as you hover over it.
Essentially, CSS only lets you change the style of the element being hovered over at that time. Any other changes to the DOM need to be handled by JavaScript. You'll probably want to have a look at http://api.jquery.com/hover/
I've designed a website with an elaborate transparent header that has to pass over part of the main section of the page. I'm trying to keep the number of images used in the website down to a minimum, partly for size and partly for cleaner markup.
I want to start putting clickable items in a blank area under the transparency. I managed to get the image to overlap the div in question by playing with the z-index. Now of course, it's unclickable.
Does anyone have a clever solution to this problem? I can think of several different ways "around" the problem that are less ideal, but I'm hoping to avoid those and find a solution that doesn't use JS or an imagemap. I've tried to use a nested div with a higher z-order (outer div is -1, inner div is 1), but it doesn't work.
It turns out that it wasn't necessary at all to change the z-index. All I had to do was use the negative margin and I could click the content in the transparent area under the image. My mistake was making the initial assumption that I would need to change the z-index for some reason. If I had attempted it without touching the z-index, It wouldn't have been an issue at all.
you can $.Event to make an event and then trigger it when ever needed :)
prefectly cross browser and easy