<!doctype html>{margin:0px; padding:0px;} #wrap {border:1px solid #ccc; Background:white; width:300px; height:480px; Margin:0Auto; position:relative; Margin-top:10px;} #text {width:270px; height:400px; border:1px solid #ccc; Position:absolute; left:15px; top:20px;} #face {width:24px; height:24px; border:1px solid #ccc; Display:inline-Block; Background:url (Images/icon4.png);left:15px; top:435px; Position:absolute;} #writen {height:24px; Position:absolute; top:435px; left:50px; width:180px; Border-radius:5px;} #button {position:absolute; right:15px; height:25px; width:40px; top:435px;}. right{Position:absolute; right:33px; Background:pink; padding:2px;}. left{Position:absolute; left:33px; Background: #ccc; padding:2px;}</style><script>window.onload=function (){ varOtext = document.getElementById ("text"); varOface = document.getElementById ("Face"); varAinput = document.getElementsByTagName ("Input"); varONFF =true; ainput[1].onclick =function (){ if(!ainput[0].value) {alert ("Please Input"); } Else if(ONFF) {otext.innerhtml= ' <p style= ' height:25px;line-height:25px;background: #ccc; float:right;margin-right:35px;margin-top:3px; Padding:2px;clear:both; " > ' + ainput[0].value + ' </p> ' +otext.innerhtml; ainput[0].value = ""; } Else{otext.innerhtml= ' <p style= ' height:25px;line-height:25px;background:pink;float:left;margin-left:35px;margin-top:3px;padding : 2px;clear:both; " > ' + ainput[0].value + ' </p> ' +otext.innerhtml; ainput[0].value = ""; }} Oface.onclick=function(){ if(ONFF) {OFace.style.background= "url (images/icon3.png)"; ONFF= !Onff; } Else{OFace.style.background= "url (images/icon4.png)"; ONFF= !Onff; } } }</script>JS Analog Texting