'JQuery' Tag

クリッカブルマップを正確な座標点で作成する方法

main_catch

不動産系のサイトや、求人媒体系のサイトでよく見かける、地図画像上の県や地域毎にリンクを設定して、オンマウスで該当範囲が切り替わるアニメーションを今回は作成して行こうと思います。※今回の記事はアドビの画像編集ソフトをフル活用いたします。主にフォトショップ(イラストレーター・ファイヤーワークスでも可)を使用致しますので該当ソフトが無い方は申し訳ありません。

まずは下のサンプルを御覧ください、それぞれの県の上でオンマウス時に画像が切り替わっていると思います。


このサンプルの地図のように「四角」で区切られたリンク領域であればドリームウィーバーで完結出来てしまいますが、例えばディフォルメされていない正確な地図にクリッカブルマップを作成したい場合などに力を発揮することができます。それでは早速作成手順の紹介です!!

フォトショップ等で地図として使用したい画像の作成

画像は2枚必要になります。

img_sample
元画像
img_on_sample
オンマウス用画像

上記2点です。地図を作成する際、最終的にリンクにしようと思っている範囲は必ず「パス」でシェイプとして作成しておいて下さい。オンマウス時と通常時を別フォルダで作成しておくと良いかと思います。

Photoshopの拡張パネル「ClickableMapPanel」をダウンロード

吉本 集(よしもと つどい)さんが作成されたフォトショップの拡張パネル「ClickableMapPanel」をダウンロードしてご自身のPCのフォトショップに追加して下さい。追加方法、使用方法は吉本さんの記事を参考にされて下さい。(※CS6でしか確認できていないというお話みたいですが、CS5でも問題なく動作致しました)

ファイヤーワークスを使用する方はコチラ
イラストレーターを使用する方はコチラ

>

フォトショップから取得した座標点をhtmlに記述

このサンプル地図の場合、「shape=”poly”」よりも「shape=”rect”」の方が、確実に良いのですが「ClickableMapPanel」でパスから取得すると四角だろうが丸だろうが、「shape=”poly”」になります。

<img src=”img/kyusyu_map.png” usemap=”#shape1″>
<map name=”shape1″>
<area shape=”poly” coords=”143,40,264,40,264,114,143,114″ href=”#fukuoka”>
<area shape=”poly” coords=”107,40,139,40,139,135,107,135″ href=”#saga”>
<area shape=”poly” coords=”71,40,103,40,103,135,71,135″ href=”#nagasaki”>
<area shape=”poly” coords=”144,119,196,119,196,264,144,264″ href=”#kumamoto”>
<area shape=”poly” coords=”200,119,264,119,264,190,200,190″ href=”#oita”>
<area shape=”poly” coords=”200,194,264,194,264,264,200,264″ href=”#miyazaki”>
<area shape=”poly” coords=”143,268,264,268,264,343,143,343″ href=”#kagoshima”>
<area shape=”poly” coords=”48,264,94,264,94,339,48,339″ href=”#okinawa”>
</map>

クリッカブルマップ自体は上記で完成です。指定した範囲でリンクが貼られていると思います。ここから「jquery.imagemapster.js」を使用してオンマウス時に画像を切り替えて行きます。

「jquery.imagemapster.js」を使用して画像置換

クリッカブルマップの画像置換は<a>と違って少し面倒です、ですが「jquery.imagemapster.js」を使用することで、通常時とオンマウス時の2枚を用意するだけで良くなり非常に楽です。配布元からファイルをダウンロードされて下さい。ダウンロードが完了したら、<head>内に読み込みましょう。「jquery.imagemapster.js」はJQueryベースなので必ずJQuery本体と一緒かつJQuery本体より後に読み込みをして下さい。

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”js/jquery.imagemapster.js” type=”text/javascript”></script>

読み込みが完了したら下記のコードを外部JSファイルか、<script&gtタグで<head>内に記述されて下さい。

