cssに関する質問です。

下記2点の実装方法があれば教えてください。
1.src属性をcssで設定
→cssの切り替えで、画像の表示を制御したい
2.onclick属性をcssで設定
→cssの切り替えで、クリック時の挙動の違いを制御したい
#実装イメージ
*css
img#image{
src:url(img/hello.png);
onclick:"alert('hello');";
}
img.#image.bye_mode{
src:url(img/bye.png);
onclick:"alert('bye');";
}
*js(jquery)
$("#image").toggleClass("bye_mode");

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2011/11/27 10:30:28
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント200pt

CSSではできない。
(昔のIEならexpressionでスクリプト実行できた)
Sass,LESS,Closure StylesheetsのようなCSSを拡張したメタ言語を自分で作るしかないと思います。
(JSでやったほうが早い)

id:puriketu99

回答ありがとうございます。

2011/11/27 10:30:32
id:puriketu99

あきらめてjsでがんばります

2011/11/27 11:06:11
  • id:puriketu99
    jsによる実装方法はわかります。
    存在しなければ、”存在しない”という回答でも結構です。
  • id:hedachi
    たぶんどっちも存在しないと思う。
    (CSSでbackground-imageの指定はできるから、src属性の切り替えにこだわらなければcssの切り替えで画像の切り替えはできるけど)

    仮に存在したとしてもCSSで行うべきことではないと思うけど、何か特殊な事情があるんだよねきっと。
  • id:puriketu99
    コメントありがとうございます。

    background-imageだと、手持ち画像のサイズが一発で合わなかったから、とりあえず質問に逃げた(どこかしらサイズを調整すれば解決する問題だが数が多いので割と手間)。

    cssで変化前と変化後を静的なファイルとして用意して、それらをjsで切り替えるような実装に統一すると、次のような嬉しいことがある。内容はかぶってる。

    1.修正が楽
    cssは直接見た目を編集することができるが、jsは該当の箇所を選択して(あるいは切り貼りして)走らせないと確認ができない

    2.jsの記述量が減る
    jsの領域を小さくできるので、可読性があがり、バグが入り込みにくくなる
    属性をjsでコントロールしようとすると、めんどくさい。

    3.修正できる人が増える
    jsがあまりできない人にも管理を任せることができる

    ちなみに、この実装は、facebookの左上の通知ボタンを押したときに出てくる小窓みたいな奴で使われている。なるべくこの実装に統一したかったからこの質問をしたんだけど、cssでコントロールできない領域は仕方ないからjsで制御することになると思う。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません