画像をインタラクティブにするBritePic

画像にロゴを入れたり、URLを載せたり、インタラクティブに使えるようにしてくれるBritePic。

britepic

従来のimgタグの代わりにscriptを埋め込むだけでOKだそうです。

今あるものにもう一工夫で新しいことができる良い例ですね。

参考：百式

Posts Estimation

Rate:0(Rate Count:0)
View Count:372
Share this media.

About This Posts

Tags:
Posted Time:2007-03-30 22:18:05
Access Control:Visible for Everyone

Now Loading ...

Trackbacks

http://mw.aimy.jp/api/recv_tb/af_media_entry-bd4148f10f3423bc430bbaa7cfce6ee9

Now Loading ...

<div class="boxed_heading" style="margin-top: 10px;">
  <div class="top-corner"><div class="corner-left-top" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-bottom" style="background-color:#cc3333;"></div></div>  <div class="pink_heading_inner">Add it into Favorites</div>
  <div class="top-corner"><div class="corner-right-bottom" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-top" style="background-color:#cc3333;"></div></div>  </div>

<form name="edit_favorite_form" style="margin:0;">
  <input type="hidden" name="media_type" value="entry" />
  <input type="hidden" name="media_id" value="${media_id}" />
  <table border=0 style="border-collapse:collapse;">
  <tr><td style="font-weight:bold;padding:10px;">Access Control</td><td>
    <input type="radio" name="visible_mode" value="1" checked />Public    <input type="radio" name="visible_mode" value="2" />Group    <select name="visible_group">
        </select>
    <input type="radio" name="visible_mode" value="4" />Private  </td></tr>
  </table>
  </form>
  <input type="button" value="Cancel"  class="btn" onclick="if($('movie')){$('movie').style.display='block';}MediaWagon.prototype.CloseDialog();" />
  <input type="button" value="Save" class="btn_small" onclick="Favorite.prototype.Add();" />
</div>

<div class="boxed_heading" style="margin-top: 10px;">
  <div class="top-corner"><div class="corner-left-top" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-bottom" style="background-color:#cc3333;"></div></div>  <div class="pink_heading_inner">Remove it from Favorites</div>
  <div class="top-corner"><div class="corner-right-bottom" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-top" style="background-color:#cc3333;"></div></div>  </div>

<table border=0 style="border-collapse:collapse;">
  <tr><td style="font-weight:bold;font-size:14px;padding:10px;">
  Are you sure to delete this?  </td></tr>
  </table>
  <input type="button" value="Cancel"  class="btn" onclick="MediaWagon.prototype.CloseDialog();" />
  <input type="button" value="Delete" class="btn" onclick="Favorite.prototype.Delete('${media_id}');MediaWagon.prototype.CloseDialog();Favorite.prototype.Toggle('${media_id}',0);" />
</div>

<div class="boxed_heading" style="margin-top: 10px;">
  <div class="top-corner"><div class="corner-left-top" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-bottom" style="background-color:#cc3333;"></div></div>  <div class="pink_heading_inner">Delete Media</div>
  <div class="top-corner"><div class="corner-right-bottom" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-top" style="background-color:#cc3333;"></div></div>  </div>

<div class="message confirm_notice">Are you sure to delete this?</div>

{for p in medias}
  {if p.media_type!='entry'}
    {if p.convert_status==2}
    <img src="http://static.aimy.jp/images/${media_type}.gif" /><br />
    {else}
    <img src="http://static.aimy.jp/${p.media_type}/${p.hash_path}/${p.id}_square${p.tn_file_ext}" /><br />
    {/if}
  {/if}
  <b>"${p.title}"</b> - ${p.description.stripTags()|truncate}<br />
  {if media_type!='favorite' && p.entry_ids.length>0}
  <table border=0 style="border-collapse:collapse;">
  <tr><td style="font-weight:bold;padding:10px;">
    Please note to delete the photograph and so on which is used in the article.  </td></tr>
  </table>
      {for j in p.entry_ids}
	<a href="http://${p.user_name}.mw.aimy.jp/entry/${p.entry_ids[j_index]}" target="_blank">${p.entry_titles[j_index]}</a><br />
      {/for}
    {/if}
  {/for}
  <input type="button" value="Cancel" class="btn" onclick="MediaWagon.prototype.CloseDialog();" />
  <input type="button" value="Delete" class="btn" onclick="Manage.prototype.DeleteMedia('${media_type}');location.reload();" />
</div>

<div id="folder_form_div">
  <div class="boxed_heading" style="margin-top: 10px;">
  <div class="top-corner"><div class="corner-left-top" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-bottom" style="background-color:#cc3333;"></div></div>  <div class="pink_heading_inner">Create New Folder</div>
  <div class="top-corner"><div class="corner-right-bottom" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-top" style="background-color:#cc3333;"></div></div>  </div>
  <form name="folder_form">
  <table>
  <tr><td>Folder Name</td><td><input type="text" name="folder_name" value="" onclick="this.focus();" /></td></tr>
  <tr><td>Access Control</td><td>
    <input type="radio" name="visible_mode" value="1" checked />Public    <input type="radio" name="visible_mode" value="2" />Group    <select name="visible_group">
        </select>
    <input type="radio" name="visible_mode" value="4" />Private  </td></tr>
  </table>
  <input type="button" value="Create" class="btn" onclick="Folder.prototype.Create();" />
  <input type="button" value="Cancel"  class="btn" onclick="MediaWagon.prototype.CloseDialog();" />

