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)
Related
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
I want to build an application in which an image is presented. When one click area in the image then it can result with different outcomes, depends on the area in which he/she clicked. The outcome is always replacement of the image with another one-sometimes similar image with only small area if it different from the original picture.
My question is whether this can be done when the images are stored on external server so it would be smooth enough and wouldn't feel like the computer have to download the other picture (meaning that it would feel more like in game when action lead to immediate outcome).
You could preload all images before starting your game.
Check this jquery solution for instance http://www.farinspace.com/jquery-image-preload-plugin/
This way you will get a smooth result on user interaction
I know that the question I have is quite complex, and I really hope someone can help me. I have created an image gallery qih jquery and php. Firstly I am grabbing all the image names from a MySql database, then taking them from the server folder and resizing them with php. It creates the thumbnails, then I created a pop up window with jquery which shows the image in large. After that I place a previous and next button and told jquery to grab the array of image results from php and echo them into the jquery using json. Then it goes through the array to create the next and previous effect. I then centered each individual image when the next and previous button were clicked. When you load the first and second picture it is not centered and it goes to the right. I CAN NOT figure out why this is happening. I really need some help here. There is too much code to post here so I am giving you the website and you can see pretty much everything in the source code. Remember that I am using php so if you are wondering how it is iterating through the pictures that why. Thanks if anyone can help me at all.
http://www.oceanphotostudio.com/test/collection/before-and-after.php
The reason it's getting offset is that the margins that center the popup div are being calculated before the image is loaded. Notice that on the first click, it will have margins of -37px and -30px. After one image is loaded, calling another one will use the width and height of the last image that was loaded in, which is why you can get unpredictable results.
Take a look at JQuery's load event handler for information on how to create a callback to resize after the image has been set to load, rather than before.
Your description totally overcomplicates the issue. Browser could care less how you generate the array or html on server, or what language it is
Your position problem is a simple css issue. You've set the top and left of your popup to 50%. This means top left corner of popup will start at dead center of page, and go right and down from there.
Use a browser console to inspect the html elements and the css rules that apply to them and adjust accordingly. WIthin the console you can make live edits to see impact of the adjustments in real time
I need to achive something like this:
As you can see, we have a base picture of a motherboard, and then 2 specifics areas of this pictures highlighted. On the left we have a component image, and the user has to choose one of the hilighted areas.
I checked jQuery JCrop, Mootools Moocrop... but neither one seems to be valid. What I want is to set a base big picture and select 2 or more areas there. I will store the coordenates on the database.
After that, I'll load the picture with the areas and ask the user to choose one area, like in the picture.
Does anyone have any clue how can I achive that?
Ignoring the actual mechanics of the highlighting of the areas, if you want to make those areas clickable or otherwise JS-actionable, you can use an old-school HTML image map.
I think this http://www.sanisoft.com/blog/2009/01/23/img-notes-v02-a-couple-of-bug-fixes-and-some-more/ may help you with some changes in the JS.
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