IE 6 图片<img/> 写入html ,图片不显示问题

图片html,如<img src="xxx.jpg">已经插入到页面中,但是图片没有显示,

IE7,火狐等浏览器都正常,要右键-“显示图片”,图片才显示,很奇怪的。


去搜了下,正好有位大哥遇到过类似的问题。

他说搜国内的相关文章,都是一坨大鸟屎,最后靠国外文章解决,说几个吃饱了没事干的老外反复试验,发现这是IE6 一个底层机制的bug,说是 <a href="javascript:void(0)">或者<a href=#">这样使用a标签的话并不能阻止a标签最后触发一个什么行为,导致ie6会错误的认为页面刷新或者重定向了,并且中断了当前所有连接,这样新图片的加载就被阻止了。


一看自己的,确实使用a标签触发事件的:<a href="javascript:void(null);" class="btn" id="insert_pic">插入图片</a>

他还说老外提出很多稀奇古怪的方法解决这个问题。我虽然是比较感兴趣,但是懒得找这篇文章,就按照这位大哥的说法改了一下。将a标签改为其他标签,我就改成了属性相近的span标签,结果就ok了。

<span id="append_finish" class="append_finish">图片插入完毕!</span>

 

转自:http://hi.baidu.com/iamzhangxinxu/blog/item/d5f294086482d18bd0581b75.html

 

另外:把方法卸载 href 里面也可行。如:<a href="javascript:operatepic(xx); " class="btn" id="insert_pic">插入图片</a>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是修改后的代码,可以实现鼠标移入哪一栏显示对应图片: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body> <table border="1" width="310px" cellspacing="0" align="center" > <tr> <td>女靴</td> <td rowspan="9"><img id="product-img" src="../images/女靴.jpg"></td> <td>女包</td> </tr> <tr> <td>雪地靴</td> <td>男包</td> </tr> <tr> <td>冬裙</td> <td>登山鞋</td> </tr> <tr> <td>呢大衣</td> <td>皮带</td> </tr> <tr> <td>毛衣</td> <td>围巾</td> </tr> <tr> <td>棉服</td> <td>皮衣</td> </tr> <tr> <td>女裤</td> <td>男毛衣</td> </tr> <tr> <td>羽绒服</td> <td>男棉服</td> </tr> <tr> <td>牛仔裤</td> <td>男靴</td> </tr> </table> <script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("td").mouseenter(function(){ var index = $(this).index(); var imgSrc = "../images/" + $("tr:first-child td").eq(index).text() + ".jpg"; $("#product-img").prop("src", imgSrc); }); }); </script> </body> </html> ``` 具体来说,修改了以下部分: 1. 在 `<img>` 元素上添加了一个 `id` 属性,方便在 JavaScript 中引用该元素。 2. 在 JavaScript 代码中,使用了 `$("td").mouseenter()` 选择器来选择所有 `<td>` 元素,并在鼠标移入时绑定事件处理函数。 3. 在事件处理函数中,通过 `$(this).index()` 方法获取当前鼠标所在的列号,然后使用 `$("tr:first-child td").eq(index).text()` 获取该列第一行的文本内容(即商品名称),再拼接出对应的图片路径。 4. 最后,将图片路径赋值给 `<img>` 元素的 `src` 属性,从而显示对应图片
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值