I would like to get the effect of a square image that when you click it you will be able to select another image from your files to replace that image.
So I have this image div:
<div class="uploader boxCorners">
<div class="imagePreview"> <img src="http://i.pravatar.cc/500?img=7"/></div>
</div>
And when clicking the imagePreview I need to be able to upload another image.
I know you upload a file with:
<input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
How to set the image to be the input (without getting that ugly upload button) and replace it with the new one?
You could try something like this:
Create relative container
Stretch absolutely positioned file input to the corners of the parent container
Set pointer-events: none on the image, so the click reaches the input
.imagePreview {
position: relative;
}
.imagePreview img {
pointer-events: none;
}
[type="file"] {
cursor: pointer; /* <-- Let people know it's clickable */
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="uploader boxCorners">
<div class="imagePreview">
<img alt="Super cute cat" src="http://placekitten.com/200/200" />
<input type="file">
</div>
</div>
jsFiddle
Related
So we're a group of three that have our first assignment in IT. We're supposed to make a simple game or just a website with some basic HTML and CSS (no JS), preferably with animations. We have decided to make a game where your cursor is Homer Simpson, and he's trying to eat the donuts in the kitchen.
The basis for this is a background image of the kitchen room, some donut images and the image for the mouse cursor. The donuts are multiple PNGs with the same screen-size as the background-image.
So far we've managed to create a working cursor, background-image and placing the donuts. Our problem though, is that we can't figure out how to make the donuts invisible when clicked upon.
Below is the code from both our HTML and CSS documents.
body {
height: 100vh;
cursor: url('../images/homer2.png'), auto;
}
body:active {
height: 100vh;
cursor: url('../images/homer-eat2.png'), auto;
}
.kitchen {
position: relative;
top: 0;
left: 0;
}
.donut1{
position: absolute;
top: 0;
left: 0;
visibility: visible;
}
.donut1:active{
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.donut2{
position: absolute;
top: 0;
left: 0;
}
.donut3{
position: absolute;
top: 0;
left: 0;
}
.donut4{
position: absolute;
top: 0;
left: 0;
}
.donut5{
position: absolute;
top: 0;
left: 0;
}
.images {
position: relative;
left: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div images>
<img src="../images/background-page2-new.png" class="kitchen" draggable="false" usemap="#img-map">>
<img src="../images/donut-1.png" class="donut1" draggable="false">
<img src="../images/donut-2.png" class="donut2" draggable="false">
<img src="../images/donut-3.png" class="donut3" draggable="false">
<img src="../images/donut-4.png" class="donut4" draggable="false">
<img src="../images/donut-5.png" class="donut5" draggable="false">
</div>
</body>
</html>
So far we've only tried to make donut1 disappear, as we found it a bit pointless to copy paste that code before it actually works. Donut1 is the one at the table.
Below are some images of it for reference:
https://i.imgur.com/aWFRewj.png
https://i.imgur.com/mDQYi1u.png
you can achieve the result you want with the help of radio buttons.
its a nice and clean trick to hide something only with HMTL, CSS. (no JS)
Here I have setup a small example for you.
Follow this in your game, Put your Donut image in label and hide it when related input checked using CSS as I did, try to run this snippet and then click on d1, d2 text.
Note: if you want to re-appear your Image on click again, use Checkbox instead of radio.
input {display: none;}
input:checked + label {
display: none;
}
<section>
<div>
<input type="radio" id="donut1">
<label for="donut1">Donut 1</label>
</div>
<div>
<input type="radio" id="donut2">
<label for="donut2">Donut 2</label>
</div>
<div>
<input type="radio" id="donut3">
<label for="donut3">Donut 3</label>
</div>
<div>
<input type="radio" id="donut4">
<label for="donut4">Donut 4</label>
</div>
</section>
I'm trying to insert text on input image like below image
i.e. I have
<input id="faq" type=image" src="img_path"/>
and I want to put text on it using CSS.
(also I should do handle the position of text)
Is there any way to do it?
.container {
position: relative;
}
.text {
position: absolute;
font-size: 12px;
left: 10px;
top: calc(50% - 9px);
color: red;
}
<div class="container">
<div class="text">FAQ</div>
<input class="imgInput" id="faq" type="image" src="https://i.stack.imgur.com/I5t4o.gif">
</div>
This is one way to do it. This may not be exactly what you are looking for but this is one way to do it.
I'm trying to make a custom file selection button in HTML and CSS.
I've read on the internet that it can be done, hiding the original button and 'drawing' a new one over it, like so:
HTML:
<div class="upload">
<input type="file" class="upload" name="upload"/>
</div>
CSS:
div.upload {
width: 157px;
height: 57px;
background-color: silver;
}
div.upload input {
display: block !important;
width: 157px !important;
height: 57px !important;
opacity: 0 !important;
overflow: hidden !important;
}
And it's working, obviously... but I want only a text, not a image.
So I tried it like this way:
<div class="upload">
Choose File
<input type="file" class="upload" name="upload"/>
</div>
And it won't work when I click on the label. It only works when I click below it.
Why doesn't this work and how can I make this work? I also tried with pointer-events and nothing...
You have to assign your text to your <button>, using a <label> with a for attribute equal to the id of the <input>.
<div class="upload">
<label class="uploadLabel" for="uploadBtn"> Choose File</label>
<input id="uploadBtn" type="file" class="upload" name="upload" />
</div>
In order to completely cover the button with your label, you'll also have to add absolute positioning.
.uploadLabel {
position: absolute;
}
Demo
Why is this necessary?
The event is triggered on your button. This basically means, clicking on a plain text element won't do anything. To trigger a click event on your button, you simply delegate the click on your label to your button.
use an actual label element. that will take care of delegating the click from the container to the input.
set opacity to 0, as you did in your original post (another, more verbose, and arguably more semantic approach will be to position the input absolutely and the label relatively, and set a lower z-index to the input. that will cover the input completely, effectively hiding it — see the second example).
the benefit here is you get clickable area that matches the label surface only, so you can style and set the dimensions to the label alone.
.upload {
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
opacity: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
… and the more verbose approach:
.upload {
position: relative;
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
I found a way to make my own custom file upload control , by placing a fake control over it, and when i click the fake one , i am actually cliking the real control below.
Anyways the image for the browse button is a little to the top.
How can i lower it down a little?
Here is the js fiddle.
JsFiddle
Here is the html and css:
<div>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.jpg" />
</div>
</div>
</div>
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
I believe this is what you are looking for. jsFiddle
CSS
.moveimage
{
position: relative;
top: 3px;
}
Modified HTML
<img class="moveimage" src="search.jpg" />
I have a 3-columns template in my web application.
Imagine that the right-side div is <div id="right"> In some pages I want to disable all contents in this div using another div that has a transparent background.
How can I do it?
(please tell me your suggestions with a click on <input type="button" id="btn" value="Disable" /> as a handler)
HTML:
<div id="rigth" style="position: aboslute; left: 999px; top: 10px;">Whatever</div> -> your style here... I used some random values
<div id="rigthCover" style="position: aboslute; left: 999px; top: 10px; opacity: 0.3; background: #fff; display: none;">Whatever</div> -> same as the before one, works in mozilla/chrome, you have to filter opacity for IE (alpha filter, google it you find it fast)
<input type="button" id="btn" value="Disable" onclick="disable()" />
Javascript:
function disable()
{
document.getElementById("rightCover").style.display = "block";
}