Foreground without blocking functions - html

I have a normal website with some pictures in it. When I hover over the pictures with the mouse it plays a short audio. Now I want to insert a big black dot as a foreground picture. And this dot will cover some pictures. Now with this I still want to use the hover function even if the pictures are being covered.(It should still detect if the picture is being hovered by the mouse even though they are covered). This should be simulating (in a way) visual impairment.
it looks like this and the dots size will change if I navigate to another page: https://imgur.com/U6X4dcp
How can I insert a (foreground) picture that covers the whole page?
How can I use the hover function even though the pictures are covered?

You have to make the foreground picture child of the element that is to be hovered:
#element:hover #foregroundpicture{
display:fixed;
width:100%;
top:0;
left:0
}

Related

How can I create transparent divs that have a picture as background on an otherwise black background?

I want to recreate an interface similar to Windows Phone 10.
You can see an example of what I try to achieve in HTML in this picture:
The middle tiles act like Windows on the baby picture while the space between tiles is black.
There's no magic going on here. In the picture you've supplied the phone has a desktop of a child that is letterboxed (black stripe across top and bottom). The tiles on the top and bottom of the screen are opaque and show their own backgrounds. The tiles in the middle are fully transparent, but have a solid black border to them to show the child behind them.
To make the tiles, you simply need this:
.tile { background-color:rgba(0,0,0,0);
border: 3px solid black;
}
Take a look at this fiddle for a basic example: https://jsfiddle.net/Lnafvvx9/6/
For a dynamic approach:
You could slice a picture in many litte parts (and delete the sliced borders). Then you create and align different divs with a individual background image containing your sliced picture parts.
There is also a kind of work around for static pages:
Create one div with the big (not sliced picture).
Use a transparent PNG image containing only the "border" of the black background. Place that in a div on top of the other div and you got the style. Then you need to add little divs ontop of the positions where you can see the picture.
The important thing is, that these designs require pixel perfect static layout. This means you can't scale divs size or change the position when the browser window or screen is smaller. But its also the easiest way do do that and the last suggestion allows to change the picture without slicing it.
For real dynamic approach you could load the same picture (unsliced) in every button (use different css id for everyone) and position the background of them individually to fit together. The advantage of this is, that you can then use CSS3 for instance to scale the button size on hover. This can lead to a cool expanding image effect. Just look up
http://www.w3schools.com/cssref/pr_background-position.asp
http://www.w3schools.com/css/css3_animations.asp
I hope that helps :)

image appear over other image on hover over

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 :)

Clicking through to sublayers

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.

Image appearing and disappearing with CSS hover

I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites

Background runs behind button

Background behind button should be like block background. Button can change its width.
How I can realise this?
This might be done in a lot of ways, here's just my first idea:
Use a mask like this:
Make sure your background-image covers the whole button
Insert two white divs above the background-image: left & right of your button
Insert a Mask like the above as the buttons background
Due to the transparent area (indicated by the texture) you are able to display a border-like part of your background image while the rest of it stays invisible, because its overlapped.
I illustrated the result of the instructions above