タグ

javascriptとimageに関するhugudonのブックマーク (5)

  • GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」:phpspot開発日誌

    GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い

  • MOONGIFT: » JavaScriptだけで画像イフェクト「Bevel.js」:オープンソースを毎日紹介

    サイトの画像を角丸にしたり、影をつけたりするのは良くあることだ。単なる画像も、多少の変化をつけるだけで見栄えがずいぶん変わってくる。だが、一つの一つの画像にそうした変化をつけるのは面倒で、徐々にやらなくなってしまう。 そこで自動化を考えたい。とは言ってもサーバサイドではない。クライアントサイドで行うのだ。 今回紹介するフリーウェアはBevel.js、JavaScriptで画像にイフェクトを行うライブラリだ。元々Public Domainだったが、変わったようで、非営利の個人利用に限りフリーとなっている。 Bevel.jsを使うと、画像の角を丸くしたり、そこにさらに影を付けたりと言ったイフェクトをJavaScriptのみでできるようになる。ふちを暗くしたり、別な色にすることも可能だ。まるで画像編集したかのようだ。 対応しているブラウザはFirefox 1.5以上、Opera 9以上、IE 6

    MOONGIFT: » JavaScriptだけで画像イフェクト「Bevel.js」:オープンソースを毎日紹介
  • クールなスライドショーライブラリ·Galleria MOONGIFT

    画像をサイトで一気に紹介したいことがある。ただ画像のサムネイルやリンクを並べるだけでも良いが、それでは味気ない。写真や画像は見せ方次第でその印象が大きく異なる。 専用のソフトウェアを使っても良いが、もっと手軽なのはJavaScriptベースのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGalleria、JavaScriptCSSを使ったスライドショーライブラリだ。 GalleriaはjQueryを使ったスライドショーライブラリで、導入が手軽で見た目もかっこうよく仕上げることができる。デモは二つ用意されており、一つは下にサムネイルの一覧、上にクリックした画像を表示している。 二つ目は左側に一覧が、右側に大きな画像が表示される。イメージタグのtitle属性に記述した内容が表示されるので、画像ごとにメッセージをつけるのも簡単だ。マウスが当たった画像だけ明るく表示されたり、写真の切

    クールなスライドショーライブラリ·Galleria MOONGIFT
  • IE PNG Fix - TwinHelix

    IE PNG Fix 2.0 Alpha 4 This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! Full CSS background positioning and repeat are supporting (including CSS sprites). It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported. Script License Ag

    hugudon
    hugudon 2007/07/09
    IE6で透過pngを表示するhtc
  • MOONGIFT: » 秀逸!Googleマップを使って、写真を見よう「The Google Maps Image Cutter」:オープンソースを毎日紹介

    Mashupediaを運営している中で、Google Mapsを使ったMashupを度々見かける。大抵、何らかの位置情報をGoogle Maps上にマッピングするものだが、中にはGoogle MapsのAjax機能だけを取り出して、画像をオリジナルなものにすげ替えるという面白いものも存在する。 これまではへぇ、と思うだけだった。だが、これを使えば誰でも手軽にGoogle Mapsイメージビビューアーが作成できる。 今回紹介するオープンソース・ソフトウェアはThe Google Maps Image Cutter、Google Mapsをイメージビューアーにするソフトウェアだ。 The Google Maps Image Cutterの使い方はごく簡単だ。起動したら、 表示したい画像を指定する。そしてMaxの拡大レベルを指定し、Createボタンを押せばいい。拡大レベルが高ければ、生成にもそ

  • 1