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.
Related
I have a WYSIWYG editor, which is used to create articles. The articles are then inserted into a database. The article is then displayed on the main page. It consists of 2 major divs/parts. The top part is a div with fixed height and is used to display an image that is submitted by the WYSIWYG(that's the plan) for the specific article. So, user(with privilege) writes article, inserts/uploads an image(which is located on the server), article gets inserted into DB and the url of the image as well.
My question is how I should display it? Right now I'm thinking of pulling all the required fields from the database and placing the image url into the div and it will render as an image. This feels really clunky, so with my limited experience I wonder if there's a more elegant way to do it.
You're on the right track. Pull the image URL from the database, then pop it into an img tag within the div, OR apply it as a background on the div itself.
For sizing the image to fit in the div, specify either the height or width of the image. The other will automatically size, keeping the proper aspect ratio. This can cause problems with it fitting in the div of a fixed height, so you will want to set the CSS overflow property on the div to hidden, so that images do not overflow outside of it.
You mean storing the image path in a DB then echoing it in an tag?
There's nothing wrong with that... better than storing the image in the DB if that's what you were wondering?
Is it possible to display some php content within an HTML image (say display on the screen of an iPhone where iPhone being an image)
Well, if you just want to overlay text on an image, why create an image at all.
you can use css background image(iphone in this case) for a div and the insert your phpp content as a child of that div. Using proper css styling and positioning, you will get your desired look. Its simple and less server consuming than going the image creation way.
You could generate your own image on the server using the GD library to overlay your content onto the image and then send that to the client.
You can use CSS to achieve the same effect, without requiring any server processing; however, it must be an image, you might want to check out the image processing library that allows you to manipulate images using PHP http://php.net/manual/en/book.image.php.
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.
I have a div that shows some content (several images, text, floating elements, etc) and I would like to add the posibility for a user to do something like "Save this content as image".
How can i do that? I read all the php docs but there's nothing good to do this, even imagegrabwindow sucks because of its high load, browser limitations, and also no X/Y or width/height control.
So basically, I want to do this:
Get #div content, click on Save as Image, then the user gets a .JPG or .PNG of that div, as if it were a printscreen (screenshot).
I don't want to pre-generate the content using GD, and neither do I want to save as .PDF.
The only thing I can really think of is to serialize the contents/placement/attributes of the content in the div, send that to the server, and have the server recreate the same elements, same positioning, same attributes with GD.
Off the top of my head, I'd see maybe inspecting the div and creating basically a form post, something like:
POST['images'][0]['file']='plane.jpg'
POST['images'][0]['position']['x']=23
POST['images'][0]['position']['y']=13
...repeat for each image
POST['text'][0]['content']='this is a plane!'
POST['text'][0]['size']='10px'
POST['text'][0]['font']='Arial'
The server could use this data to recreate what the user created in their browser.
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.