こんにちは。アップロードした画像に拡大画像があるときは、マウスの形状がリンクを示すポインターに変わってそれと分かるというのを意図していたのですが、その指定をこれまでインライン指定で、
style="cursor: pointer;" /* カーソルの形状をポインターに */
としていたのですが、汎用性を持たせるために、前回のアップデートでこれを削りました（テーマ側で指定できるように）。でも、肝心のクラス名がないので、これじゃテーマファイルのCSSでは指定出来ませんね。なので、拡大画像があるサムネイル画像に対しては、IMGタグ内に resized というクラス名を与えるようにしました。これで、各テーマのCSSファイルで、
img.resized, canvas.resized { /* CANVASタグにも指定（お洒落に見せる画像向け） */
cursor: pointer;
}
というのを与えれば、ポップアップのある画像に対しては、マウスの形状がそれと分かるようにリンク様に変わります。さて、このサイトではそうしているのですが、このマウスカーソルの形状を好きな画像に変えるには、
img.resized, canvas.resized {
cursor: url(Images/zoomin.cur), pointer; /* Firefox向けに2番目の指定は必須 */
}
のように指定します。指定する画像は基本的はGIFでもPNGでも何でも良いはずですが、肝心のIEが.curしか認識しないため、カーソルファイルを指定しています。Opera以外のモダンなブラウザはだいたい対応していると思います。Firefoxでは、画像以外の属性も指定しておかないと、この指定が効かないので、必ず2番の指定も忘れず付けましょう。後、OS側の要請により、カーソルファイルのサイズは32ピクセルx32ピクセルが上限です。
普段、カーソルファイルはあまり扱わないかと思うので、フリーで使えるソフトを紹介しておきます。日本語のインターフェイスにも対応しています。ドロップシャドウなども簡単に付けることが出来ますよ。
http://cowscorpion.com/Image/GreenfishIconEditorPro.html
という訳で、上記修正を施したutils.phpとphotoeffect.jsを添付しておきます。
追 記
IEでは、お洒落な画像効果を効かせた際に(photoeffect.js)、上記の指定では、マウスカーソルが指定画像にならないので、ここはクラス名.resizedの指定を以下のようにする必要がありますね。少なくともppBlogでは、resizedというクラス名は他の部分では出てこないので、まぁいいか…。
.resized {
cursor: url(Images/zoomin.cur), pointer; /* Firefox向けに2番目の指定は必須 */
}
ALL:
Comments