javascript插入图片

< script language = " javascript " >
function showhtml()
{
 alert(tf2.value);
}

function insertImg()
{
 var theImage
="http://www.baidu.com/img/logo-yy.gif";
 
if (document.selection)
   
{
   
     theSelection 
= document.selection;
     theRange 
= theSelection.createRange();
     theRange.collapse(
false);
     theRange.pasteHTML(
"<img src="" + theImage + "" />");
   }

}

 

第二种方法:

theRange 
=  theSelection.getRangeAt( 0 );
     theRange.collapse(
false );
     
     var theImageNode 
=  theIframe.contentWindow.document.createElement( " img " );
     
     theImageNode.src 
=  theImage;
     theImageNode.alt 
=  theAlt;
     
     theRange.insertNode(theImageNode);

 
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以使用以下步骤来生成可以插入图片点击图片能够放大的网页表格: 1. 创建一个HTML文件,并在文件中包含一个表格。 2. 在表格中为每个单元格创建一个<img>标记。 3. 为每个<img>标记设置一个点击事件,当用户点击图像时,会触发一个JavaScript函数。 4. 在JavaScript函数中,创建一个<div>标记来显示放大后的图片。 5. 设置<div>标记的CSS样式,使其覆盖整个屏幕并且透明度为50%。 6. 在<div>标记中插入一个<img>标记,该标记包含用户点击的原始图像的大尺寸版本。 7. 设置<img>标记的CSS样式,使其位于屏幕中央并具有较大的尺寸。 8. 当用户点击放大的图像时,隐藏<div>标记,使放大的图像消失。 以下是示例代码: HTML文件: ```html <!DOCTYPE html> <html> <head> <title>可点击放大的表格</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; padding: 10px; text-align: center; } img { max-width: 100%; max-height: 100%; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; } .overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; border: 5px solid white; box-shadow: 0 0 10px black; } </style> </head> <body> <table> <tr> <td><img src="image1.jpg" onclick="showImage('image1-large.jpg')"></td> <td><img src="image2.jpg" onclick="showImage('image2-large.jpg')"></td> <td><img src="image3.jpg" onclick="showImage('image3-large.jpg')"></td> </tr> <tr> <td><img src="image4.jpg" onclick="showImage('image4-large.jpg')"></td> <td><img src="image5.jpg" onclick="showImage('image5-large.jpg')"></td> <td><img src="image6.jpg" onclick="showImage('image6-large.jpg')"></td> </tr> </table> <div class="overlay" onclick="hideImage()"> <img id="overlay-image"> </div> <script> function showImage(src) { var overlay = document.querySelector('.overlay'); var image = document.querySelector('#overlay-image'); image.src = src; overlay.style.display = 'block'; } function hideImage() { var overlay = document.querySelector('.overlay'); overlay.style.display = 'none'; } </script> </body> </html> ``` 在上面的代码中,我们首先定义了一个表格,其中包含六个单元格,每个单元格都包含一个<img>标记。当用户点击图像时,会调用showImage函数。 showImage函数创建一个<div>标记,并在其中插入一个<img>标记,该标记包含用户点击的原始图像的大尺寸版本。然后,我们设置<div>标记的CSS样式,使其覆盖整个屏幕并且透明度为50%。最后,我们将<div>标记的display属性设置为“block”,以使其显示在屏幕上。 hideImage函数则将<div>标记的display属性设置为“none”,以隐藏放大的图像。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值