CSS：オンマウス（hover）で画像をフェードする | design EdgeCSSの opacityと transitionを使用して、オンマウス（hover）した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。 CSSを使用すれば、リンクの設定された画像にオンマウスした時に画像をゆっくり透過（フェードイン）できますが、マウスアウトした時にフェードアウトする方法です。 HTMLのソースは以下の通りです。 HTML
jQuery でイメージマップ：ほんっとにはじめてのHTML5 サンプル
jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる このサンプルは、jQueryベースの「ImageMapster」というプラグインを使っています。 画像を最低2種類（ノーマル、ロールオーバー用）だけ用意すれば良いので簡単です。 「九州」のみ、リンクを外部サイトにしています。（他はこのページの下部にリンク） ★イメージマップは本来「target="_blank"」が設定できますが、「ImageMapster」を使うと無効になるようです...。 サンプルを修正しました（2013年4月） このサンプルは「リンクできない」というご指摘をいただき、ソースを修正しました。 ご迷惑をおかけした方々、申し訳ございませんでした。 解決のソースを送信してくださった中村様、ありがとうございました！！ 以前のソースはこちら。 ロールオーバーで japan2.gif
jQueryを使った画像のロールオーバー
まさに車輪の（以下略）なんですが、 jQuery使う事最近多い jquery_auto.js（リンク先なくなってる！）やyuga.jsを使うまでもない時もある という事でなんとなしに書こうと思った。 こうだったらいいなと思ったこと シンプル 拡張子の文字数にかかわらずに動く input type="image"でも動く コード /** * rollOver on jQuery * rollOver tag:img,input * rollOver class:Over * rollOver FileName:*_o.* * Last modify:20081210 * Licensed:MIT License * @author AkiraNISHIJIMA(https://nishiaki.probo.jp/wp/) */ function rollOver(){ var preLoad
kojilow Blog | ナビゲーションをフェードで切り替え
画像でのナビゲーションをフェードで切り替えるのに以前はプラグインとか使っていたけど、最近は自分で作るので備忘録としてメモ。 まずナビゲーション部分のHTML。 <!– navi –> <ul id="navi"> <li class="navi01"><a href="#"><img src="/sample/fadenavi/imgs/navi-01.gif" width="120" height="30" alt="Navigation1" /></a></li> <li class="navi02"><a href="#"><img src="/sample/fadenavi/imgs/navi-02.gif" width="120" height="30" alt="Navigation2" /></a></li> <li class="navi03"><a href="#"><i
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社
ロールオーバーすると滑らかに画像が切り替わるライブラリ ボタン・リンクのロールオーバー効果を表現する際、CSSやJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。（※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。） 動作サンプル このライブラリは、JPEG・GIF・透過PNGに対応しています。 JPEG/GIFの場合 透過PNGの場合 InternetExplorer6～8のPNG対応について InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様で
Image Rollover Borders That Do Not Change Layout
It’s a fact of CSS life that the ‘border’ of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn’t already have a border of that exact size, you will cause a layout shift. It’s one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward. (qu
[JQuery] ロールオーバーをinput要素にも対応させる | F+R (FplusR)
本当にこのサイトを放置していましたが、一応生きています。 MT4移行計画も準備中です。ですが忙しくてなかなかできません。 さて、本題ですが、input要素のボタンをロールオーバーさせたい案件がありまして、いろいろと調べてみました。 はじめは、「jQueryだけで画像のロールオーバーを実装する方法」を参考にしていましたが、Image Rollover Codeに慣れた身に関しては、個別にファイル名を記載してプリロードさせるやり方はやはり面倒です。クラスを割り当てて、特定のファイル名を記述するとロールオーバーを勝手にやってくれる方が、制作する方としては非常に楽です。 そこで、Easy Image Rollover Script With jQuery ~ PEPS.caのロールオーバースクリプトが、input要素にも対応しています。 ただ、このままだとおもしろくないので、すこし改良してみまし
inputのimageボタンのロールオーバー
■サンプル ■ソース <input type="image" src="img/btn.gif" value="submit" tabindex="1" onmouseover="this.src='img/btn_o.gif'" onmouseout="this.src='img/btn.gif'" /> もと画像 img/btn.gif オーバー画像 img/btn_o.gif Comments otogawa | 2007/08/30 06:43 PM ＞hamaさん buttonタグってよく見るけど、まだ使ったことないですわー。css対応など他のサイトでも便利そうに聞いてるので、今度試してみますー♪java使わなくてもオーバーできたら便利ですもんね。 hama | 2007/08/09 08:17 AM http://kikky.net/pc/css_ir.html B
How to Create an App from Scratch | AppMaster
Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f
JavaScriptメモ(３)：しんぷるロールオーバー（追記：2007.6.29） | Le Arche
一定期間更新がないため広告を表示しています
imagemap で簡単にロールオーバー | ヨモツネット
概要 地図などの img 要素に、map 要素と area 要素で imagemap を指定したとき簡単にロールオーバー効果を与えることができる JavaScript ライブラリです。 動作確認用の demo ダウンロード 使い方 画像のファイル名を目印にしてロールオーバー効果を与えることができます。 例えば、次のような XHTML のソースの断片があったとします。 <p><img src="img/map_swap0.gif" alt="地図" width="300" height="200" usemap="#imagemap" /><p> <map name="imagemap" id="imagemap"> <area shape="rect" coords="0,0,30,30" href="#area1" alt="エリア1" /> <area shape="rect"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
