在标签前插入图像并在图像上提供超链接?

时间:2013-06-19 11:57:08

标签: javascript jquery html gwt gxt

我正在使用gwt。我需要在标签前面给出一个“删除”图像,如下所示。

enter image description here

如何在文字前包装图片并提供hyperlink on an image

2 个答案:

答案 0 :(得分:0)

可以使用.prepend().append()

来完成
$('p').prepend(
    $('<a></a>', { href : "http://google.com" }).append(
        $('<img />',  { src : 'http://placehold.it/30x30' })
    )
);

Demo

在这个例子中,我定位了<p>个元素,所以你显然需要根据你想要定位的元素来改变选择器(例如表格单元格,列表项目?)。这样做首先创建一个图像元素并给它一个源,然后创建一个带有href的锚元素,然后将图像附加到锚点,最后将锚点预先添加到段落元素中。

答案 1 :(得分:0)

你不需要javascript来做到这一点。我会猜测CSS:

CLICK FOR FIDDLE

HTML

<a href="#" class="button"><span>Delete</span></a>

CSS

.button {
    border:1px solid #ccc; 
    padding:5px; 
    background-color:#efefef; 
    width:100px;
    background-image: url(http://www.greenisp.org.uk/x/img/cross-icon-grey.gif);
    background-position: 0 50%;
    background-repeat: no-repeat;
    text-decoration: none;
}

.button span {
    padding-left:25px;
    color:#000;
    font-weight:bold;
}