$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
render_highlight : { altImage : ‘img/kyusyu_map_on.png’ },//ここに置換対象の画像のファイルパスを記述
mapKey: ‘region’,
fillOpacity: 1 //塗りつぶし透明度
});
});

続けて、htmlの記述です。先程クリッカブルマップの設定をした該当ソース部分を下記の内容に改修します。

lt;img src=”img/kyusyu_map.png” usemap=”#shape1″ id=”shape1″>
<map name=”shape1″>
<area shape=”poly” region=”福岡” coords=”143,40,264,40,264,114,143,114″ href=”#fukuoka”>
<area shape=”poly” region=”佐賀” coords=”107,40,139,40,139,135,107,135″ href=”#saga”>
<area shape=”poly” region=”長崎” coords=”71,40,103,40,103,135,71,135″ href=”#nagasaki”>
<area shape=”poly” region=”熊本” coords=”144,119,196,119,196,264,144,264″ href=”#kumamoto”>
<area shape=”poly” region=”大分” coords=”200,119,264,119,264,190,200,190″ href=”#oita”>
<area shape=”poly” region=”宮崎” coords=”200,194,264,194,264,264,200,264″ href=”#miyazaki”>
<area shape=”poly” region=”鹿児島” coords=”143,268,264,268,264,343,143,343″ href=”#kagoshima”>
<area shape=”poly” region=”沖縄” coords=”48,264,94,264,94,339,48,339″ href=”#okinawa”>
</map>

これで完成となります。ただし、IE8以下はオンマウス時に画像が出てこず、IEお得意の黒のベタ塗りがされてしまいます。

IE8以下への対応

IE8以下を切り捨てるなら必要ないですが、実務レベルでそれは中々難しいと思われます。今回自分の知っている当該現象の解決方法を試してみたのですが、
■jquery.belatedpng.jsの使用
■AlphaImageLoaderの記述
共にダメでした・・・。苦肉の策としてIE8の時は画像置換をせず半透明のカラーを上乗せすることにしました。具体的な記述としては、

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();

if (appVersion.indexOf(“msie 8.”) != -1) {//IE8の時
$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
mapKey: ‘region’,
fill: true, //塗りつぶし
fillColor: ’00b4ff’, //塗りつぶしカラー
fillOpacity: 0.5 //塗りつぶし透明度
});
});
} else {//それ以外のブラウザ
$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
render_highlight : { altImage : ‘img/kyusyu_map_on.png’ },//ここに置換対象の画像のファイルパスを記述
mapKey: ‘region’,
fillOpacity: 1 //塗りつぶし透明度
});
});
}<

上記でIE8でもふんわりとオンマウスの切替が可能となります。IE8以下に関しては、「msie 8」を「msie 7」「msie 6」に変更して条件分岐をorでつなぐか、elseifで分岐を増やして頂ければ可能なはずです。

IE8に対応させたサンプルはコチラです。是非IE8でご確認下さい!

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

webフォントとjquery.typist.jsを使ってRPG風のテキスト効果を作成する方法

maincatch

先週の記事サンプルで作っていたRPG風のテキスト効果を作成する方法をご紹介いたします。

作成準備

使用するファイルを下記からダウンロードされて下さい。

使用するフォント:8×8 ドット日本語フォント「美咲フォント」
使用するJQueryプラグイン:jquery.typist.js

webフォントの使用方法は先週の記事を参考にされて下さい。

JQuery本体とjquery.typist.jsの読み込み

ダウンロードが完了したらJQuery本体と「jquery.typist.js」のhtmlへの読み込みです。

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”js/jquery.typist.js”></script>

例のごとく、必ずJQury本体は「jquery.typist.js」より先に読み込みをして下さい。

HTMLの記述

<div id=”wrap”>
<div id=”text_wrap” class=”myWebFontClass”>
<div id=”text_wrap_inner”></div>
</div>
</div>

