2012-07-24から1日間の記事一覧

Javascriptでの画像置換

Js

html&cssの画像置換 <html> <head> <style type="text/css"> ul{ width: 800px; margin: 50px 0 0 50px; list-style: none; overflow: hidden; } li{ float: left; display: inline; } li a{ width: 160px; height: 50px; display: block; text-decoration: none; float: left; display: inline;</head></html>…

Javascriptでの画像置換２

Js

onMouseout onMouseOver ブラウザ表示 <img src="changeimg/DSCF7323_g.jpg" width="300" height="300" alt="とうきび" <!--元の画像はMouseOutと同じに--> onMouseOver="this.src='changeimg/DSCF7323.jpg'" onMouseOut="this.src='changeimg/DSCF7323_g.jpg'"> <html> <head> </head></html>

Javascriptでの画像置換3

Js

name属性 ブラウザ表示 <html> <head> <meta charset="UTF-8"> <title>thumbnailの画像変換</title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ border: none; } #container{ width: 700px; height: auto; margin: 0 auto; text-align: center; } h1{ color: #665737; font-size: 1.1em; margin: 10px 0…</meta></head></html>

Javascriptで画像置換4　ライブラリ利用

Js

ライブラリの利用 ファイルダウンロード 利用方法 ファイルをダウンロード ヘッダーにscrpt~/scriptでファイルを呼び出す 表示画像と同じディレクトリに置換用の画像を置き、ファイル名_o.拡張子にする imgタグのクラスを imgoverにする ブラウザ表示 <html> <head> <meta charset="UTF-8"> <title></title> <script src="libraryover/rollover.js" type="text/javascript"></script> </meta></head></html>

Javascript　yuga.jsライブラリ利用2

Js

ライブラリの利用 yuga.jsKyosuke.jpファイルをダウンロード。クラスを指定することで、効果が適用されるようになる。 ライブラリは、プログラムの図書館・・使いたい効果を持って来て(ファイルダウンロード)、引用する(クラスの指定)。 yugajsのライブラリ…