ファビコンからリンクの色とアイコンを作成する

最近、テキスト内のリンクをフォーマットするための興味深いJSライブラリに出会いました。 アイデアは新しいものではないかもしれません...しかし、全体としてそのようなスキームは私にとって興味深く、ユーザーフレンドリーなようです。







一番下の行は、それが導くサイトのファビコンがスクリプトでリンクに追加されるということです。 また、さまざまなタイプのリンクがさまざまな色で強調表示されます。







より詳細に説明すると、テキスト内のリンクが作成されます。

• リンクがつながる場所に応じて異なる色（スタイル）...内部リンク、サブドメインへのリンク、外部、アンカー、または電子メールアドレスへのリンク。 ユーザーは、リンクを指さなくても、自分の行く先をすぐに見ることができます。
• また、タイプに応じて、リンクの前にアイコンが追加されます。
  
  -内部リンクとサブドメインの場合-定義済みの画像。 または、リンクがファイルにつながる場合は、ファイルタイプアイコン。
  
  -外部リンクの場合-リンク先のサイトのファビコンアイコン。 リンクのホストはファビコンです。そうでない場合、画像はデフォルトになります。 ファビコンが認識可能な場合、宛先サイトはすぐにわかります。 例えば Yandexまたは google 。
  
  -ファイルリンクの場合、対応するファイルアイコン。 拡張機能のセットとそれに対応するアイコンを持つ配列があります。 もちろん、ファイルへの直接リンクでのみ機能します。
  
  -メールリンクとアンカーには独自のアイコンもあります。
  
  

スクリプト

例



使用するには、ページにjsファイルを含めるだけです。

1. < script type ="text/javascript" src ="http://oopstudios.com/dlink/dlink.js" ></ script >
   
   
   
   

「dlink」クラスを使用して、ブロックに目的のテキストを追加します。

1. < div class = "dlink" >
2. あなたの<a href = "#">リンク< / a >テキスト...
3. </ div >

さまざまなタイプのリンクのスタイル：

1. a.internal {color：＃D47700;}
2. a.external {色：＃0074D4;}
3. a.subdomain {color：＃D43500;}
4. a.email {色：＃00B235;}

原則として、このようなものを自分で簡単に作成したり、サイト上のさまざまな種類のリンクの画像を追加してこのスクリプトを変更したりするのは簡単です。 たとえば、ニュースやユーザープロファイルへのリンク。

サーバー上でこのようなことを行う方がおそらく簡単だと思いましたが、外部リソース上のファビコンの存在を確認するとき、答えが非常に長くなる可能性があるという問題があります。 この点で、クライアントでの実装は問題を引き起こしません。