CSSの記述

body{
 height:100%;
 background-color:#000;
margin: 0;
padding: 0;
position: relative;
min-width: 600px;
min-height: 400px;
}

#wrap{
 color:#fff;
margin: -200px 0 0 -300px;
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
border-radius: 15px ;
 -moz-border-radius: 15px ;
 -webkit-border-radius: 15px ;
 border:3px solid #fff;
}

#text_wrap_inner {
 margin:30px 30px 0 30px;
}

今回は画面の真ん中に角丸のBOXを作成しテキストを表示さていますので、少しCSSの記述が多いですが適宜作成されたい状況に応じて変更されて下さい。

javascriptの記述

jQuery(function($){
$(‘#text_wrap_inner’)//文字列を表示させたい要素
.typist({ speed: 12 })
.typistAdd(‘※どこからともなく声が聞こえる「おお…ニワカモノよこんなところであきらめるとはなにごとじゃ。もういちどそなたにチャンスをあたえよう」。\n’);
});

上記のコードを外部ファイルまたはHTML内部に<script>で記述されて下さい。これでOKとなります。

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

別のワードプレスでは動作したのに、今はJQueryが動かないという時の対処法

main_catch

「あれ!?前に別のワードプレスに組み込んだ時は動作したのに、今回はJQueryが動かない」という時の対処法!!ほぼ同じ環境下のWPサイトで、全く同じ記述してるのに片方は動いて片方は動かない・・・という時の対処法です。ケースバイケースだとは思いますが、この記事が皆さんのお役に立てたら嬉しい限りです。

念の為にワードプレスでJQueryを使用するときの注意点

ワードプレス内でJQueryを使用するには$をJQueryに変えなきゃいけないというお約束が存在します。
例えば、

$(function(){
$(‘.toTop’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});

上記はJQueryを使用してページ内リンクのスムーススクロールを実装するコードです。ワードプレス以外で使用する場合はこのままの記述で問題ありませんがワードプレスサイトでこのままの記述だと動かなくなってしまいます。これをワードプレスで使えるようにするには

jQuery(function(){
jQuery(‘.toTop’).click(function () {
jQuery(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});

と書き換えなければなりません。恐らくこの記事に辿り着いた方は「そんな事は百も承知だ!!」という方々だと思われますが、念の為・・・。

$をJQueryに変更もしている、なのに動かない場合

こうなってしまうと気が滅入ってしまいますよね・・・。しかも筆者の場合、記事タイトルの様に異なるワードプレスサイトで片方は動いて片方は動かないという状況だったので、なおさら頭を抱えました・・・。ただ同一コードで片方は動いて片方が動かないなんてコンピューターの世界であり得るわけがないと思い、2サイトのソースの差分を探しました。

wp_head()で読み込まれるJQuery本体に差分発見!!

自分でCDNなんかでJQueryを読み込んでいたのですが、キチンと動作する側はwp_head()で読み込まれるファイル群にJQuery本体が無く、動いてくれない方は読み込まれるファイル群にJQueryが含まれていました。早い話、動かない側はJQueryを二回読み込んでいた(しかも違うバージョン)そりゃ動かないですよね・・・。

wp_deregister_script()を使い、wp_head()で読み込まれるJQueryを削除する

下記のコードを組み込むことでJQueryの二重読み込みを避ける事ができます。ひとまずは、このコードで一旦は解決しました。ですがIE8でページを閲覧するとまた別の問題が発生してしまいました。

<?php wp_deregister_script(‘jquery’); ?>
<?php wp_head(); ?>

wp_head()で読み込まれていたプラグイン関連がIE8と相性が悪かった

wp_head()は使用しているプラグイン関連のファイルをを使っていないページでも読み込みます。今回作成していたサイトはlightBox2のプラグインを使用していたのですが、どうやらIE8ではlightBox2で使用しているライブラリ「prototype.js」がlightboxを使用していないページでエラーを起こしていたらしく、lightBoxを使用していないページはprototypeを外す必要性が出てきました。

<?php wp_deregister_script(‘jquery’); ?>
<?php wp_deregister_script(‘prototype’); ?>
<?php wp_head(); ?>

と記述すればもちろんprototypeの除外は出来きますがそうするとlightBoxを使いたいページでもprototypeが読めなくなってしまう。それは非常に困るので、条件分岐でprototypeが必要な所だけ呼び出せるように改良しました。筆者の場合特定のカテゴリのみ使用していたので

<?php
global $post;
$post_id = $post->ID;
$post_cats = get_the_category($post_id);
$post_cat_id = $post_cats[0]->cat_ID;
$post_cat_parent = $post_cats[0]->category_parent;
?>

//中略

<?php wp_deregister_script(‘jquery’); ?>
<?php if ( !($post_cat_id == lightboxを使うカテゴリID) || !($post_cat_parent == lightboxを使うカテゴリID) || !(cat_is_ancestor_of( lightboxを使うカテゴリID , (int)$post_cat_id ))) { ?> <?php wp_deregister_script(‘prototype’); ?>
<?php } ?>
<?php wp_head(); ?>

とすることでIE8での問題も解決しました。この記事が皆様のお役に立てることを願っています。

このようにニワカソフトでは日々新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

JQueryを使用して色々な図形で画像にマスクをかける方法

main_catch

JQueryを使用して色々な図形で画像にマスクをかける

画像を円形やらで切り抜いてwebページに表示させる場合、普通はフォトショップなどを使って加工してページに表示させると思いますが、今回はJQueryを使って画像にマスクをかける方法をご紹介します。元ネタはコリスさんのこちらの記事になります。

使用する画像の準備

画像は全部で3枚必要になります。全て同じサイズで作成します。今回のサンプルは円形で作成しますが、三角でも星形でも何でもいけちゃいます!!

img_sample
元画像
サイズ:310×310
on_sample
マスク用画像(※透過PNG画像)
サイズ:310×310
hover_img_sample
オンマウス用画像(※透過PNG画像)
サイズ:310×310

HTML,CSS,コーディング

HTML

JQueryを使用しますのでにJQuery本体を読み込んで下さい

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

ロールオーバーとマスク用に2つの空span要素を元画像の上に配置します。

<a href=”#” class=”item”>
<span class=”rollover”></span><!–hover用のspan–>
<span class=”gallery-shadow”></span><!–マスク用のspan–>
<img src=”images/sample.jpg”/>
</a>

CSS

ロールオーバーとマスク用の画像は、それぞれの背景画像として指定(※画像のサイズは適宜変更されて下さい)

a img {
border:none;
}

a.item{
position:relative;
display:block;
height:310px;
width:310px;
float:left;
}

a.item .gallery-shadow{
display:block;
position:absolute;
top:0%;
left:0%;
width:310px;
height:310px;
background:url(images/gallery-shadow.png);
}

a.item .rollover{
display:block;
position:absolute;
top:0%;
left:0%;
width:310px;
height:310px;
background:url(images/gallery-rollover.png);
}

ここまで書くと想像しやすいと思いますが、イメージとしてはこんな感じです。フォトショ・イラレのレイヤーと同じ感覚だと思って頂いて問題ありません。

image

JavaScript

下記コードをhead内または外部jsで記述(※必ずJQuery本体の読込みより後で記述して下さい)

$(document).ready(function(){
$(“.rollover”).css({‘opacity’:’0′});
$(‘#gallery a.item’).hover(
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 1);
},
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 0);
}
)
});

完成サンプル

a1180_017023

IE8以下への対応

JQueryのfadeはIE8以下のverでは挙動がおかしくなります。IE8だけではありますが、対処法を下記に追記しておきます。

jQuery.belatedPNG.jsを使う

jQuery.belatedPNG.jsを使用することでIE8で透過png+fadeを使用できるようになります。(jQuery.belatedPNG.jsは正確にはIE6に透過pngを理解させる物になります。IE8は普通に透過pngは使用できるのですが、JQueryのfadeと組み合わせると不具合を起こすんです・・・)配布元

fadeの効果をやめる

これが一番手っ取り早いです。(笑)ただ、フェードアニメーションが無くなるので少しさみしくなります・・・。

フェード効果なしJavaScript

$(document).ready(function(){
$(“.rollover”).css({‘opacity’:’0′});
$(‘#gallery a.item’).hover(
function() {
$(this).find(‘.rollover’).stop().fadeTo(0, 1);
},
function() {
$(this).find(‘.rollover’).stop().fadeTo(0, 0);
}
)
});

ハイライトされている5,8行目が元々のコードとの差分がある所になります。

完成サンプル2(フェード効果無)

a1180_017023

ワードプレスの記事のアイキャッチ等にこの手法を使えば、画像処理の出来ないお客様でも画像の加工を行うことが可能になります。このように、ニワカソフトでは様々な手法を駆使しお客さまにとって最善なホームページのご提案を致しております。ホームページの新規作成・リニューアル等をお考えの際はぜひ、ニワカソフトにおまかせ下さい!!

【JQuery】リピート表示させた背景画像をエンドレスでスライドさせる方法

top_catch

JQueryを使用し背景画像を横にスライドさせる方法

今回はJQueryの記事になります。まさに、上のメインキャッチでやっているのですが、リピート表示させた背景画像をエンドレスで動かしたいなと思いネット上で探してみました。するとツーブロッカさんの記事が見つかりましたのでこちらを参考にスクリプトをいじってみました。

オーソドックスな横移動パターン

まずは、htmlとcssから成形していきます。JQueryを使用しますので<head>内にJQuery本体を読み込んでおいて下さい。verは1.7.2以外を試してないですが、これ以降のverであれば問題無いかと思われます。

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

動く背景を導入したい箇所に下記のHTMLを記述して下さい。

<div id=”sample01″>&nbsp;</div>

そしてCSSの記述

#sample01{
background-image:url(ファイルパス);
background-repeat:repeat;
}

