人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

http://www.9031.com/scrap/のページにあるような、画像の外枠を「動く切り取り線」にするソース(素材)を紹介したページはありますか

●質問者: caster1
●カテゴリ:コンピュータ 趣味・スポーツ
✍キーワード:ソース 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● u_ra_ra
●10ポイント

http://tohoho.wakusei.ne.jp/www.htm

http://www.hajimeteno.ne.jp/

初めてのホームページ講座

http://write-off.cside.com/scripts/index.html

Write-Off!! -HTML & Scripts-

http://webtakurou.hp.infoseek.co.jp/

HTML〜Hypertext Markup Language〜

http://www2.ocn.ne.jp/~yoochan/decoration/

Decoration HTML Room

http://www5e.biglobe.ne.jp/~access_r/

ACCESS R - HTML,DHTML,CSS,JavaScript,CGI,アクセス

http://www.fureai.or.jp/~tato/DHTML/simple/content2.htm

javascript

http://www.ne.jp/asahi/minazuki/bakera/html/hatomaru

HTML鳩丸倶楽部 ☆ 水無月ばけらのHTML蘊蓄サイト

http://www2a.biglobe.ne.jp/~sunhouse/index55.htm

**************** 三姉妹 IE6専用 (Team of sunHouse)

http://members.jcom.home.ne.jp/jintrick/Personal/index.html

Personnel

HTML・CSS・DHTMLなどを取り扱っている各種サイトです。

上5つは解説も交えた分かりやすいサイトです。

それ以外は、解説も付いていますが中級者から上級者向けの凝ったテクニックを開設しているサイトです。

ホームページの作成に余り慣れていないようでしたら、まず上2つのサイトを覗いてみることをお勧めいたします。


2 ● u_ra_ra
●40ポイント

http://www.9031.com/scrap/

9031: Scrap Today

一番手っ取り早いのはご質問にあるページのソースを見ることです。

動く点線はcssとアニメーションgifにより実現されています。

gifファイル『ants.gif』をタイルのように並べて、その上に画像はいるを重ねて表示しています。

ただ単に、『画像の外枠を「動く切り取り線」』を表示させたいだけであれば、ソースのcssに関する部分<style>〜</style>の部分をまねてしまえばOKです。

あとは画像を表示した状態にして、タブブラウザなどで『選択部分のソースを表示する』機能を使って、『<DIV id=marquee style=〜</DIV>』の部分と『<DIV id=img style=〜</DIV>』の部分を見れば表示方法も分かると思います。

(marqueeがアニメーションgif部分で、imgが上に被さっている実際の表示画像です。

実際に中身を見て動作を確認いたしましたので間違いは在りません。本当はソースがどうなっているかもう少し詳しく書きたいところですが、著作的な問題も在りますのでここにソースを公開することは出来ません。

ごめんなさい

http://www20.pos.to/~sleipnir/software/sleipnir/index.html

フリーソフトウェアのタブブラウザ『Sleipnir』のホームページです。

このブラウザは『選択部分のソースを表示する』機能を持っております。

画像を表示した状態で『すべて選択』し、『選択部分のソースを表示する』とすると表示されている部分の実際のソースが見れます。

ただし、このブラウザはWindows用です。

もし、貴方がお使いのコンピュータがMacならば使用できません。

ただ、同様の機能を持ったソフトはMacにもあるはずですので、そういったソフトを利用されれば上記の作業は可能です。

◎質問者からの返答

ありがとうございました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