添加 png 图标到 HTML

Question

添加 png 图标到 HTML

我想知道是否有人可以帮助我。

首先道歉，因为对于某些人来说这可能是一个非常基本的问题，但我对此不熟悉，所以请耐心等待。

我使用下面的脚本在 fancyBox 中创建一个图像库。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <title>Gallery</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <script type="text/javascript" src="fancybox/lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
    <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
    <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
    <link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />


  <script type="text/javascript">  

            $('.fancybox').fancybox({
                openEffect  :   'elastic',
                closeEffect :   'elastic',

                padding :   20,
                fitToView   :   true,

                prevEffect :    'none',
                nextEffect :    'none',

                closeBtn  : false,
                arrows : false,

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },

                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });


</script> 
  <style type="text/css">
<!--
.style1 {
    font-size: 14px;
    margin-top: 5px;
    margin-right: 110px;
}
-->
  </style>  
</head>
<body style="font-family: Calibri; color:  #505050; margin-left: 240px; float:left;"/>
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> &larr; View Uploaded Images </div> 
  <form id="gallery" name="gallery" class="page" action="index.php" method="post" style="margin-left: -120px; margin-right: 50px; border-left: 100; caption-side: left;"> 

    <p>
      <?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :  
                          $xmlFile = $descriptions->documentElement->childNodes->item($i);  
                          $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');  
                          $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');  
                          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));  
                          $thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));  
                  ?>
      <a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>"alt="<?php echo $description; ?>" /></a>
      <?php endfor; ?>  
    </p>
</form>  
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我现在想添加允许用户删除图像的功能。

使用“famfamfam.com”中的“丝绸图标”，我找到了一个合适的图标，我想将其放置在每个图像的左上角，但我不确定如何将该图标添加到我的页面。

我试图在网上找到一个教程来告诉我如何做到这一点，但到目前为止还没有成功。

我只是想知道是否有人可以提供一些指导我如何将其添加到我的页面。

非常感谢和问候

Answer 1

Jez*_*mas 6

就在这一行之前：

\n\n

<a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>"alt="<?php echo $description; ?>" /></a>\n

Run Code Online (Sandbox Code Playgroud)\n\n

你可以添加这样的东西：

\n\n

<img src="path/to/image.png" class="removeImage" alt="Remove this image" />\n

Run Code Online (Sandbox Code Playgroud)\n\n

然后用 jQuery 做这样的事情：

\n\n

$(\'.removeImage\').click(function(){\n    $(this).next(\'a.fancybox\').remove();\n});\n

Run Code Online (Sandbox Code Playgroud)\n\n

我还会对该文档进行许多其他更改。例如，删除所有内联样式并将它们组合到外部样式表中是一个好主意。你的 javascript 也是如此。此外：

\n\n

您尝试像这样自动关闭开始正文标记：<body />\xe2\x80\x94 我们不这样做。
使用时font-family，最好创建一个网络安全的字体列表。查看更多信息： http: //cssfontstack.com/
alignHTML 中的属性已被弃用

\n\n

我对您的文档进行了一些更改，以便更容易使用。这是 HTML/PHP：

\n\n

<!doctype html>\n<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->\n<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->\n<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->\n<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->\n<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->\n<head>  \n\n<title>Gallery</title>  \n<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  \n\n<!-- styles -->\n<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />\n<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />\n<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />\n<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />  \n</head>\n\n<body>\n<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> &larr; View Uploaded Images </div> \n<form id="gallery" name="gallery" class="page" action="index.php" method="post">\n<p>\n<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :  \n                      $xmlFile = $descriptions->documentElement->childNodes->item($i);  \n                      $name = htmlentities($xmlFile->getAttribute(\'originalname\'), ENT_COMPAT, \'UTF-8\');  \n                      $description = htmlentities($xmlFile->getAttribute(\'description\'), ENT_COMPAT, \'UTF-8\');  \n                      $source = $galleryPath . rawurlencode($xmlFile->getAttribute(\'source\'));  \n                      $thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute(\'thumbnail\'));  \n              ?>\n  <a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>"alt="<?php echo $description; ?>" /></a>\n  <?php endfor; ?>  \n</p>\n</form>\n\n<!-- scripts -->\n<script type="text/javascript" src="fancybox/lib/jquery-1.7.2.min.js"></script>\n<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>\n<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>\n<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>\n<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>\n<script type="text/javascript" src="main.js"></script>\n</body>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n\n

...这是您的样式表 \xe2\x80\x94 screen.css：

\n\n

body {font-family: Calibri; color: #505050; margin-left: 240px; float:left;}\n.style1 {font-size: 14px; margin-top: 5px; margin-right: 110px;}\n#gallery {margin-left: -120px; margin-right: 50px; border-left: 100; caption-side: left;}\n

Run Code Online (Sandbox Code Playgroud)\n\n

最后，页面准备好后运行的脚本 \xe2\x80\x94 main.js：

\n\n

$(function(){\n    $(\'.removeImage\').click(function(){\n        $(this).next(\'a.fancybox\').remove();\n    });\n\n$(\'.fancybox\').fancybox({\n            openEffect  :   \'elastic\',\n            closeEffect :   \'elastic\',\n\n            padding :   20,\n            fitToView   :   true,\n\n            prevEffect :    \'none\',\n            nextEffect :    \'none\',\n\n            closeBtn  : false,\n            arrows : false,\n\n            helpers : {\n                title : {\n                    type : \'inside\'\n                },\n                buttons : {}\n            },\n\n            afterLoad : function() {\n                this.title = \'Image \' + (this.index + 1) + \' of \' + this.group.length + (this.title ? \' - \' + this.title : \'\');\n            }\n        });\n})\n

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	13 年，4 月前
查看次数：	15368 次
最近记录：	13 年，4 月前