リンク先をポップアップで表示させたいっす。

Rails2.1 JavaScript

Aタグをマウスオーバーするとリンク先のプレビューが見られるようになったら楽しいかなーって軽い気持ちで調べ始めた。
URLの登録は行いたくない。helperとかの改造でもOKなんだけど例が見つからない。
　
調べた結果としてはarc90 lab : tools : Link Thumbnailが良さそう。
　
良さそうな点

  • リンク先を登録しなくてOK
  • JavaScriptを導入するだけ
  • プレビューさせたいAタグにクラスを追加するだけ

　

手順

導入メモ

１：ダウンロード
arc90 lab : tools : Link Thumbnailの「Download」アイコン

  • arc90_linkthumb.js
  • example.html
  • linkpic_shadow.gif

　
２：Railsに貼り付け

  • public/javascripts/linkthumb/arc90_linkthumb.js
  • public/images/linkthumb/linkpic_shadow.gif

　
３：スタイルシート
example.htmlに書かれているスタイルシートをcssファイルに貼り付ける

  • public/stylesheets/linkthumb/linkthumb.css
.arc90_linkpic {
	display: none;
	position: absolute;
	left: 0;
	top: 1.5em;
	width: 160px;
	height: 120px;
}
.arc90_linkpicIMG {
	padding: 0 4px 4px 0;
	background: transparent url(#{RAILS_ROOT}/public/images/linkthumb/linkpic_shadow.gif) no-repeat bottom right;
	width: 160px;
	height: 120px;
}


４：ヘッダにパスを貼り付ける
app/views/layouts/hoge.html.erb

<%= stylesheet_link_tag 'linkthumb/linkthumb', :media =>'screen' %><%= javascript_include_tag 'linkthumb/arc90_linkthumb' %>

　
５：Aタグにclassを追加
「class="linkthumb"」を追加する。
　
　
　
動いてから気がついた。

  • リンク先は一般のサイトしかできない（ローカルでしか公開していないサイトはプレビューできない）
  • プレビューの画像は他所様が作成したものを表示しているだけ

　
自前で画像を作成しないと解決できない。

うーん、どうしよっか？