提问者:小点点

preg_replace-将<img>转换为<a href….><img</a>


我正在努力将图像标记转换为链接并复制标记内的参数,即。

<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但是我就是做不到?

非常感谢。


共1个答案

匿名用户

最简单的方法是: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//可选它可能有助于解决一些样式问题。