Форум

imediasun1 · #1 (**permalink**) 12.07.2013, 13:56

Так в моем скрипте формируется вывод изображений и ссылка на отмену загрузки изображения к каждому из них

<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);

Как написать так чтобы вместо текста Х была бы иконка из изображения, пожалуйста с примером кода, спасибо большое всем отозвавшимся и как применить смещение этой иконки чтобы отредактировать ее положение относительно самой картинки

ОлегА · #2 (**permalink**) 12.07.2013, 14:14

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);

рони · #3 (**permalink**) 12.07.2013, 14:51

imediasun1,

<!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>

Форум

Справочник

Discord чат

Курсы javascript