I am developing a web site. For this I want to place an image over another image. I will explain.
Start a td which have width: 1101px. Here I placed an image with img tag (logo of my web site). Width of image is 1101px on the left topside of the image (over the image) I want to place another image. It's not possible to place the logo image as background, because it must have alt tag. I know the div method with absolute position. But it's not a good solution. While changing the resolution it’s (top image) alignment is not constant.
Use this to do it...
<td>
<div style="position:relative;">
<img style="position:absolute;top:0px;left:0px;" />
</div>
</td>
The resolution won't mess this up.. The image is absolute, only relative to the div..
it should work, without any problems :)
is what you currently have similar to this?
Related
Im wondering if it is possible to overlap 2 images using CakePHP. What Im trying to do here is make default image (a pin drop in googlemap) with a head and an anchor. If the user uploads an images, it will put the uploaded image in the head of the pin drop. Any help is appreciated.
What Ive done so far is display the uploaded image in the google map but it replaces the whole pin drop.
It needs a solution using simply CSS z-index property. PHP has nothing to do with the style you want to apply.
Use the following syntax-
<img src="img1.jpg" style="z-index:1; position:absolute;" width=200 height=200>
<img src="img2.jpg" style="z-index:2; position:absolute;" width=100 height=100>
Here img2.jpg will appear above img1.jpg. The higher the z-index value the more outer the element will appear.
I am trying to compile a pinterest style layout for my site. And have accomplished it, other then the load times. I have set about to get the load of my site as fast as possible.
To do so, I have come across the lazy load script (as can be found here: http://www.appelsiini.net/projects/lazyload) which essentially loads the site first, and then the images, thus speeding up the usability of the site on load, similar to what pinterest does..
The issue I have been having is, while the script works, because we have a box around each image to style and present it, and undefined sizes on the images, the layout comes out all messed up every time. Essentially, the image sizes are always surprising the layout once they load.
What is the best way about going about fixing this problem? What does pinterest do? Similar to them, we have images of all shapes and sizes, that will be added dynamically to our site by users via both php and javascript, so simply figuring out all the sizes of each image ourselves is not something we can do.
Thanks for your help!
Pinterest most likely has measured the images and stored the image dimensions in there database. Then simply output the height within the img tag, width is not dynamic as its set by CSS
First a set rule in css controls the width of the image (this wont change):
.pin .ImgLink img
{
max-width: 192px;
opacity: 1;
}
.PinImageImg
{
min-height:75px;
background-color:#f2f0f0
}
and then the HTML markup of each img tag controls the height (this changes for each image):
<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />
This way there is no popping of layout as each image is loaded by javascript.
There is on internet. Such script that, "jumps" before an another image.
So... for example, if I found an image, and I click on "Save as..." I get a 1x1 pixel image in place of the one I wanted to safe.
For example of it is
http://www.youtube.com/watch?v=9bZkp7q19f0
Next to views counter (1'167'974'545) there is an animation. But if I try to copy link or save it, it "push" into my hands useless picture. This script could be very useful on my website. How to do it?
As far as I can see from the code of the youtube page they use the following lines as the html elemnt for that image:
<img class="watch-dancing-psy" src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif">
So normally the image referred to in the src attribute is the 1x1 pixel image.
They use CSS to put the real image like this (when defining the CSS class watch-dancing-psy):
background-image: url(https://s.ytimg.com/yts/img/logo_dancing_psy-vflsJl9hC.gif);
In case of your example URL img src is a 1x1px transparent gif and the "actual" image and its dimensions are defined in CSS as background, width and height properties.
I have this code :
<div class="images_liste_plante_solo">
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame_miniature.jpg"/>
</div>
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame-2_miniature.jpg"/>
</div>
<div class="image_liste_plante">
<img alt="Hosta - Eternal Flame" src="images/eternal_flame-3_miniature.jpg"/>
</div>
</div>
I will have a variable number of pictures like this, because the number of pictures depends of my PHP database. I can also echo out the directory of the fullscreen size picture and can choose what is the max size (if they are enough big to reach it) of all pictures.
So, I will need that when we click on the picture, that it enlarge it with a fullscreen gallery over the page that darken what is behind, a bit like when we want to enlarge pictures in facebook. It will only use the images with a class of "image_list_plante" and it will use my echoed link to the fullscreen image for each images (maybe this link could be echoed in an invisible div). Also, I will echo (in the invisible div) a boolean which decide if you can right click on the picture or not. I will even echo text that will be placed under or over the picture. The invisible div will be inside each "image_liste_plante" divs and after or before the picture. I can put classes to these invisibles divs if needed, etc...
How do I do that ? hard question. I know nothing about JavaScript and jQuery and others... The only things I know, it's HTML/CSS/PHP/PDO.
Do a plugin that I can modify and adapt is already built ? for the moment, I will only put a link to a .jpg file on the pictures.... but it can't stay like this too long.
*Will need to work in IE7 and other browsers too.
Finally, i used a plugin called "colorbox". It opens an iframe over the page according to it's link. The page in the iframe know which plant's images to show by using the $_GET vars from the generated link. In this iframe, i needed to code a secure database connection defined by the $_GET elements. it counts the nuber of pictures, paginate them and everything. Thanks to myself !
I'm trying to protect images with a watermark, but I don't want to display the images on the website with the watermark. I created a php script that dynamically watermarks an image on the fly, but here's what I'd like to do with it:
I'd like for whenever someone right clicks and presses "save as" an image displayed on my website for it link to a different image that is watermarked. Is that possible? Should I go about this another way?
Any response in the right direction is greatly appreciated.
Here's an example: http://fatpita.net/?i=14453
When you save this image, the saved image is watermarked, but the website's image is not... I think they actually just mask the watermark on the website though.
Thanks!
What you are trying to achieve is not possible in a safe way.
If the browser gets the unwatermarked file the user can save that file - maybe not using "save image as" but e.g. through Firefox's "page info dialog which contains a full media list.
You can't do anything that the user can't fake. The site you mentioned doesn't either - the watermark is always there.
Look at the actual source:
<div style="position:relative;width:768px;margin:9px auto 0;">
<a href="http://fatpita.net/?i=4011" id="image">
click on the image for another random funny picture<br>
<img src="images/image (14453).jpg?4011">
</a>
<div id="jpgCover">
</div>
</div>
They are actually covering over the watermark in HTML. It is still there, but there is a div in the way making sure you can't see it.
Remember the user can always remove this watermark by an easy crop.