如何创建可嵌入的图像答案

【问题标题】：How to create embeddable images如何创建可嵌入的图像
【发布时间】：2011-07-16 03:28:52
【问题描述】：

我正在开发一个网站，鼓励其他博主拍摄照片并将其发布到他们的博客中。或多或少的广告。我希望能够开发一个页面，其中包含一系列图像，其下方带有嵌入代码，因此用户可以复制 html 嵌入代码并将其粘贴到他们的文件中。

通常，我只会发送图像，或向用户提供实际的图像链接（例如：http://sitenamehere.com/images/ad.jpg），但我认为有更好的方法可以让网站访问者安全地将我网站中的内容嵌入到他们的网站中。在这种情况下，它只是可嵌入的 gif 或 jpg。是否有任何出色的工具或服务可以帮助解决这个问题？

经过审查，这似乎是一个愚蠢的问题，因为一个简单的图像路径就足够了......但也许有一些工具可以生成文本区域，其中预先插入了代码以便于复制/粘贴......有什么建议吗？鼓励使用 Jquery 解决方案！

【问题讨论】：

标签： jquery image embed

【解决方案1】：

你可以使用 jquery 对话框做一些事情：

$('img').click(function(){
   var htmlText = 'To embed use url: '+$(this).attr('src');
   $('<div>').dialog({
      modal: true,
      beforeClose: function(){ $(this).remove(); }
   }).html(htmlText);
}).hover(function(){
   //use some tooltip to show that you can click to see embed
})

或类似的东西来向您的用户显示嵌入网址:-)

【讨论】：

哈哈，只是因为我不需要这么优雅的解决方案。 rsplak 的解决方案非常完美。
在这种情况下能够接受多个答案真是太好了......
接受票数更多的人：-p（或者不要让我在没有正确的情况下投票，我认为有一个徽章：-p）

【解决方案2】：

$(document).ready(function() {
    $('img.advertisements').each(function() {
        $('<input type="text"></input>').val('<a href="YOURSITE"><img src="'+$(this).attr('src')+'" alt="SITENAME"></a>').bind('click', function() {
            $(this).focus();
        }).insertAfter($(this));
    });
});

给你的图片加上“广告”类，你就完成了！您将获得一个带有值的小输入字段： <a href="YOURSITE"><img src="THE SRC OF THE IMG" alt="SITENAME"></a>

【讨论】：