I need information in a form to go on an image

Hello, I have a website that I sell street signs and I need to figure out a way someone can type what ever in a form blank and they push go and the next page shows a street sign image with that name on the sign. And possibly another form to enter ind DR, BLVD, AVE, DR, ST, CT etc and that would be in the upper right corner of the sign.

Any ideas on how I might get this done?

 

Which part are you are having troubles with?

For the image manipulation, use the GD library

 

I guess that would be all of it, I have no clue how to do it and was wondering on getting help for that on my homepage

 

I think you would need a script to add the text.

You could have a <span> or something with your sign as background image. The image would never change so you'd have to make sure it can fit enough text. The span would have an id or a class and the script would take the input from the customer and insert the input inside the span.

<p>Here is your sign:<span class="personaltext"></span></p>

In the CSS the span would have the background image of the sign (or the sign's borders)
span.personaltext {
color: #000; <---makes the span text black
background-image: url(streetname.gif);
width: 100%; <---makes sure the image is as large as the text in the span... may be tricky
height: 100%;
}

But you'd still need a script to add text to the span, and actually I don't know for sure that you can add text to an element like a span or if you need a special element that can recieve text.

 

https://www.mudpie4me.com/streetsigns/registration.php

Here is what I am trying to duplicate only once this guys signs are created the length of the sign on the next page actually changes and then he has to wright a note stating your will not hcnage length, so I wnat the image to stay the same and I so not wnat a short name like JAY to stretch all the way across the sign but I need a lon name like Golden Retriever to compact to fit.

Make sense?

 

You wouldnt need to limit the length of the string as you use 3 seperate elements - left hand end, centre where the text goes and right hand end. That way the middle where the text is will expand to the relevant size.

What are you intending to use this for? Do you want it as an image that people can save and use elsewhere or simply to show them what it will look like?

It would be fairly easy to code (using .Net) to do it with an image however GDI is fairly server intensive and if they arent to be used elsewhere I would use a modified version of Stomme's layer version

Not that I am bored today but a quick example (without the end bits being added) can be seen http://www.astarothsolutions.com/streetsign.aspx

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="System.Drawing.Text" %>
<script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

        '''' set variables
        Dim StreetName As String = Request.Form("streetname")
        Dim StreetEnding As String = Request.Form("streetending")
        Dim bgColour As String = "#666633"
        Dim LFontSize As Integer = 16
        Dim SFontSize As Integer = 10
        Dim LargeFont As New Font("Arial", LFontSize, FontStyle.Bold)
        Dim SmallFont As New Font("Arial", SFontSize, FontStyle.Bold)
        Dim SpaceSize As Integer = 10
        
        '''' find size of text
        Dim bmp As New Bitmap(1, 1)
        Dim graphic As Graphics = Graphics.FromImage(bmp)
        Dim StreetLength As Integer = graphic.MeasureString(StreetName, LargeFont).Width
        Dim Width As Integer = 10 + StreetLength + graphic.MeasureString(StreetEnding, SmallFont).Width + SpaceSize
        Dim Height As Integer = graphic.MeasureString(StreetName, LargeFont).Height + 10
        
        '''' make the image
        bmp = New Bitmap(Width, Height)
        graphic = Graphics.FromImage(bmp)
        graphic.Clear(ColorTranslator.FromHtml(bgColour))
        graphic.TextRenderingHint = TextRenderingHint.AntiAlias
        
        '''' add the streetname
        graphic.DrawString(StreetName, LargeFont, Brushes.White, 5, 5)
        
        '''' add the street ending
        graphic.DrawString(StreetEnding, SmallFont, Brushes.White, (5 + SpaceSize + StreetLength), 5)
        graphic.Flush()
        
        '''' output image
        Response.ContentType = "image/jpeg"
        bmp.Save(Response.OutputStream, ImageFormat.Jpeg)
        
        ''''clean up
        LargeFont.Dispose()
        SmallFont.Dispose()
        bmp.Dispose()
        graphic.Dispose()
    End Sub
</script>

Code (markup):

 

That is very much what I am looking for only with a few modifications.

I would like for the background to match my image and the size of sign to stay the same so the JAY would not street all the way across the sign and the world GOLDEN RETRIEVER would condense to fit.

I have attached sample files, as you can see I do not want a short word to stretch all the way across and just about any word 8 characters or longer will stretch to the same place a word with 25 characters.

Does this make sense?

So yeah that is what I am looking for. Do you offer this service?