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.
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
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)
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 just need a bit of advice on what direction to go with something I am creating.
It is a simple php based webpage for our sports and social members in our office, allowing them to create, edit, view and delete events for all members to see. Events like day trips, bbq's and all kinds of things like that.
So far I have it all working as I would like, other than one thing, being the event logos.
At present, the events are all stored in a mysql database, in one table, with a column for every aspect of the event; time, date, price, venue etc etc.
I also have two columns for the event logos, one for the venue logo, and one for the general event logo.
What I need advice on, is the best way to create a page that allows a user to upload an image to the server, browse the images already uploaded, select one, and have it's file path entered into a text input when creating the event.
Could someone offer their suggestions on the best way to go about this, or offer an alternative method for selecting and inputting a logo for the event?
Thanks
The Uploadify jQuery plugin works really well for batch and/or AJAX uploads. The way I'd handle your situation would be this:
Show all images on the same page with the form, and give each image a related radio button with the image path as the button's value, so the user simply checks the image they want to use,
If the user wants to upload images, use the Uploadify plugin and it's AJAX callback functions to dynamically populate the existing list of radio buttons.
The comment I made on your question, asking wether you store images (or their file paths) was because I think it would be much easier (and cleaner) for you to retrieve a list of uploaded images by querying a database. Personally, I don't store images in a database, only their file paths, and use PHP to handle any images that need to be deleted or moved. It's easier to assing images to other entities (especially in many-to-many relationships) that way.
If you don't want to store images' data in a separate table, I guess you'd have to use PHP file system functions to get a list of files already uploaded (glob comes to mind, although there could be better functions or this).
EDIT:
There is also a very good AJAX file browser plugin - ckFinder, but I have very little experience with it and can't really comment on its workflow, but if you find it to be a more elegant solution, you should try it out.
if i could understand your question you want to associate the image with the event i.e tag the image with the event right ??
you can use jquery's attr() function to grab the src of img and put it in input field
I ended up storing the images in the database itself.
Saved some hassle on the file path side of things.
I have mini forum site im coding and when users make their profile they get to add a little info about themselves. I want them to be able to make list elements and add images into this description, as well as make /n (drop a line). How can I do this from a simple input text area? is there any jQuery text area plugins someone can recommend.
As it stands I have the users start any list elements (bullet points) with * and then just septate out the lines and stick them in list elements, for images I make them upload the image, they get a ref number and put that in the box between two sets of ++.
This is not very user friendly, anyone have any suggestions or plug-ins i could use to better this?
Sounds like you need a HTML editor such as TinyMCE. This will change a textarea into a HTML editor, which will give your users the ability to format the content with lists and images etc etc.
have a look at the following plugins available for your need. CL Editor, [CK Editor] (http://ckeditor.com/), TinyMCE.