I have such html:
<div id="main_window">
<canvas id="canvas_hex_logic" width="200" height="100"></canvas>
<canvas id="canvas_ground" width="200" height="100"></canvas>
</div>
and css:
#canvas_hex_logic{
position: absolute;
top:31px;
left:201px;
z-index: 0;
}
#canvas_ground{
position: absolute;
top:31px;
left:201px;
z-index: 1;
}
in #canvas_hex_logic I'm rendering mask for my hexagons:
over it I'm placing ground layer:
part of JS code, for picking color under mouse:
..... mouse event handler above .....
var c_hex = document.getElementById("canvas_hex_logic");
var ctx_hex = c_hex.getContext("2d");
..... ..... ..... ..... ..... .....
var color = ctx_hex.getImageData(mouseX, mouseY, 1, 1).data;
This code working, if #canvas_hex_logic is on tom of other layers.
So, question is - how to pick color under mouse from #canvas_hex_logic layer when it is overlayed with another layer?
Thanks!
Thanks!
Acuallty, I've founded easiest way:
#canvas_ground {
left: 201px;
pointer-events: none; <<--------- this helps
position: absolute;
top: 31px;
z-index: 1;
}
Get the coordinates of your click in the canvas that's on top and find the color at the corresponding pixel in the canvas that's below.
Click events have data associated to them that contains the coordinates of the click.
See this. Or rather, see this for even greater detail!
Related
I'm trying to change an image on hover and back again.
The idea is that when I hover over an image, it fades into a different image and when my mouse leaves, the image fades back to the original.
Here is what I have tried so far, using jQuery:
<img src="https://www.shareicon.net/data/128x128/2015/08/17/86675_cat_256x256.png" />
<script>
$("img").hover(function(event) {
event.preventDefault();
console.log("hover");
$("img").fadeOut(400, function() {
$("img").attr("src", "http://files.softicons.com/download/animal-icons/meow-icon-set-by-iconka/png/128x128/cat_purr.png")
}).fadeIn(400, function() {
$("img").attr("src", "https://www.shareicon.net/data/128x128/2015/08/17/86675_cat_256x256.png")
});
});
</script>
You can actually do this with plain CSS and it would be more efficient.
Just create a div, put both images inside, absolute position so one is on top of another, and when hover apply opacity: 0 with a transition to the front image.
You can achieve this with position absolute, z-index, and hover pseudo selector.
.container{
width: 300px;
height: 300px;
position: relative;
}
img{
position: absolute;
top: 0;
left: 0;
}
.img-top{
z-index: 999999;
transition: 0.3s linear all;
}
.img-top:hover{
opacity: 0;
}
<div class="container">
<img class="img-bottom" src="https://www.cesarsway.com/sites/newcesarsway/files/d6/images/askthevet/checklist.jpg" alt="">
<img class="img-top" src="https://i.ebayimg.com/images/g/k2gAAOSwT5tWKhVS/s-l300.jpg" alt="">
</div>
I want three or more canvases overlay properly. I found similar topics (How to place two canvases on top of one another?), just can not do it for overlaying all 3 or 4 canvases together. After the 2nd canvas all other canvases renders below the second canvas.
What I want is a canvas for the base layer. A canvas for the color map and a canvas for the information, which i can click on the 3rd canvas and request the object
Code i'm using:
<style>
#wrapper{ position: relative; }
.canvas { position: absolute; top: 0; left: 0; }
</style>
<div id="wrapper">
<canvas class="canvas" id="canvast" style="z-index: -2;"></canvas>
<canvas class="canvas" id="canvast1" style="z-index: 1;"></canvas>
<canvas class="canvas" id="canvast2" style="z-index: -2;"> </canvas>
</div>
Note: fabric.js library canvas code to fill the canvases
canvas = new fabric.Canvas("canvast"); //(canvast1 etc.)
canvas.renderOnAddRemove = false; // faster loading of canvas
canvas.add(RectangleObject); //adding object
canvas.renderAll(); //rendering canvas
I don't know fabric.js, so I don't know how helpful my answer can be.
I made this jsfiddle : https://jsfiddle.net/xn78jzg3/4/
You can see layering three is not a Problem, even with most of your code (only thing I changed was the z-index on canvast2 from -2 to 2 and adding some Styling:
.canvas {
position: absolute;
top: 0;
left: 0;
border: #333 solid 2px;
width: 200px;
height: 200px;
}
).
So whatever goes wrong with the rendering of your 3rd Canvas, the error might come from fabric.js.
I am using this code http://cssdeck.com/labs/pa0yqlki that displays a canvas covering the size of the browser's window.
I am able to display content on top of the canvas (by using absolute positioning and z-index: -1)
What I am not able to do is add content AFTER the canvas.
Once the canvas ends, and so does the window, I want to have an <h1> lets say. So a scroll bar should appear when the page is loaded I should be able to scroll a bit more so that I see the <h1>.
Any ideas?
Okay, thanks to markE's reply I was able to achieve what I wanted.
[...] <canvas> </canvas>
<h1 id="myText"> Text </h1> [...]
this is the part of my HTML. The "myText" will be displayed under the canvas based on the size of the window.
To achieve that I added the following code in the CSS.
#myText
{
padding-top: 100vh;
}
You can achieve this with playing with CSS positions;
Try something like this:
<div>
<canvas width="300" height="200" class="custom-canvas" />
<div class="text">
<div class="main">20 %</div>
<div class="head">Completed</div>
</div>
</div>
SCSS:
.custom-canvas{
position: relative;
clear: both;
width: 450px;
height: 200px;
}
.custom-canvas {
.text {
bottom: 13px;
position: absolute;
left: 6px;
right: 0;
text-align: center;
}
.head {
margin-top: 14px;
}
}
Play with left,right,top and bottom to achieve the exact position.
I am trying to convert this image map of type circle into a div with a specific top and left coordinates and the appropriate size based on these coordinates (300,115,10)
<img src="http://localhost//images/baby.png" alt="Planets" usemap="#MyMap">
<map name="MyMap">
<area alt="Venus" href="venus.htm" coords="300,115,10" shape="circle">
</map>
Now is it possible to extract the top, left , width and height from these coordinates and construct a div with a circular shape which is similar to the image map? Any javascript/css code will be helpful.
Check This Out: >>Fiddle<<
It creates creates "a"'s for all circle areas in all mapped images in the
document.
The created a's still have the same link as their area
counterpart.
The alt attribute of area is added as css class to the a's so you can style them with css
Steps:
Create a new container div with same size and position with the mapped image.
var $img = $(img);
var $imgmap = $("<div class='imgmap'></div>");
$img.after($imgmap);
var imgheight = $img.height();
var imgwidth = $img.width();
var imgPosition = $img.position();
$imgmap.css(
{
top:imgPosition.top+"px",
left:imgPosition.left+"px",
height:imgheight+"px",
width:imgwidth+"px"
});
Find the image's map name and circles inside that map
var mapName = $img.attr("usemap").replace("#","");
var circles = $("map[name='"+mapName+"'] area[shape='circle']");
Iterate over all circles
circles.each(function(index,circle){
var $circle = $(circle);
var attrs = $circle.attr("coords").split(",");//get coords attribute and turn it in to an arrat
var alt = $circle.attr("alt"); // get alt of the area
var $newa = $("<a class='mapcircle "+alt+"' href='"+$circle.attr("href")+"' alt='"+alt+"'></a>"); //create a new anchor
$imgmap.append($newa); //append that to previously created container
//apply position and size
var size = (attrs[2]*2)+'px'
$newa.css(
{
left:attrs[0]+'px',
top:attrs[1]+'px',
width:size,
height:size
});
});
CSS:
Container css, absolutely positioned, so we can use jquery's positon() function and use that values. Note: If your image moves, like in a way it chages values returned from position(), you have to reposition the div. Solution to that may be, relative positioning or wrapping everyting including the image in another container and replace image with that.
.imgmap{
position:absolute;
z-index:10;
box-sizing:border-box;
margin:0;
padding:0;
}
Planets! Pretty straight forward but: Default color is green, 50 percent radius makes them round, new classes(given by alt attribute of areas) are used for individual coloring.
a.mapcircle{
display:block;
position:absolute;
background-color:green;
border-radius:50%;
}
.mapcircle.Venus{
background-color:yellow;
}
.mapcircle.Earth{
background-color:red;
opacity:0.5;
}
Try this on for size...
DEMO: http://jsfiddle.net/mTM4q/2/
HTML
<div>
<img src="http://placekitten.com/500/400" />
<a class="planet venus" href="#venus"></a>
<a class="planet jupiter" href="#jupiter"></a>
</div>
CSS
div {
position: relative;
}
div > * {
position: absolute;
}
.planet {
border-radius: 50%;
}
.venus {
width: 100px;
height: 100px;
left: 300px;
top: 115px;
background-color: red;
}
.jupiter {
width: 250px;
height: 250px;
top: 100px;
left: 50px;
background-color: blue;
}
What I've done is put the co-ordinates in to the CSS for each .planet. This corresponds with the top and left CSS values.
Hi guys we have a google map v3 which loads in markers when dragged via ajax - I'm all ok with that - I'm just wondering how to add a loading bar on my map - I'm already using
container.style.filter = "alpha(opacity=60);";
container.style.opacity = 0.6;
and something else to stop dragging.
What's the best way to do that - if poss I would like to use some html and not an image.
Thanks
Richard
I got the same problem and solved it by adding a layer over the map (In my case, I just need the loading, and I don't have any other reason to add another plugin):
HTML:
<div id="holder" style="position: relative;">
<div class="overlay standard hidden"> </div>
<div id="map"></div>
</div>
CSS:
div#holder {
position: relative;
}
.hidden {
display: none;
}
div.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0.7;
z-index: 1;
}
div.overlay.standard { background: #fff url(/image/loading.gif) no-repeat 50% 50%; }
If you just want something that will place a rectangle containing text on the map, essentially a label, you may want to consider an: InfoBox
If you want something that dynamically displays progress, you may want to use the: ProgressBarControl