</form>
</div>

<div class="boxed_heading">
  <div class="top-corner"><div class="corner-left-top" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-bottom" style="background-color:#cc3333;"></div></div>  <div class="pink_heading_inner">Delete Folder</div>
  <div class="top-corner"><div class="corner-right-bottom" style="background-color:#cc3333;"></div><div class="corner-left-bottom" style="background-color:#cc3333;"></div><div class="corner-right-top" style="background-color:#cc3333;"></div><div class="corner-left-top" style="background-color:#cc3333;"></div></div>  </div>

<table border="0" style="border-collapse:collapse;">
  <tr><td style="font-weight:bold;padding:10px;">Are you sure to delete Folder"${folder_name}"</td></tr>
  </table>
  <input type="button" value="Cancel" class="btn" onclick="MediaWagon.prototype.CloseDialog();" />
  <input type="button" value="Delete" class="btn" onclick="Folder.prototype.Delete();" />
</div>

<div class="boxed_heading center" style="margin-top: 10px;">
  <div class="top-corner"><div class="corner-left-top" style="background-color:#6cbbd2;"></div><div class="corner-right-top" style="background-color:#6cbbd2;"></div><div class="corner-left-bottom" style="background-color:#6cbbd2;"></div><div class="corner-right-bottom" style="background-color:#6cbbd2;"></div></div>  <div class="blue_heading_inner">Which folder do you drop into?</div>
  <div class="top-corner"><div class="corner-right-bottom" style="background-color:#6cbbd2;"></div><div class="corner-left-bottom" style="background-color:#6cbbd2;"></div><div class="corner-right-top" style="background-color:#6cbbd2;"></div><div class="corner-left-top" style="background-color:#6cbbd2;"></div></div>  </div>

<div style="padding: 20px;">
  <form name="insert_folder_form">
  <select name="folders">
  {for f in folders}
  <option value="${f.id}">${f.folder_name}</option>
  {/for}
  </select>
  <input type="button" value="Cancel" class="btn" onclick="MediaWagon.prototype.CloseDialog();" />
  <input type="button" value="Save" class="btn" onclick="Folder.prototype.InsertMedia('${media_id}');" />
  </form>
  </div>
</div>

<div class="boxed_heading center" style="margin-top: 10px;">
  <div class="top-corner"><div class="corner-left-top" style="background-color:#6cbbd2;"></div><div class="corner-right-top" style="background-color:#6cbbd2;"></div><div class="corner-left-bottom" style="background-color:#6cbbd2;"></div><div class="corner-right-bottom" style="background-color:#6cbbd2;"></div></div>  <div class="blue_heading_inner">Delete Meida from Folder</div>
  <div class="top-corner"><div class="corner-right-bottom" style="background-color:#6cbbd2;"></div><div class="corner-left-bottom" style="background-color:#6cbbd2;"></div><div class="corner-right-top" style="background-color:#6cbbd2;"></div><div class="corner-left-top" style="background-color:#6cbbd2;"></div></div>  </div>

<div class="notice">Delete from folder?<br />(The media itself won't deleted</div>

<table border="0">
  <tr><td style="font-weight:bold;padding:10px;">
  {for p in media}
  "${p.title}"
  {/for}
  </td></tr>
  </table>

{if total>0}
  Comments <b>${(start+1)}</b> - <b>${stop}</b> of <b>${total}</b> [
  {if order=="DESC"}
  <b>MSG_DISPLAY_NEWER</b> | 
  <a href="#" onclick="Blog.prototype.config.comment.order='ASC';Blog.prototype.ViewComment(0);return false;">MSG_DISPLAY_OLDER</a>
  {else}
  <a href="#" onclick="Blog.prototype.config.comment.order='DESC';Blog.prototype.ViewComment(0);return false;">MSG_DISPLAY_NEWER</a> | 
  <b>MSG_DISPLAY_OLDER</b>
  {/if}
  ]
  ${pagenate}
  {for o in comments}
  <div class="each_comment">
    <div class="comment_header">
    ${o|show_icon}
    ${o.comment_title}  by
    {if o.comment_user_name==o.comment_user_alias}
      <a href="http://${o.comment_user_name}.mw.aimy.jp">${o.comment_user_name}</a>
    {else}
      ${o.comment_user_alias}
    {/if}
    {if o.comment_url}
    <a href="${o.comment_url}" target="_blank"><img src="http://static.aimy.jp/images/link.gif" /></a>
    {/if}

- ${o.created_at}
    {if o.enable_delete}
      <a href="#" onclick="Blog.prototype.DeleteComment('${o.id}','entry'); return false;">Delete</a>
      {if o.visible_mode==MEDIA_VISIBLE_PRIVATE}
      | <a href="#" onclick="Manage.prototype.MakeCommentPublic('${o.id}','blog'); return false;">Public</a>
      {elseif o.visible_mode==MEDIA_VISIBLE_PUBLIC}
      | <a href="#" onclick="Manage.prototype.MakeCommentPrivate('${o.id}','blog'); return false;">Private</a>
      {/if}
    {/if}
    </div>
    <br />
    ${o.comment_body}<hr />
  </div>
  {/for}
{else}
no comment to this entry{/if}

ニュースブログ

Profile

Archive

Tags

Favorites

Atom

Friends

QR Code