怎样在网页制作中的聊天室中添加表情图片？_IT百科

我以前也做过个简单的聊天室，后来因为另有任务没有做完，不过表情还是基本实现了，和你交流一下希望对你有点帮助。我的原理是这样的：

因为我发言用的是文本框，而文本框不支持图片，所以只能用符号来代替，用户选择图片后保存的实际是该图片所对应的符号，显示时再判断一下发言内容是否包含那些符号。如果有的话则把该符号转换成所对应图片的路径就好了。图片可以到网上找，符号可以在msn里找到,在msn聊天窗口->选择图片->其他，可以看到图片对应的符号，如果你直接在msn里输入符号它自动会转换成图片，可是文本框不行。听说网上有个FreeTextBox好用,可我用不来。

在html里有个隐藏层(div)里面是一个表格存放表情

然后页面上有个表情图片点击可控制层的显示和隐藏

用户点击某个表情后就得到了个符号。

下面的html代码主要是隐藏层的实现和符号的取得贴出来你参考一下。当然你也可以将全部表情放在页面上然后用"radio"或"checkBox"选这样可能更简单点，至于后台符号转换成图片，开发语言可能不同你自己研究一下吧

<%@ Page language="c#" Codebehind="frmSend.aspx.cs" AutoEventWireup="false" Inherits="ChatRoom.Page.frmSend" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>frmSend</title>

function doSubmit()

{

var user=document.all("txtUser")

var objUser=document.all("txtObjUser")

if(user.value==objUser.value)

{

alert("ﾄ嵂ｻﾄﾜﾑ｡ﾔ�ﾍﾗﾔｼｺﾁﾄﾌ・")

objUser.value="all"

return false

}

if(document.all("cbChat").checked)

{

if(document.all("txtObjUser").value=="all" || document.all("txtObjUser").value=="All")

{

alert("ﾋｽﾁﾄｶﾔﾏ�ｻﾄﾜﾎｪall")

return false

}

return true

}

ie4=(document.all)?true:false

ns4=(document.layers)?true:false

function toExit()

{

var args=toExit.arguments

var visible=args[0]

if(ns4)

{

theObj=eval("document.layers[\'"+args[1]+"\']")

if(theObj)theObj.visibility=visible

}

else if(ie4)

{

if(visible=='show')visible='visible'

if(visible=='hide')visible='hidden'

theObj=document.all("Layer1")

if(theObj)theObj.style.visibility=visible

}

function doClick(em)

{

var txt=document.all("txtMessage").value

txt+=em

document.all("txtMessage").value=txt

document.all("hidEmotion").value=em

toExit('hide','boysoft')

}

function doBold()

{

var word=document.all("txtMessage")

if (word.style.fontWeight == "bold")

{

word.style.fontWeight = "normal"

document.all("hidBold").value=""

}

else

{

word.style.fontWeight = "bold"

document.all("hidBold").value="bold"

}

event.cancelBubble = true

event.returnValue = false

}

function doItalic()

{

var txt=document.getElementById("txtMessage")

if(txt.style.fontStyle=="italic")

{

txt.style.fontStyle="normal"

document.all("hidItalic").value=""

}

else

{

txt.style.fontStyle="italic"

document.all("hidItalic").value="italic"

}

function doShowColor()

{

var args=doShowColor.arguments

var visible=args[0]

if(ns4)

{

theObj=eval("document.layers[\'"+args[1]+"\']")

if(theObj)theObj.visibility=visible

}

else if(ie4)

{

if(visible=='show')visible='visible'

if(visible=='hide')visible='hidden'

theObj=document.all("Layer3")

if(theObj)theObj.style.visibility=visible

}

function doHidde()

{

toExit('hide','boysoft')

doShowColor('hide','boysoft')

}

function doSetColor(id)

{

var txt=document.getElementById("txtMessage")

var imgColor=document.getElementById("imgColor")

txt.style.color=id

document.all("hidColor").value=id

imgColor.style.backgroundColor=id

doShowColor('hide','boysoft')

}

function doFontChange(txtFont)

{

if(txtFont=="Font")

{

return

}

document.getElementById("txtMessage").style.fontFamily=txtFont

document.all("hidFont").value=txtFont

}

function doSizeChang(txtSize)

{

if(txtSize=="Size")

{

return

}

document.getElementById("txtMessage").style.fontSize=txtSize

document.all("hidSize").value=txtSize

}

</script>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidthdocument.MM_pgH=innerHeightonresize=MM_reloadPage}}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload()

}

MM_reloadPage(true)

//-->

</script>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidthdocument.MM_pgH=innerHeightonresize=MM_reloadPage}}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload()

}

MM_reloadPage(true)

//-->

</script>

</HEAD>

<body onmousedown="doHidde()" bgColor="#edf1fa" onload="document.Form1.txtMessage.focus()"

MS_POSITIONING="GridLayout">

<INPUT id="hidBold" style="Z-INDEX: 103LEFT: 64pxWIDTH: 152pxPOSITION: absoluteTOP: 216pxHEIGHT: 22px"

type="hidden" size="20" name="hidBold"><INPUT id="hidEmotion" style="Z-INDEX: 109LEFT: 64pxPOSITION: absoluteTOP: 416px"

type="hidden" name="Hidden6" runat="server"><INPUT id="hidColor" style="Z-INDEX: 108LEFT: 64pxPOSITION: absoluteTOP: 448px" type="hidden"

name="Hidden7" runat="server"><INPUT id="hidFont" style="Z-INDEX: 107LEFT: 64pxPOSITION: absoluteTOP: 344px" type="hidden"

