[B! javascript][画像] takami_hirokiのブックマーク

takami_hiroki id:takami_hiroki

javascriptと画像に関するtakami_hirokiのブックマーク (2)

HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
takami_hiroki 2012/02/15
javascript

html5

画像
リンク
画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About
画像の上に文字や入力フォームなどを重ねて表示させたいと思ったことはありませんか？例えば、図のような画像の看板部分にぴったり合うように文字を表示したい場合などです。画像の上に重ねて文字を表示したい場合でも、1枚の画像を細かく分割して掲載したり、table要素を駆使したりする必要はありません。CSS(スタイルシート)を使えば、1ピクセル単位で表示位置を微調整して、簡単に画像の上に文字を重ねることができます。今回は、ウェブページ上に掲載した画像の上に、文字や入力フォームなどの任意のオブジェクトを重ね合わせて表示する方法をご紹介いたします。HTML＋CSSだけの簡単な方法です。画像の上に文字やオブジェクトを重ねる例今回ご紹介する方法を使えば、以下のような重ね合わせ表示が作れます。ここでは例として、画像の上に文章を重ねたり、画像の上に選択フォームを重ねたり、画像の上に枠付きのキャプションを
takami_hiroki 2010/10/20
html

css

画像

JavaScript
リンク
1