Here is the image :
Now i want to convert a part of it as a textbox and the "Mag Lens" as a clickble button.
But the buggest problem is that both are on the same image but they have different functions..
Can anyone code this for me ? I have no idea to chat.
Thanks
I'm not familiar with php, but what you will want to do is:
break that image into a background for the textbox and the mag icon in two different images.
create a container (I'd use a div) that uses css to make the background the textbox image you have
then inside the div, put the input and use css to hide the borders of the input box.
then, directly after you place the input, place the mag image inside an href or something similar in php (in .net we'd use an imagebutton control).
That's not a PHP problem. You could use the image as background for the text field and submit button. You don't even have to split the image. Google for "CSS sprite".
Related
I'm building a WordPress theme and the site has a background image applied to the body of the document using CSS.
I want to allow the client/admin to be able, through the use of theme options, to upload and change this image. So I was wondering what the best approach would be to dynamically changing the background image either using PHP, JavaScript or jQuery to pull through the image? Thanks guys.
You can use the dropdown box for select a color and do the ajax call on change event of dropddown box like this using jquery
$(document).ready(function(){
$("#colorchange").change(function(){
$("body").css('background',$(this).val()) ;
});
});
I got a page here http://183.78.169.53/tyre2/page2.html. For now is static but I will be reading from the database and form something like this dynamically. The problem as I read position ID from the db and would like to place on each of the tyres? Any idea how to achieve it?
There are a fews ways to put labels on images in web applications.
Make an HTML element like a div or span, whose css background property is an image. You will have
to change the css dynmaically if the image is read from a database.
Generate a new image by compositing the text and background image server-side (but that is sooooo 1990s!)
Generate the whole display using <canvas>
Given what you have already, I would go with option 1.
You can put another image with the number on top of the tires. Alternatively, if all the images are the same, you can set the image as a background for the div/li/aand print the number as plain text.
If every picture is different, you can assign every div (or whatever it is) an I'd, and echo custom CSS that sets a different background image for each div.
I want to create a programme that can
take text input from user and adjust anywhere in specific div
change font, fontcolor and size as per user selection
upload image as background
save whole customization and send as email
with help of PHP/JavaScript
Can anyone suggest how to do this.
Main issue is create image from user customization.
An existing programme to do this is also acceptable
I am programmer and working on php javascript magento
EDIT
Reading your description, it doesn't sound like you really need a screencapture-like version of the content the user created, you just need an HTML embedded editor and a way for someone to upload an image as the background with a way to preview the result. You can send emails with backgrounds using CSS.
(Not sure what you mean, but I presume you can figure this one out)
Use TinyMCE for an editor: http://tinymce.moxiecode.com/
Use jQuery AJAX file upload plugins (maybe http://www.uploadify.com/)
Submit the form (with the selected settings and edited html) to server and process as email
Try here for how to add an image to the background of an email:
http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/
I'd like to change certain color in an image on a webpage based on user selected color, it this possible using php or javascript.
if it not possible or will be difficult, how do i do it using flash?
please help me with sample code or website.
thanks
You could set parts of the image as transparent and save it in a format that supports transparency. Then put the image inside a div and set the background-color CSS property of the div. This will only allow you to set one colour within the image, however.
How do I embed text in an image? The embedded text should be hyperlinked to an URL. The use case is like having an image with a link that says 'Click here' which opens a new page.
If you want to stay away from z-indexes and/or image maps, you could do it the old school way, which is to set the image as a background for a table or div, and then just put text inside the table or div.
You have to options to accomplish this:
Add your text to the image with your graphics program of choice. (Use ImageMagick for automated processing) Then create an image map to make parts of the image clickable. If you need some kind of "hot state", then you have to use small images which are absolutely positioned above the original image and show/hide them using Javascript. Depending on your needs it might be easier to make the whole image clickable.
Add a normal image and a normal hyperlink. You can use a regular img tag or use set the background image of the container. Then use absolute positioning to move the hyperlink to the desired position on top of the picture. With that solution you don't need Javascript to create a hover effect.
Using an image editor add the desired text to image itself and then use the image map to the area where text appears to required URL. For a sample please check my sample at http://shreedhar.kotekar.com/ImageMapSample.htm
If you are using asp.net this Embed text in Image using ASP.NET from developer's fusin shows a good example.
Edit- From your comments I see you're looking for php: Adding text to images with PHP
You could use this tool:
http://www.jsclasses.org/package/324-JavaScript-Embed-encoded-text-in-images-using-steganography.html
and here on github:
https://github.com/blauharley/LoremImageCryptonator
With help of this JS-Object you can embed any text you want. It offers two methods (getCryptoImage, getTextFromCryptoImage) that can be used for inserting and extracting any text into and out of an image.
For your use-case you can insert an URL and extract it as soon as the image is clicked.
But first of all you need to create a "Crypto-Image" that a URL has been inserted into before then saves the image. The saved "Crypto-Image" can then be shown on a page.
Hope this helps.