スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

マウスのクリックで写真の位置を切り替える業

<
 文章のなかに float:right; とフロート属性で配置した写真を、マウスのクリックで切り替えることができないかといろいろと試してみた。
 スクリプトは、フロートで右に配置した画像を左に移動するスクリプトを次のように指定したが動かない。
    this.style.float='left';
 ネットで調べてみると、スクリプト中でフロート属性を切り替えるときは、style.floatではなくて、IEでは style.styleFloat 他のブラウザーでは cssFloat としてstyleを入れてやる必要があるようだ。

 この右側にフロート属性で配置された平尾台のサイヨウシャジンの写真をクリックするとクリックごとに左右に移動できるようにしました。

 スクリプトは以下です(IE用)

onclick="if(this.style.styleFloat=='right')
{this.style.styleFloat='left';}
else{this.style.styleFloat='right';}"

 スクリプトの構造は、もしフロート属性が右に指定されていたら、フロート属性を左にしてください。そうでなければ、右に変えてください、という風になっています。

 あまり具体的な利用法は考えつきませんが、スタイルによってレイアウトが切り替わる様子がわかりやすいかもと思いまして作ってみました。

 実際に記述したスクリプトはスクリプトは、safariやfirefoxでも動作するように以下のように記述した。

onclick="if(document.all){if(this.style.styleFloat=='right'){this.style.styleFloat='left';} else {this.style.styleFloat='right';}}else{if(this.style.cssFloat=='right') {this.style.cssFloat='left';} else {this.style.cssFloat='right';}}"


コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。