name="Hidden4" runat="server"><INPUT id="hidSize" style="Z-INDEX: 106LEFT: 64pxPOSITION: absoluteTOP: 376px" type="hidden"

name="Hidden5" runat="server"><INPUT id="hidUnderLine" style="Z-INDEX: 105LEFT: 64pxPOSITION: absoluteTOP: 304px"

type="hidden" name="Hidden3" runat="server"><INPUT id="hidItalic" style="Z-INDEX: 104LEFT: 64pxPOSITION: absoluteTOP: 256px"

type="hidden" name="Hidden2" runat="server">

<TABLE id="Table1" style="WIDTH: 712pxHEIGHT: 112px" cellSpacing="1" cellPadding="1"

width="712" border="1">

<TR>

<TD><span title="bold"><IMG onclick="doBold()" src="../images/bold.gif"> </SAPN><span title="italic" onclick="doItalic()"><IMG src="../images/italic.gif"></span><span title="underline" onclick="doUnderline()"><IMG src="../images/underline.gif"></span><span title="Font Color"><IMG id="imgColor" style="BACKGROUND-COLOR: black" onclick="doShowColor('show','boysoft')"

src="../images/colourpick.gif" runat="server"></span> <SELECT onchange="doFontChange(this.value)" name="ddFont" id="Select1" runat="server">

<OPTION value="Arial">Arial</OPTION>

<OPTION value="Verdana">Verdana</OPTION>

<OPTION value="Comic Sans MS">Comic Sans MS</OPTION>

<OPTION value="Courier">Courier</OPTION>

<OPTION value="Georgia">Georgia</OPTION>

<OPTION value="Impact">Impact</OPTION>

<OPTION value="Lucida Console">Lucida Console</OPTION>

<OPTION value="Tahoma">Tahoma</OPTION>

<OPTION value="Times New Roman">Times New Roman</OPTION>

<OPTION value="Wingdings">Wingdings</OPTION>

</SELECT><SELECT onchange="doSizeChang(this.value)" name="ddSize" id="Select2" runat="server">

</SELECT> <span title="insert emotions"><IMG onclick="toExit('show','boysoft')" src="../images/emotion.gif"></span> <span title="sign out">

<asp:imagebutton id="ibExit" runat="server" ImageUrl="../images/logoff.gif"></asp:imagebutton></span></span>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</TD></TR>

<TR>

</TR>

<TR>

<TD><asp:textbox id="txtUser" runat="server" Width="120px" ReadOnly="True" BorderStyle="Groove" BackColor="#EDF1FA"

ForeColor="Black"></asp:textbox><asp:label id="Label2" runat="server">to</asp:label><FONT face="ﾋﾎﾌ・><FONT face="ﾋﾎﾌ・><asp:textbox id="txtObjUser" runat="server" Width="120px" ReadOnly="True" BorderStyle="Groove"

BackColor="#EDF1FA"></asp:textbox></FONT></FONT><FONT face="ﾋﾎﾌ・></FONT><asp:checkbox id="cbChat" runat="server" Text="Whisper "></asp:checkbox></TD>

</TR>

</TABLE>

</form>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</HTML>

代码1：div 设置contenteditable等于true作为编辑框时的光标位置插入文本

/**

*光标位置插入

* 参数1 string 要插入的内容

* 参数2 bool true 插入后选中插入内容，false不选中

**/function pasteHtmlAtCaret(html, selectPastedContent) {

var sel, range

if (window.getSelection) {

// IE9 and non-IE

sel = window.getSelection()

if (sel.getRangeAt &&sel.rangeCount) {

range = sel.getRangeAt(0)

range.deleteContents()

// Range.createContextualFragment() would be useful here but is

// only relatively recently standardized and is not supported in

// some browsers (IE9, for one)

var el = document.createElement("div")

el.innerHTML = html

var frag = document.createDocumentFragment(), node, lastNode

while ( (node = el.firstChild) ) {

lastNode = frag.appendChild(node)

}

var firstNode = frag.firstChild

range.insertNode(frag)

// Preserve the selection

if (lastNode) {

range = range.cloneRange()

range.setStartAfter(lastNode)

if (selectPastedContent) {

range.setStartBefore(firstNode)

} else {

range.collapse(true)

}

sel.removeAllRanges()

sel.addRange(range)

}

} else if ( (sel = document.selection) &&sel.type != "Control") {

// IE <9

var originalRange = sel.createRange()

originalRange.collapse(true)

sel.createRange().pasteHTML(html)

if (selectPastedContent) {

range = sel.createRange()

range.setEndPoint("StartToStart", originalRange)

range.select()

}

代码2：textarea 光标位置插入文本

//JQ 扩展

(function ($) {

$.fn.extend({

insertAtCaret: function (myValue) {

var $t = $(this)[0]

if (document.selection) {

this.focus()

sel = document.selection.createRange()

sel.text = myValue

this.focus()

} else{

if ($t.selectionStart || $t.selectionStart == '0') {

var startPos = $t.selectionStart

var endPos = $t.selectionEnd

var scrollTop = $t.scrollTop

$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length)

this.focus()

$t.selectionStart = startPos + myValue.length

$t.selectionEnd = startPos + myValue.length

$t.scrollTop = scrollTop

} else {

this.value += myValue

this.focus()

}

})

})(jQuery)

asp.net做悬浮DIV效果，就是设置一个悬浮DIVlocation紧跟在按钮下，在div里插入多个有序<image src="path">标签，　输入的字体跟命名空间毫无关系，字体大小可以用输入框style里的text属性来控制

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/bake/11828548.html

怎样在网页制作中的聊天室中添加表情图片？

发表评论

评论列表（0条）