Help - Search - Members - Calendar
Full Version: imput from text field over image
HTMLHelp Forums > Web Authoring > General Web Design
denco10
May 13 2009, 07:58 PM
I'm trying to make an image where when someone enters text into the text field it automatically types it out onto an image
I,m sure i can do this using echo and the field id but that would require the user refreshing to see the output there has got to
be some way to do this statically.....any ideas?
Brian Chandler
May 13 2009, 09:45 PM
I think you mean "dynamically"... yes, use javascript, with a event handler on the input field that copies the content of the input field to the element that appears with the image as background.

HTH
denco10
May 13 2009, 11:33 PM
i know it seems really lazy but ...... wanna point me to a java script lol
Brian Chandler
May 14 2009, 12:08 AM
I couldn't "point" you to a javascript sample; I would just write it myself, but it means looking up the bits somewhere. There will not be a "script" that you just throw into the soup and it works.

denco10
May 15 2009, 12:11 AM
Ugh as much as I hate java I did it lol here is how in case it ever comes up again
CODE
<script type="text/javascript" src="scripts/textover.js"></script>

CODE
<td><input type="hidden" name="on2" value="Your Name" />
    Your Name
      <textarea name="os2" class="createinput" onfocus="if(this.value=='Type your name and hit tab to
preview')this.value='';" onblur="if(this.value=='')this.value='Type your name and hit tab to preview';"
onchange="CamsTagPre()" rows="1">Type your name and hit tab to preview</textarea></td>

CODE
<th scope="col" id="bgimgrt" height="105"><div id="previewtag" align="left" style="font-size: 50px;
font-weight: normal; font-family: arial; color: rgb(255, 255, 255);"><nobr>Your Name</nobr></div>
</th>

Message me if anyone needs textover.js
Darin McGrew
May 15 2009, 03:01 PM
For the record, that is JavaScript, not Java. They are not the same thing at all. And
CODE
<script type="text/javascript" src="scripts/textover.js"></script>
is not very useful without the content of the textover.js file.
denco10
May 15 2009, 03:40 PM
textover.js
CODE
function CamsTagPre( )    {
    var locstr = self.location.toString();
    var taged = document.getElementById('previewtag');
    var form = document.forms["mygallery"];
    
    if ( taged && form ) {    
        var replace1 = form.os2.value.replace(/\n/g,'<br>');
        var replace2 = replace1.replace(/ /g,' ');
        taged.innerHTML   = '<nobr>'+replace2+'</nobr>';        
        if ( form.os2.value.match(/\n/) ) {
        }
                if ( myfont == 'verdanab' ) {    
            taged.style.fontWeight = 'bold';
            myfont = 'verdana';
        } else if ( myfont.match(/bd$/) ) {
            taged.style.fontWeight = 'bold';
            myfont = myfont.substr(0, myfont.length - 1);
        }
        else {
            taged.style.fontWeight = 'normal';
        }
        taged.style.fontFamily = myfont;        
    }
    return false;
}

and if you change the
CODE
onchange="CamsTagPre()"
to
CODE
onkeyup="CamsTagPre()"
it changes as you type and you can lose
CODE
onblur="if(this.value=='')this.value='Type your name and hit tab to preview';"
and
CODE
onfocus="if(this.value=='Type your name and hit tab to preview')this.value='';"
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.