Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts

    You can have fun with this. Text over image utility.

    This page lets you put text over an image. It's limited to fonts on your local machine, the image must fit your desktop, you can link to an image on your machine or a server, the page doesn't need to be on a server. You can put up to ten different lines of text, varying in color, size and face. You must use a screen capture utility to save the new image. Put in the image link and hit the Enter Data button to start. Use the mouse wheel to change the horizontal and vertical positions.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"></meta>
    <title>Text test</title>
    <style type='text/css'>
    body
    {
    background-color: Blue;
    color: White;
    margin: 0 auto;
    }
    #forbuttons {padding-left: 100px;}
    #forform
    {
    margin: 0;
    clear: left;
    padding: 20px;
    left: 20px;
    width: 640px;
    font-size: 24px;
    }
    fieldset{border-radius: 20px;padding: 20px;}
    .inputs {margin: 5px;}
    .target , .blue_button
    	{
    	width: 160px;
    	height: 40px;
    	padding-top: 12px;
    	font-size: 20px;
    	text-align: center;
    	margin: 8px;
    	border:2px solid White;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    	float: left;
    	}
    svg {top: 0; left: 0; position: absolute;z-index: auto;}
    
    </style>
    </head>
    <body>
    
    <img id="theimg" alt="You need to enter an image link and hit the Enter Data button." /><br>
    <svg id="mysvg" xml="http://www.w3.org/2000/svg" version="1.1"
    width ="10"
    height="10"
    fill="transparent"
    >
    <text class="T" title="My number is:  0 "></text>
    <text class="T" title="My number is:  1 "></text>
    <text class="T" title="My number is:  2 "></text>
    <text class="T" title="My number is:  3 "></text>
    <text class="T" title="My number is:  4 "></text>
    <text class="T" title="My number is:  5 "></text>
    <text class="T" title="My number is:  6 "></text>
    <text class="T" title="My number is:  7 "></text>
    <text class="T" title="My number is:  8 "></text>
    <text class="T" title="My number is:  9 "></text>
    </svg>
    <div>
    <div id="showdata" class="blue_button" >Info Box</div>
    <div id="t0" class="target">Horiz: Fast</div>
    <div id="t1" class="target">Horiz: Slow</div>
    <div id="t2" class="target">Vert: Fast</div>
    <div id="t3" class="target">Vert: Slow</div>
    </div>
    
    <div id="forform">
    
    <form>
    <fieldset>
    
    0 <input name="myin" checked="checked" type="radio"> 
    1 <input name="myin" type="radio"> 
    2 <input name="myin" type="radio"> 
    3 <input name="myin" type="radio"> 
    4 <input name="myin" type="radio"> 
    5 <input name="myin" type="radio"> 
    6 <input name="myin" type="radio"> 
    7 <input name="myin" type="radio"> 
    8 <input name="myin" type="radio"> 
    9 <input name="myin" type="radio"> 
    
    <br>
    <textarea cols=30 rows=2 name="mydata" >Text</textarea><br>
    <input type="text" name="mydata" value="100" >&nbsp;&nbsp;Pos left<br>
    <input type="text" name="mydata" value="100" >&nbsp;&nbsp;Pos top<br>
    <input type="text" name="mydata" value="100" >&nbsp;&nbsp;Font size<br>
    <input type="text" name="mydata" value="Red" >&nbsp;&nbsp;Font color<br>
    <input type="text" name="mydata" value="Yellow" >&nbsp;&nbsp;Outline color<br>
    <input type="text" name="mydata" value="1" >&nbsp;&nbsp;Outline width<br>
    <input type="text" name="mydata" value="Comic Sans MS" >&nbsp;&nbsp;Font name<br>
    <input type="text" name="mydata"  >&nbsp;&nbsp;Image Link<br>
    </fieldset>
    </form>
    <p id="forbuttons"><button onclick="enterData();">Enter Data</button>&nbsp;&nbsp;<button onclick="clearData();">Clear Data</button>&nbsp;&nbsp;<button onclick="returnData();">Return Data</button></p>
    </div>
    <script type="text/javascript">
    
    var theimage = window.document.getElementById("theimg");
    var show = window.document.getElementById("showdata");
    var txts = window.document.getElementsByClassName("T");	
    var ins  = window.document.getElementsByName("myin");
    var data = window.document.getElementsByName("mydata");
    var vg = window.document.getElementById("mysvg");
    
    function incr(e)
    	{
    	var evt=window.event || e //equalize event object
    	var delta=evt.detail? evt.detail : evt.wheelDelta 
    	if (evt.preventDefault) //disable default wheel action of scrolling page
            evt.preventDefault()
    	if ( delta < 0 ) del = -1;
    	else if ( delta > 0 ) del = 1;
    	else del = 0;
    	doMove(del,this);
    	}
    	
    function doMove(inc,T)
    	{
    	for ( i = 0 ; i < 10 ; i++ )
    	{
    	if ( ins[i].checked == true )
    	{
    	var X = Number(txts[i].getAttribute("x"));var Y = Number(txts[i].getAttribute("y"));
    	
    	if ( T.id == "t0" ) { X=X+(inc*10);  txts[i].setAttribute("x",X);data[1].value = X }
    	else if ( T.id == "t1" ) { X=X+inc;  txts[i].setAttribute("x",X);data[1].value = X }
    	else if ( T.id == "t2" ) { Y=Y+(inc*10);  txts[i].setAttribute("y",Y);data[2].value = Y }
    	else if ( T.id == "t3" ) { Y=Y+inc;  txts[i].setAttribute("y",Y);data[2].value = Y }
    	show.innerHTML = "H: "+X+" V: "+Y;
    	}}}
    	
    var targets = window.document.getElementsByClassName("target");
    for ( k = 0 ; k < targets.length ; k++ )
    	{
    	var X = targets[k];
    	var wheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
    if (X.attachEvent) //if IE (and Opera depending on user setting)
        X.attachEvent("on"+wheelevt, incr)
    else if (X.addEventListener) //WC3 browsers
        X.addEventListener(wheelevt, incr, false)		
    	}
    	
    function enterData(){
    	for ( i = 0 ; i < 10 ; i++ )
    	{
    	if ( ins[i].checked == true )
    	{
    	txts[i].textContent = data[0].value;
    	txts[i].setAttribute("x",data[1].value);
    	txts[i].setAttribute("y",data[2].value);
    	txts[i].setAttribute("font-size",data[3].value);
    	txts[i].setAttribute("fill",data[4].value);
    	txts[i].setAttribute("stroke",data[5].value);
    	txts[i].setAttribute("stroke-width",data[6].value);
    	txts[i].setAttribute("font-family",data[7].value);
    	theimage.src = data[8].value;
    	vg.setAttribute("width",theimage.width);
    	vg.setAttribute("height",theimage.height);
    	//show.innerHTML = theimage.width+"x"+theimage.height+"+0+"+(window.outerHeight-window.innerHeight);
    	}}}
    	
    function clearData(){
    	for ( i = 0 ; i < 10 ; i++ )
    	{
    	if ( ins[i].checked == true )
    	{
    	txts[i].textContent = "";
    	txts[i].removeAttribute("x");
    	txts[i].removeAttribute("y");
    	txts[i].removeAttribute("font-size");
    	txts[i].removeAttribute("fill");
    	txts[i].removeAttribute("stroke");
    	txts[i].removeAttribute("stroke-width");
    	txts[i].removeAttribute("font-family");
    	}}}
    	
    function returnData(){
    	for ( i = 0 ; i < 10 ; i++ )
    	{
    	if ( ins[i].checked == true )
    	{
    	data[0].value = txts[i].textContent;
    	data[1].value = txts[i].getAttribute("x");
    	data[2].value = txts[i].getAttribute("y");
    	data[3].value = txts[i].getAttribute("font-size");
    	data[4].value = txts[i].getAttribute("fill");
    	data[5].value = txts[i].getAttribute("stroke");
    	data[6].value = txts[i].getAttribute("stroke-width");
    	data[7].value = txts[i].getAttribute("font-family");
    	}}}
    
    	if ( data[8].value != "" ) theimage.src = data[8].value;
    </script>
    </body>
    </html>
    Last edited by DrDOS; 05-08-2013 at 11:13 PM.

  • #2
    Regular Coder
    Join Date
    May 2012
    Location
    USA
    Posts
    102
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Thank you for sharing code. It is really very interesting... Newbie can learn it easily with fun.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •