what i have is this:
<style>
#main{position:relative; width:600px; height: 600px;}
#cover{position:absolute}
#image{position:absolute}
</style>
<div id="main">
<div id="cover"><img src="template.png" /></div>
<div id="image"><img src="user.jpg" /></div>
</div>
what i need is to be able to move the user image around, but it will be covered with the cover div that will mask my other one. is there a way for that?
in addition i need to know if it is possible to have the div#cover only with the png file in it but where the size of the image is not as big as the id#main so the rest of the cover div will be background color white - without getting a white color in the image area?
update:
i want to have a layer (div#cover) that will cover another layer(div#image). in the first one i will have a circle that the inner of it is transparent and the outer is white so i will be able to see the bottom layer img within the cover layer
i will have jquery dragable to the second layer but it wont work becuase of the top layer that will block it from being draged with the mouse
my question was - is it possible to have the bottom layer to be draged when there is a cover layer on top of it?
If you want to cover a div with another div, use z-index property:
#cover{position:absolute;z-index:101;}
#image{position:absolute;z-index:100;}
I can't answer to your second question, because I don't understand it. Can you explain it more precisely?
Edit: after your edit I understand what you mean: you want to move an image that is under some kind of cropping frame. I think it's more complicated than using 2 divs and CSS...
Very difficult to answer a question one can't understand.
How to make a image/container draggable : http://jsfiddle.net/cNtfM/
Using jQuery/jQuery-UI is the easiest way in my eyes.
Your CoverImage will be above the other image coz you are writing it to the page before the main image. [renders from top to bottom]
I have know idea if this answers your question.
Related
I have checked other posts but none mentioned about a precise location to overlay.
Consider that I have an image, for eg. a traffic light. I need to overlay (not sure if this is the correct term or not) a div on top of the precise location of, the green lamp, for example. This is so that I can animate the div via jQuery to change the colour of the div in order to have an effect that the image is being animated.
The problem now is how to be precise in this, so that the location of the div completely matches that part of the image? Does it mean having to measure the pixels before setting the top and left of the divs? Or is there a smarter way?
I have considered other options such as using canvas (or svg, or silverlight) to redraw the whole thing instead of embedding the image (i.e. redraw a whole new traffic light picture). However, for this I believe it will be way more complicated than what I asked. Correct me if I am wrong here.
Please advise.
One way is to put the image inside a div which is either positioned relative if you want it to be inline with other elements or positioned absolute if you want to set its position on the page. Then position absolutely the overlapping div inside the same div as the image.
for example
Styles
#holder {
position:relative;
}
#over {
position:absolute;
width:40px;
height:40px;
left:20px;
top:30px;
}
Body
<div id='holder'>
<img src='IMAGE SOURCE'>
<div id='over'></div>
</div>
You will need to adjust the width, height, left and top of the div with id='over' as necessary.
You could replace the div with id='over' with an image use position absolute on this image and set left and top as needed.
I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float
I don't understand why the background color is not being applied as expected here. This might be a lack of understanding on my part as to the relationships between elements in CSS?
The page in question: http://www.preview.imageworkshop.com/portfolio/
Replicating the issue
First, open the above link in IE 7 or IE 8
Click the PRODUCT filter, then press the PROMO & EDITORIAL filter
White dots will have appeared on some of the images (this is a bug in IE which causes some pixels to be left transparent after a fade animation. if you don't see them, do a little more filtering, they turn up fairly quickly.
CSS BACKGROUND COLOR PROBLEM
What works:
If I set the background color for the gallery background to be red, then this red color shows throught the transparent spots on the images. (The inference here, is that a background color of black hides the 'white spots' bug).
#isotopegallery{background:red;}
What doesn't work:
Obviously, I don't want to set the gallery background color to be anything but white.
What I want to do is set the background color of the DIV that contains the images, for example:
.photo{background:red;}
however, when i do this, the red background color does not show up through the transparent pixels??
The simplified overview of the structure of the elements is as follows
<div id="isotopegallery" class="photos">
<div id="ngg-gallery-18-71">
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
</div>
</div>
HELP!
I can't figure out why this background color works for the #isotopegallery parent DIV, but not for the .photo DIV?
When i look in firebug, the color property is set for the .photo div, but does not show through the transparent pixels?
This is the last issue that his holding up go live for our website, and it is driving me nuts!
I would really appreciate any help that you can provide to help me resolve this issue.
NOTE: there is info around that suggests that changing the blackpoint of the images in photoshop will fix this problem. We have tried this method, and have found it does not work.
Are you floating the interior elements of .photo without clearing them? That would prevent the background color from covering the height of the element in question.
If that's the case, appending something like <br style='clear: both;' /> to the .photo div should do the trick.
Likewise, you could always try applying the background color to the img elements themselves: .photo img { background-color: red;}
The creator of isotope has been helping me look at this issue, and has added the following comment:
"Did some more testing. I've come to the conclusion IE treats the
entire element, which contains the image, as one 'image'. Whatever is
visible gets flattened. If that element has a true-black pixel within
an image, than that pixel of the element will be treated as
transparent, regardless of what's actually behind the image.
Take a look at: http://support.metafizzy.co/2011/09-06-ie-trans.html
You'll see a couple transparent pixels pop up, even though the
background of each item is clearly red (items have padding, background
is red). I then dynamically changed their color to blue and the pixel
is still transparent.
Which means the only pure-CSS solution is to set the container
background to black"
Not sure where to go from here. We have tried moving the black point (as this is supposed to be caused by true black pixels), but have found this to be an unsucessful method.
I found a solution to this issue. I have posted full details against this thread (link below), which describes the issue in more detail.
IE fade causing white spots on images
I creating gallery, and I want to create frame around the picture.
But this picture must be scalable. Width and height of this frame generated by width and height of image.
And must to have possibility to change height of frame through the JavaScript.
Thanks.
PS: First of all, I must to have possibility to make frame narrow through the JavaScript.
If I was you I would make sure I can reuse (repeat) images, and then I will do it like that:
<div id="frame">
<div id="top-left"></div>
<div id="top"></div>
<div id="top-right"></div>
<div id="left"></div>
<div id="imageSpace"></div>
<div id="right"></div>
<div id="bottom-left"></div>
<div id="bottom"></div>
<div id="bottom-right"></div>
</div>
where: #top-left, #top-right, #bottom-left, #bottom-right are using corner images as backgrounds and have both width and height set.
And #top, #right, #bottom, #left are using repeated image for their backgrounds.
Check attached image where I put lines where you should cut original frame-image.
This method will allow you to change width of #top / #bottom and #left / #right to increase the size of your frame.
This can be quite tricky to pull off.
If you are using modern browsers that support CANVAS, check out this demo that does what you are looking for: CANVAS Demo
Otherwise you will need to create 8 images (4 corners, and 4 sides) where the sides are made in such a way as they can be tiled to adjust to whatever size you need.
The next trick is how you build the frame. You could by hand create DIVs/Tables around your pictures to create this affect but that would be very bulky and not very clean. Your best bet would be to use jQuery (or your favorite lib) to hook into all images on the page with a CSS class (e.g. "fancyFrame"), and wrap them as needed with HTML markup that makes use of the images you created above via CSS.
Narrowing the frame with Javascript is the easiest part, really.
Once you have your HTML/CSS set up so that it already scales you can just set the width with Javascript like this:
var photo = document.getElementById('photoFrame');
photo.width = '200px';
You can use A List Apart's Drop Shadow technique which uses CSS and PNGs to create automatically resizeable drop shadow for images. You can modify technique to create a resizeable frame.
You would need four divs and four images. The corners would need to be cut at 45 degree angles with transparency:
Image 1 - Top-left corner and top and left sides of the frame.
Image 2 - Top-right corner and right side of frame.
Image 3 - Bottom-left corner and bottom of frame
Image 4 - Bottom-right corner of frame
Funny, I had to do this exact thing when I worked at ImageKind.com. For reference, if you go to the frame shop there, such as this one, go to Step 4 (Add Mats) and click Adjust Width, there's a slider that does more or less what you're describing.
I originally had a couple of nested DIVs with big opposing L-shaped frame pieces as background images. A little Firebug inspection shows they've changed it to be a table. More efficient I'm sure, as the side pieces can tile.
When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.
If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.
It's the same image. It just enlarges it slightly.
Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.