формирование ссылки
Так в моем скрипте формируется вывод изображений и ссылка на отмену загрузки изображения к каждому из них
<ul id="img-list"></ul>
#img-list {
list-style-type: none;
margin: 0;
padding: 0;
}
#img-list li {
font-size:10px;
margin: 10px;
width: 152px;
text-align: center;
display: inline-block;
}
var imgList = $('#img-list');
var li = $('<li/>').appendTo(imgList);
var cancelButton = $('<a/>').attr({
href: '#cancel',
title: 'отменить'
}).text('X').appendTo(li);
Как написать так чтобы вместо текста Х была бы иконка из изображения, пожалуйста с примером кода, спасибо большое всем отозвавшимся и как применить смещение этой иконки чтобы отредактировать ее положение относительно самой картинки |
var imgList = $('#img-list');
var li = $('<li/>').appendTo(imgList);
var cancelButton = $('<a/>').attr({
href: '#cancel',
title: 'отменить'
}).html('<img height="25" width="25" alt="X" src="url картинки">').appendTo(li);
|
imediasun1,
:cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#img-list {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
border: solid 1px #0000FF;
width: 300px;
}
#img-list li {
font-size:10px;
margin: 10px;
width: 152px;
text-align: center;
display: inline-block;
}
#img-list li img{
border: 0px;
position: relative;
right: 0px;
cursor: pointer;
}
#img-list li{
position: absolute;
right:-40px;
top: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script>
$(function ()
{
var imgList = $('#img-list');
var li = $('<li/>').appendTo(imgList);
var cancelButton = $('<a/>',{
href: '#cancel',
title: 'отменить',
html: $('<img/>',{src : 'http://www.iconsearch.ru/uploads/icons/crystalclear/32x32/button_cancel.png'}),
click : function (event){
imgList.html('');
event.preventDefault()
}
}).appendTo(li);
}
);
</script>
</head>
<body>
<div id="img-list"><img src="http://digibar.ru/image/cache/img/1120614-300x300.gif" alt=""></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:47. |