上記で準備OKです。それでは、JSの記述です。画像のサイズ等は適宜環境に合わせて変更してくださいね!。外部JSファイルまたは、<head>内に<script>タグで記述されて下さい。※外部ファイルとして読み込むパターンでも<head>内に書き込むパターンであっても必ずJQuery本体を読み込んだ後に記述されて下さい。

$(function(){
$(“#sample01”).css(“background-position” , “0% bottom”);//横に流したい=Xの値を動かすため、Xの値にあたる部分を「0%」としています。
var scrollSpeed = 1;//px 移動する量
var imgWidth = 500;//画像の幅
var posX = 0;//背景のスタート位置(この後の記述でこの変数posXの数値が増加する事で背景画像の移動が可能となります)
setInterval(function(){
if(posX >= imgWidth){ posX = 0; }//変数posXの値が画像の横幅の数値まで増加したらposXの値を0に戻す
posX += scrollSpeed;//posXの値に、scrollSpeedの値を足していく
$(“#sample01”).css(“background-position” , posX + “px bottom”)//上でどんどん増加するposXをbackground-positionの横位置に挿入
} , 50);//移動スピードを変更したい時はこの「50」の数値を増減させる
});

上記スクリプトの詳しい解説はツーブロッカさんの記事でされているのでコメントアウトの内容を付け足すだけにしています。ちなみに完成図はこちらのサンプル01です。

縦方向に移動させるパターン

では今度は縦方向に移動させてみようと思います。HTMLとCSSの記述は基本的にはsample01と同じです。

HTML

<div id=”sample02″>&nbsp;</div>

CSS

#sample02{
background-image:url(ファイルパス);
background-repeat:repeat;
}

javascript

$(function(){
$(“#sample02”).css(“background-position” , “left 0%”);//縦に流したい=Yの値を動かすため、Yの値にあたる部分を「0%」としています。
var scrollSpeed = 1;//px 移動する量
var imgHeight = 242;//画像の高さ
var posY = 0;//背景のスタート位置
setInterval(function(){
if(posY >= imgHeight){ posY = 0; }//変数posYの値が画像の横幅の数値まで増加したらposYの値を0に戻す
posY += scrollSpeed;
$(“#sample02”).css(“background-position” , “left ” + posY + “px”)//上でどんどん増加するposYをbackground-positionの縦位置に挿入
} , 50);
});

縦方向の移動なのでbackground-positionの縦位置を増加するように変更するのと、変数posYのリセットする値を画像の高さに変更する位で元々のスクリプトからさほど変更点はありませんが、これで縦方向に移動するようになります。完成図はこちらのサンプル02です。

繰り返しをしていない画像を横方向に移動させる

このスクリプトを扱いながら、動物が歩いて横切って行くような事も可能だなと思い作ってみました。

HTML

<div id=”sample03″>&nbsp;</div>

CSS

#sample03{
background-image:url(ファイルパス);
background-repeat:no-repeat;
}

javascript(※前半部)

$(function(){
$(“#sample03”).css(“background-position” , “0% bottom”);//横移動なのでXの数値を0%に
var scrollSpeed = 1;//px 移動する量
var acrossWidth = 500;//横切らせたい要素の幅
var posX = -132;//背景のスタート位置

一旦ここで解説します。このサンプル03ではこちらの猫さんushi-aruku-bannerを横切らせています。画像のサイズは132×65です。今回は今までのサンプルと違いリピートしていない画像を横移動させる事が目的となります。

なので変数acrossWidthには「横切らせたい要素の幅」が入ります。ここに画像の横幅を指定してしまうと当たり前ですが横切ってくれないです。そして変数posXには画像の横幅分を引いた-132を代入しています。これは、猫さんがノソノソ~っと頭から現れるのを表現したかった為この数値が代入されています。もしページを表示させた当初から表示されていても問題なければ0を代入していても構いません。それでは続きのスクリプトです。

javascript(※後半部)

setInterval(function(){
if(posX >= acrossWidth){ posX = -132; }//posXがacrossWidthの値になった時画像の横幅を差引いた分の位置に戻す
posX += scrollSpeed;
$(“#sample03”).css(“background-position” , posX+”px bottom”)
} , 50);
});

ここで重要になるのは2行目の「if(posX >= acrossWidth){ posX = -132; }」になります。ここはサンプル1、2でもコメントで解説していますが、posXがacrossWidthの値になった時という条件文です。今までと同じように「if(posX >= acrossWidth){ posX = 0; }」と記述してしまうと、猫さんが指定された範囲を横切り終わった時に突然左端に現れてしまいます。できれば自然な感じで猫さんには頭から徐々に現れて欲しいので画像の横幅分を差引いた分をposXには代入しています。ではこのスクリプトの全体像です。

javascript(※全体像)

$(function(){
$(“#sample03”).css(“background-position” , “0% bottom”);//横移動なのでXの数値を0%に
var scrollSpeed = 1;//px 移動する量
var acrossWidth = 500;//横切らせたい要素の幅
var posX = -132;//背景のスタート位置
setInterval(function(){
if(posX >= acrossWidth){ posX = -132; }//posXがacrossWidthの値になった時画像の横幅を差引いた分の位置に戻す
posX += scrollSpeed;
$(“#sample03”).css(“background-position” , posX+”px bottom”)
} , 50);
});

完成図はこちらのサンプル03です。いかがでしょうか?静止画より少しだけ楽しげになりませんか?今後もニワカソフト一同日々勉強してニワカソフトで提供できる物の可能性を広げてまいります!!

カテゴリ:TOPIC

« | »