I have a button in html.
Button is partially covered by canvas (with transparent background) and I can't click it in area covered by canvas.
It is very complicated form rich in graphic and moving these things will require a lot of work.
Is is possible to make canvas "invisible" for mouse click?
Just make button position:relative. It will allow you to click on button.
button {
position: relative;
}
canvas {
background-color: black;
margin-left: -30px;
}
<button>click</button>
<canvas width="100" height="100" />
Try a z-index on the button and canvas.
button, canvas {
position: relative;
}
button {
z-index: 1;
}
canvas {
z-index: 0;
}
You can use z-index in your css to apply a z-order. z-index
Maybe try something with z-index?
Button:
z-index: 1;
Canvas:
z-index: 0;
Related
I want to make a button that changes the text inside the button by pressing the button, but I don't know how! :(
I used :hover, but when I move the mouse pointer away, it goes back to its previous state.
There is the possibility of solving it with the pseudo-class :hover and the use of data attributes. The idea of this solution is that you hide the original button text, add an empty content and then use hover over the element to show the content of the data attribute.
I'll show you how in the following example:
body {
background-color: #F2CD5C;
text-align: center;
}
.container {
margin-top: 30vh;
}
/*
MARK BUTTON:
In the button styles, it is necessary to hide the original text that we generated, to create the correct spacing and the data attribute text can overlap
The text color must be the same as the button background.
Position must be relative.
*/
.button {
position: relative;
padding: 0.5em 1em;
border: 2px solid #fff;
border-radius: 15px;
font-size: 2em;
color: black;
background: black;
}
/*
MARK USE :before and :after
Setup pseudo-element ::before with content: ""; and position must be absolute and setup with the original position text inside the button.
Write ::after with the exact text inside button = Click me! with the same position and setup to ::before pseudo-element
*/
.button::before {
content: "";
position: absolute;
left:0;
width: 100%;
text-align: center;
opacity: 0;
color: white;
}
.button::after {
content: "Click me!";
position: absolute;
left:0;
width: 100%;
text-align: center;
opacity: 1;
color: white;
}
.button::before {
content: attr(data-hover);
}
.button:hover:before{
opacity: 1;
}
.button:hover:after{
opacity: 0;
}
<div class="container">
<button class="button" type="button" data-hover="Hello world!">Click me!</button>
</div>
The code uses pseudo-elements ::before and ::after to display different text when the button is hovered over. The text "Click me!" is set as the content for the ::after pseudo-element, while the ::before pseudo-element gets its content from the "data-hover" attribute. When the button is hovered over, the ::before pseudo-element's opacity becomes 1 and the ::after pseudo-element's opacity becomes 0, effectively hiding and showing different text on the button.
I hope this can help you solve your question. Anyway, this solution is not clean, we should handle the DOM using JavaScript.
Reference Links
Using data attributes
I only know how to do this using javascript, hope that helps.
HTML
<button class="btn">Hey, click me!</button>
JS
first I store the button in a variable
var button = document.querySelector(".btn")
then I add an event listener to the button with the "click" event, which will make the function "function()" be executed whenever the button is clicked
button.addEventListener("click", function(){})
now, I define the function to change the text of the button using "this" to access the button of the function and ".textContent" to change the text that was inside
button.addEventListener("click", function(){
this.textContent = "Hey, you clicked me!"
})
Click "run" for a preview
var button = document.querySelector(".btn")
button.addEventListener("click", function(){
this.textContent = "Hey, you clicked me!"
})
<button class="btn">Hey, click me!</button>
I am very new to programming and I am trying to setup a dark overlay over a whole page of my site, except some content with z-index. But the issue is the following, I need to be able to close/disable the dark overlay once I press on the overlay, I have not been able to find a way to do it on Google or on Stackoverflow. The only way I have seen it done is by using a button but that won't work in my instance, I just want to be able to disable the dark overlay when you click on any part of the dark overlay.
Any ideas to solve this?
You should use JavaScript (and jQuery) for that:
Event listener for click and then hide overlay
$(document).click(function() {
$('#overlay').css('display', 'none');
});
#overlay {
position: absolute;
top: 0;
left: 0;
background-color: grey;
width: 100%;
height: 300px;
opacity: 0.6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
This is the content below the overlay
</div>
<div id="overlay">
</div>
I have found the technique to customize file input element through putting a regular button in "front of it" and make the file input element with opacity: 0. Like this:
#wrapper {
position: relative;
overflow: hidden;
}
#button-on-top {
width: 200px;
padding: 10px;
}
#file-input-below {
position: absolute;
top: 0;
left: 0;
width: 200px;
padding: 10px;
}
<div id="wrapper">
<button id="button-on-top">Upload</button>
<input type="file" id="file-input-below">
</div>
But why does it actually work that when you click the button "above", the click goes to the real file input button and activates it? Normally, when there's an element "below" another, it doesn't register a click.
Such as with different kinds of overlays where buttons underneath cannot be clicked?
Thank you for an explanation in advance.
HTML files are rendered from top to bottom, so your input field is rendered later. That means if you put absolute to your button the input field slides under it.
But if you put your button below your button will slide under your input field.
If you still want to make it work put to your button an index-z of 1
#button-on-top {
z-index: 1;
}
and your input field should have an lower z-index then your button if you want to make your button clickable
#file-input-below {
z-index: -1;
}
I would like to add actions to this image
So when the user hovers over red dot, some information appears, or when clicks (modal from bootstrap appears). I am using bootstrap, and spreading divs over the image don't give normal result. I want it to be responsive. Any ideas?
there should be a onhover method for javascript on the html dom.
<div id="point1" onmouseover="doHover('point1', true);" onmouseout="doHover('point1', false);"></div>
So, you have a problem with the divs?
function doHover(id, bool) {
var obj = document.getElementById("hoverPoint"+id);
if(bool) {
obj.style.backgroundColor="green";
}else {
obj.style.backgroundColor="blue";
}
}
.hoverPoint {
position:absolute;
top: 0px;
left: 0px;
width:100px;
height:100px;
display:block;
background-color: blue;
opacity: .6;
}
#hoverPoint1 {
top: 130px;
left: 135px;
}
<img src="http://i.stack.imgur.com/sUTxI.png" style="width:777px; height:292px" />
<div class="hoverPoint" id="hoverPoint1" onmouseover="doHover(1,true);" onmouseout="doHover(1,false);"></div>
I solved the problem by deleting red dots in photoshop and then adding them using pure html (I made buttons with background image of red dots) then I placed this dots randomly on the roadmap
I have an image, and on top of that image is another smaller image. When the first image is clicked, the second one appears, and it disappears when the first image is clicked again. My problem is when the second image appears over the first one, it makes the area that it covers of the first image unclickable. Is it possible to make it so the first image can be clicked through the second image?
This is the HTML for the second image (it's generated in PHP):
Echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 0px; left: 70%;"/>';
Simply put both images in a container div, and attach the click event handler to that instead of the bigger image. This way you can simply make use of event bubbling (which isn't available on the bigger image since it cannot have child elements, such as the smaller image).
Find a working solution here:
https://jsfiddle.net/6nnwy3xw/
$(document).ready(function() {
$('.imgcontainer').on('click', function() {
$(this).toggleClass('toggleImg');
});
})
.imgcontainer {
height: 300px;
width: 300px;
position: relative;
}
.imgcontainer img:first-child {
display: block;
height: 300px;
width: 300px;
}
.imgcontainer img+img {
position: absolute;
top: 50px;
left: 50px;
opacity: 0;
transition-duration: 0.3s;
}
.imgcontainer.toggleImg img+img {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgcontainer">
<img src="http://lorempixel.com/300/300" />
<img src="http://lorempixel.com/200/200" />
</div>
I'm assuming your use-case is some kind of checkbox replacement element? In this case, this may also be of interest to you:
Use images like checkboxes
If that is the case, I'd make the surrounding diva label instead, so it also automatically checks your (probably hidden) real checkbox.
If I understand the issue you're describing properly, you could try turning pointer-events off for the second image, that is often displayed over the click-target:
.two { pointer-events: none; }
Note that this is only supported with HTML in Internet Explorer 11 and up (as well as in Chrome and Firefox). For SVG, support was available in IE 9. That may suffice for a work-around if needed.
Fiddle: http://jsfiddle.net/tbqxjp19/
For better support you should move your handler to an element that will not be obstructed, and as such will always work to toggle the visibility of the second image:
<div class="images">
<img src="http://placehold.it/100x100" class="one" />
<img src="http://placehold.it/100x100/000000" class="two" />
</div>
document.querySelector( ".images" ).addEventListener( "click", function () {
this.classList.toggle( "toggled" );
});
The above simply binds a handler to click events on the .images container, toggling a class that will hide and/or reveal the second image, given the following:
.toggled .two {
opacity: .1;
}
Fiddle: http://jsfiddle.net/tbqxjp19/1/
Try this , if you are fine with jquery solution.
HTML
<img src="images/large.png" class ="image" id="image1" style="position: absolute; top: 0px; left: 0px;" />
<img src="images/small.png" id="image2" class ="image" style="position: absolute; top: 0px; left: 0px; z-index:10;" />
css
.hiddenimage{
display:none;
}
JQuery
$(".image").click(function(){
("#image2").toggleClass("hiddenimage");
})