I want to know if there is a way in PHP which I could place transparent images on top of each other. The concept goes like this:
The user gets presented images, which are:
Background Image, To be placed on the bottom
Main Character, To Be Placed Directly Behind The Text Stripe
Frame to be placed around the logo
Text to be placed on a black stripe, on top of everything.
The user can select the images he wants to use, just like the preview below.
I don't have a single idea on how to do this since I am still new to PHP.
I have a little preview of what I want: https://sanderc.net/avatar/create.php
edit: Changed the preview link.
If you want to do something like in the demo. then you need css as well.
some links given below. hope it will be of some help to you.
https://www.google.com/search?ei=zSv-XICHJ_WZmgfl_5CQCQ&q=image+on+top+of+another+image+css&oq=image+on+top+of+another+&gs_l=psy-ab.3.1.0l2j0i22i30l8.227906.227906..230842...0.0..0.170.170.0j1......0....1..gws-wiz.......0i71.X4ZIg9BRrzg#kpvalbx=1
http://www.corelangs.com/css/box/ontop.html
http://jsfiddle.net/danield770/nFvUu/3/
http://www.corelangs.com/css/box/ontop.html
Related
hi i have a wordpress at lesprenoms.quebec it's listing the name of people with a short description.
if you take a look at this post:
http://lesprenoms.quebec/qeZN30e9
it's a simple div with image as background with text on top and an other image at the bottom what i want is that wordpress generate all the thumbnail i want and also the one for facebook witch is 750*394px crop top when i hit publish or like save the draft and else and that it get update if i change the text on top of the image.
some will tell me to do this trough photoshop and else witch i already did for the 170 other image but i think i can made template, then just upload the image and just add my text that all trough the website without having to fire photoshop witch can be really usefull as if i'm on other computer and else...
so i know there a way to do this in php with maybe imagefttext or something like that. All the thing is wrap in a div so maybe a function that get all the text + image between the first and the last could be really nice and neat.
so if someone can help cause i really need your help guy...
I'm new to jQuery, so i thought to ask here.
I'm looking for a script which generates a div, where users can select images from a list which will add the image to the div and makes them draggable. So users are able to "design" their own simple card.
Anyone knows how to name this? Or do you have a script like this?
take a look to this link
it´s a start for you. in this link you have an example and you can check the source code of the javascript.
what you have to do is to change the code for your needs
I Googled a lot but no sufficient ans was found.
I need to place an image (900 X 5200 px) in one of my pages. As the image is sensitive, I need to prevent users from copying the image. I have an idea that can do this:
I will divide the image into pieces. Then the image grid will be loaded into some divs. So user won't be able to save the image. Or he/she will save only 1 square cm part of the whole image.
But this plan will not work if some small parts of the grid fails to load. So, I want to do another thing. I want to load the full image then cut the image into parts. Then show the parts altogether in divs.
This requires javascript. But I am confused how to start and need your help.
Now you know the matter, if you have better idea please share.
Thanks in advance.
The trick is simple. Create a div with the background being the image you want to display. Layer a div with a transparent image over it. When user goes to save the image, they get a blank. Program your server to not return "direct" requests for the image (so some clever chap can't just look at the css and retrieve the URL to the image).
Granted the image will still be in their cache but so would the sliced image so it won't make it impossible just more difficult for a determined person to retrieve the picture.
TL;DR Don't over engineer a solution, print screen will get around anything you do.
You are not going to be able to prevent people from copying this image. Plain and simple. Regardless of your best efforts, a simple PRT SCRN and paste into Paint will be enough.
Your best bet will be to not over engineer this and simply place a watermark and copyright notice on the page. Other options can include placing a transparent <div> over the top of the image so it cannot be right-click'ed and saved, but it still will not prevent the image from being stored in the user's cache. Or stop them from using developer tools or Firebug to find the source image.
You can do this with:
http://www.pixastic.com/lib/docs/actions/crop/
Yet you need to develop your logic around that library.
I have made example, you can see it on this link:
http://simplestudio.rs/yard/crop_img/
Basically you can get URL to your image via php and using my code or code similar to it crop your image into pieces and display them on canvas.
This way image is not accessible via browser or inspect element or what so ever. User can save the pieces individually but you can configure my code for piece to be 5px, I set it to 20x20px.
* test saving image piece by doing right click anywhere on image and do a "Save image as.." option.
Also you need to think of way how to hide src to image provided by php, if you need help on that I can help you.
Thanks for taking the time to read my post.
I am looking for some options/suggestions/general comments on how I might be able to query a database of images based on mouse location.
Essentially, I have a database (on a seperate companies server) that contains a few images, what I would like to do is return an image to my website depending on where my mouse is based in the browser.
so if I click top left, i'll get a zoomed in picture of the top left of the landscape (a seperate image), if I click bottom right, I will get a zoomed in picture of the bottom right (again, seperate image).
I am a newbie to HTML/PHP/CSS but not to C++/C/Delphi, I'm sure I can do this, but I can't see the wood from the trees as to what I actually have to do!
I am using my own server (hosted by 1&1) and a Drupal webpage.
If anyone could help that would be great!
Many thanks for your time,
Kay
HTML map and use javascript (probably jQuery) to bind to each <area> and do something (in your case, popup/zoom a separate image)
Frankly I am not sure where this would go but I assume the way to create what I'm about to describe is PHP... so I'm sorry if it's in the wrong section.
Basically I have a website, using Wordpress, where users can review websites and post a 5 star rating of the site. Each reviewed website has it's own dedicated page.
So what I want to do is create an image from the statistics of the ratings to allow the website owners to place it on their page. The image will need to, when clicked, go to that it's review page.
So the image would be about 150x150. Have the overall 5 Star Rating, the Name of the Reviewed site and the name of my website. It would also be cool if there was some automatically generated HTML embedding code so the site owners can simply copy and paste it.
I hope I explained myself ok. I've tried searching google but I'm not entirely sure what to search for and therefore have found nothing useful.
Thanks.
EDIT
I can create the embed code manually. I just need to really know about how to make the picture update automatically.
Hey what you are asking for is quite complex and it would be to easy to just give you code. So here is some reading for you. Your problem is quite meaty and no doubt you'll learn loads sorting it out....
http://www.phptutorial.info/learn/create_images/
http://www.qualitycodes.com/tutorial.php?articleid=20&title=How-to-create-bar-graph-in-PHP-with-dynamic-scaling
I just need to really know about how
to make the picture update
automatically.
Just put URL to your php-script, which will generate image.
You will need function imagettftext to write text over the image, imagecopy to draw the stars (of votes).
Also, you will need image of a star and background.
So, approx. algorithm will be:
1. Open the background image by imagecreatefrompng - it will be our generated image
2. Open the Star image
3. Write title of the reviewed site by imagetttftext
4. Draw stars by copying existing Star image to our background image (by imagecopy)
5. Print generated image by imagepng