[英]How can I add an Image in Messenger Chat?
在我的聊天中，我想在氣球中為一個按鈕顯示一條文本消息，並為另一個按鈕顯示我圖庫中的圖像。 文本的編程工作。 我如何通過圖片獲得這個？
我的 HTML 代碼是這樣的：
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm" >
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<img id="Bildverschicken" src="baseline_image_black_18dp.png">
<p>
<input type ="button" id="theButton" value="Nachricht absenden!"
onclick="document.getElementsByClassName('Chat_Bubble')[0].textContent=document.getElementById('textField').value"/>
</p>
<input type="button" id="Button_Bilder" value="Bild verschicken!"
onclick="document.getElementsByClassName('Chat_Bubble')[0].imageContent=document.getElementById('Bildverschicken').value"/>
<h3><div id="div"></div></h3>
</form>
</div>
有人能幫我嗎？ 謝謝！
@charset "UTF-8"; .Webview{ height: 600px; width: 380px; } .message_container{ height: 80%; width: 100%; border:5px solid green; } .Chat_Bubble{ box-sizing: border-box; float: left; width: auto; max-width: 80%; position: relative; clear: both; background: #95c2fd; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #bee2ff), color-stop(1, #95c2fd)); background-image: -webkit-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%); background-image: -moz-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%); background-image: -ms-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%); background-image: -o-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%); background-image: linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%); border: solid 1px rgba(0,0,0,0.5); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2); box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2); margin-bottom: 20px; padding: 6px 20px; color: #000; text-shadow: 0 1px 1px rgba(255,255,255,0.8); word-wrap: break-word; } .bubble:before, .bubble:after { border-radius: 20px / 5px; content: ''; display: block; position: absolute; } .bubble:before { border: 10px solid transparent; border-bottom-color: rgba(0,0,0,0.5); bottom: 0px; left: -7px; z-index: -2; } .bubble:after { border: 8px solid transparent; border-bottom-color: #bee2ff; /* arrow color */ bottom: 1px; left: -5px; } .bubble-alt { float: right; } .bubble-alt:before { left: auto; right: -7px; } .bubble-alt:after { left: auto; right: -5px; } .bubble p { font-size: 1.4em; } } .send_container{ height: 20; width: 100%; } .send_container input{ width: 70%; height:20% border:2px solid #1CE615; } .send_container button{ width: 30%; height:20%; } .send_container Button_Bilder{ width: 10%; height:10% ; }
<!DOCTYPE html> <link rel="stylesheet" href="style.css"> <div class="Webview"> <div class="message_container" id="myForm" > <div class="Chat_Bubble"></div> </div> <form class="send_container"> <input id="textField" type="text"> <img id="Bildverschicken" src="baseline_image_black_18dp.png"> <p> <input type ="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementsByClassName('Chat_Bubble')[0].textContent=document.getElementById('textField').value"/> </p> <input type="button" id="Button_Bilder" value="Bild verschicken!" onclick="document.getElementsByClassName('Chat_Bubble')[0].imageContent=document.getElementById('Bildverschicken').value"/> <h3><div id="div"></div></h3> </form> </div>
如何在不刪除另一側的信使聊天圖標的情況下添加固定在索引頁面左下角的小部件？
[英]How can i add a widget fixed on the bottom left of my index page without removing a messenger chat icon on the opposite side?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.