我正在努力将图像标记转换为链接并复制标记内的参数,即。
<img src="/images/image1.jpg" alt="The name of image">
进入
<a href="/images/image1.jpg" target="_self" rel="zoom" title="The name of image"><img src="/images/image1.jpg" alt="The name of image"></a>
我的问题不仅仅是复制src和alt数据,还包括丢失和额外的标记。
<img src="/images/image1.jpg" >
进入
<a href="/images/image1.jpg" target="_self" rel="zoom" title=""><img src="/images/image1.jpg" ></a>
和
<img style="padding:5px;" src="/images/image1.jpg" alt="The name of the image">
进入
<a href="/images/image1.jpg" target="_self" rel="zoom" title="The name of the image"><img style="padding:5px;" src="/images/image1.jpg" alt="The name of the image"></a>
这需要对整个字符串中img标记的所有实例执行。
不是说听起来像是一个挑战,但是有人能提出一个可能的解决方案吗,我相信这可以用preg_replace但是我就是做不到?
非常感谢。
最简单的方法是:HTML:
<span id="My_ID"><img class="My_img" src="/images/image1.jpg" alt="The name of image" /></span>
JavaScript和JQUERY(不是必需的,但我使用它是为了与浏览器兼容):
var first= true;
$('.My_img').hover(function(){
if(first == true){
//First time this prevent Dulicated runing and shows errors
first = false;//it is not thew first time anymore
var alt = $('.My_img').attr('alt');//Get the img alt
var src = $('.My_img').attr('src');//Get the img src
document.getElementById('My_ID').innerHTML = '<a href="' + src + '" target="_self" rel="zoom" title="' + alt + '" ><img src="' + src +'" alt="' + alt + '" width="200" height="100"></a>';
}
});
要演示上述内容,她是一个小提琴:
http://jsfiddle.net/Mh9Np/
简单,但innerHTML是一个不好的做法,因为每个人都说,所以我会给你一个想法关于其他方式:(Samse超文本标记语言)
1-将img存储在变量中
2-将alt和src属性存储在变量中。
2-创建一个元素。
3-借助alt和src变量为其设置所需的属性。
4-将img附加到a。
5-在跨度上追加a。
6-删除原始img//可选它可能有助于解决一些样式问题。