I have a list of action (Create a free account, view stats, etc.). Here is how it's look like.
<div class="box_go">
<div class="ico"><img src="img/ico/arrow_f.png" width="16" /></div>
<h3>Get a free account</h3>
<p>And start earning points</p>
</div>
<div class="box_go">
<div class="ico"><img src="img/ico/arrow_f.png" width="16" /></div>
<h3>View stats</h3>
<p></p>
</div>
I want that a little arrow (div.ico) appear at the right of the parent div on hover.
Using jQuery... but when I hover on the first element, both arrows shows up...
Any idea? Thanks!
Why not just use CSS?
.box_go {
position: relative;
}
.box_go .ico {
position: absolute;
right: 10px;
display: none;
}
.box_go:hover .ico {
display: block;
}
<span id="matter">Matter written</span>
<span id="ico">image.ico</span>
$('#ico').hide();
$('#matter').mouseover(function() {
$('#ico').show();
});
$('#matter').mouseleave(function() {
$('#ico').hide();
});
Related
I have a bootstrap colum:
<div class="col-md-4 col-xs-12">
<img src="sample.jpg" style="height:100vh;width:100%;" />
</div>
and a sample picture:
My question is: Is there anyway I could define these two squares on a image as an objects? The problem I am facing is, I have a picture with some elements which would need to be defined as an objects... And I am trying to figure out what would be the best way to do it, if it is possible at all? Is there any software, which can help you with this? Some image to html generator or somethin? Eternal glory to the person who can present me solution! I would appreciate your reply.
Perhaps all you want to do is an image map?
Or, maybe, you want to position other elements over an image (see: example below)?
Or, you should use background image?
Perhaps your use–case could be not oversimplified and we'd be able to provide better solution for your exact need.
You need to be aware of different users and environments, especially if you plan to use this idea for navigation.
.rectangles {
border: solid red 1px;
position: relative;
}
.rectangles img {
outline: dashed blue 1px;
width: 100%;
}
.rectangle {
position: absolute;
outline: dashed red 1px;
color: #fff;
text-align: center;
}
.rectangle:hover {
background: red;
}
.rectangle.first {
left: 24.2%;
top: 14.4%;
width: 30.9%;
height: 20.2%;
}
.rectangle.second {
left: 24.9%;
top: 52.7%;
width: 29.9%;
height: 22.1%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-4 col-xs-12 rectangles">
<img src="https://i.stack.imgur.com/0ClBU.jpg" alt="Image with rectangles">
<a class="rectangle first" href="#">First rectangle</a>
<div class="rectangle second">Second rectangle</div>
</div>
</div>
Although I am not completely sure what you are asking, I think what you are asking for is if you can turn the image into a clickable object. The answer to that is yes. It is actually very simple because all you need is two different images (one for each square) surrounded by <a> tags. Here is the code:
function register1() {
document.getElementById('box').value = "Box 1 Clicked";
}
function register2() {
document.getElementById('box').value = "Box 2 Clicked";
}
div.2 {
position:absolute;
top:200px;
}
<div class="1">
<a onClick="register1()">
<img src="https://i.imgur.com/uomkVIL.png" width="200px" height="200px">
</a>
</div>
<div class="2">
<a onClick="register2()">
<img src="https://i.imgur.com/uomkVIL.png" width="200px" height="200px">
</a>
</div>
<input type="text" id="box" value="Click A Box">
There you go, you have two boxes that are images and can run a function when clicked.
I need to open/close a div container that will always appear at the top left corner no matter where I am on a page that has page scrolling. Position fixed would be acceptable in a desktop environment but in a mobile environment I need the user to be able to pull up or move down the div container so they can get to other input fields. If I use position absolute the div container could appear out of view if you are scrolled down at the bottom of the page.
Example problem using fixed... The mobile device popup keyboard will cover the lower input field. If you change position to absolute then you can see the out of view issue. https://jsfiddle.net/r71vb73u/15/
#workarea {
width: 160px;
padding: 5px;
height: 400px;
position: fixed;
background: #cccccc;
}
.input1 {
height: 90%;
}
.input2 {
height: 10%;
}
.blah {
float: left;
}
.buttons {
float: right;
}
.filler {
clear: both;
height: 800px;
}
function workarea(action) {
if (action == 'open') {
document.getElementById('workarea').style.display = '';
} else {
document.getElementById('workarea').style.display = 'none';
}
}
<body>
<div id="workarea">
<div class="input1">
<input type="text" value="hello">
</div>
<div class="input2">
<input type="text" value="world">
</div>
</div>
<div class="blah">blah blah ...</div>
<div class="buttons">
<input type="button" value="Open" onMouseDown="workarea('open');">
<input type="button" value="Close" onMouseDown="workarea('close');">
</div>
<div class="filler"></div>
<div class="blah">blah blah ...</div>
<div class="buttons">
<input type="button" value="Open" onMouseDown="workarea('open');">
<input type="button" value="Close" onMouseDown="workarea('close');">
</div>
</body>
Okay this wasn't my final answer but when u mention in mobile environment i got blank. But first i let u see my first answer. I will keep update until u say this is a correct answer. Check the DEMO
#workarea {
width: 160px;
padding: 5px;
position: fixed;
background: #cccccc;
left:0;
top:0;
bottom:0;
}
DEMO
Looks like I can add the following to the javascript action open:
document.getElementById('workarea').style.top = document.body.scrollTop + 10 + 'px';
This places the workarea at current top using position absolute.
https://jsfiddle.net/r71vb73u/28/
I'm trying to make a div draggable. The div contains an img and some text that serves as a label for the image. The problem is that when I start the drag by clicking on the img, the img gets dragged, and not the parent div. How do I fix that?
<div className="container-selected" id={id} draggable="true" onDragStart={this.dragStart} onDragEnd={this.drop} onClick={this.click}>
<img src={imgSrc} />
<span className="item-id">Some text</span>
</div>
Here's the CSS:
.container-selected {
padding: 10px;
position: relative;
z-index: 0;
img {
width: 3em;
z-index: -1;
}
.item-id {
position: absolute;
left: 0;
top: 53px;
width: 100%;
text-align: center;
}
}
This is many years later, but I ran into the same problem, and finally figured it out.
An image is draggable by default, so when you drag an image in a div, the image gets dragged. All you have to do is the make the image non-draggable by:
<img draggable="false" src={status} />
Now when you drag the div, the div and its contained image are dragged together.
You can use HTML5's drag and drop like this: https://jsfiddle.net/bv5fLrth/23/
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drag1" draggable="true" ondragstart="drag(event)">
<img id="drag1" src="http://lorempixel.com/400/200/" />
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
So what I'm trying to do is have an SVG overlay on an image on hover. Eventually I will animate it, but for now I'm just trying to get the overlay working. This is what I tried:
<div class="centering margin-on-top">
<img id="img1" src="media/circle-1.jpg" />
<img id="img2" src="media/circle-2.jpg" />
<img id="img3" src="media/circle-3.jpg" />
</div>
CSS:
#img1:hover {
background: url("../svg/stroke-ears.svg") no-repeat;
}
At first I thought it wasn't working at all. But then when I put the hover on the containing div instead and deleted the picture inside the "inspect element" window, the svg was there but hidden underneath the image.
Is there a way for me to maybe set a z-index on the image or the background?
Thanks in advance.
Change your CSS to this:
#img1 {
position: relative;
}
#img1:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("../svg/stroke-ears.svg") no-repeat;
}
What you're doing is creating a pseudo-element to overlay on top of the img. Your original img had the background applied to the background of the img as opposed to overlaying it.
This new solution creates an element outside the normal DOM that will treat your img as a container and cover the entirety of its dimensions with an element that has the original background you wanted applied.
Update
JSFiddle example
So, silly me, trying to treat imgs as containing elements. Here's the fix.
HTML
<div class="inline-container centering margin-on-top">
<div class='img-holder'>
<img id="img1" src="http://placehold.it/200x200" />
</div>
<div class='img-holder'>
<img id="img2" src="http://placehold.it/200x200/FBC93D" />
</div>
<div class='img-holder'>
<img id="img3" src="http://placehold.it/200x200/075883" />
</div>
</div>
CSS
.inline-container {
font-size: 0;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder:hover:after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
background: url("http://placeskull.com/200/200") no-repeat;
}
You could easily swap the images to be background images on the new div, too, if you wanted to shorten up your HTML.
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.