JavaScript + CSS Sample

はじめに

　画像をクリックするとリストを表示するJavaScriptを「君への5%」に2008年3月〜2014年4月上旬まで設定していました。このたび当該機能をCSSにて代替することにしたのですが、当該JavaScriptを単に捨てるのはもったい無いので公開します。

　とはいえ、しっかりした説明文を作るのも面倒なので、簡易な説明とソースコードそのままを載せておきます。気が向けばそのうち少し詳しく書くかもしれません。なお、JavaScriptのメタデータ記述方法は有名な方法ではありませんが扱いやすいのでおすすめです。

JavaScriptによる表示・非表示切替例

仕組みの概要

HTMLには予めol要素を書いておき、JavaScriptを設定。
JavaScriptは読み込まれた時点でolの前にimg要素を埋め込み、当該ol要素はCSSのdisplay:noneで隠す。
ユーザーが当該画像をクリックするたび、ol要素に設定したCSSのdisplayプロパティをnoneとblockで書き換える。

ソースコード

　ソースコードのうち、GRAPH.metaは当該ソースコードのメタ情報であり、挙動には影響を与えていない。当該メタ情報の書式はThe Web KANZAKIのDOAS: Description of a Script/Stylesheet vocabularyを参照した。

"use strict";
var GRAPH = {};

GRAPH.meta = {
  '@prefix': '<http://purl.org/net/ns/doas#>',
  '@about': '<http://example.com/novel/your5.js>', 
  'a': ':JavaScript',
  'title': 'Graph-list change script',
  'shortdesc': 'This script incert img element, and view swich give for ol element.',
  'created': '2008-03-30',
  'release': {'created': '2014-03-21T00:45+09:00'},
  'author': {'name': 'hiro', 'homepage': '<http://example.com/>'},
  'license': '<http://creativecommons.org/licenses/by-sa/2.1/jp/>'
};

GRAPH.target = function(evt) {
  if (evt.target) {
    return evt.target;
  }
  return evt.srcElement;
};

GRAPH.getCSS = function(elm, val) {
  if (elm.style.getPropertyValue) {
    return elm.style.getPropertyValue(val);
  }
  return elm.style.getAttribute(val);
};

GRAPH.setCSS = function(elm, pro, val) {
  if (elm.style.setProperty) {
    elm.style.setProperty(pro, val, null);
  }
  else {
    elm.style.setAttribute(pro, val);
  }
};

GRAPH.createElm = function(elm) {
  var doc = document;
  if (doc.createElementNS) {
    return doc.createElementNS('http://www.w3.org/1999/xhtml', elm);
  }
  return doc.createElement(elm);
};

GRAPH.pop = function(evt) {
  var olElm, val;
  olElm = GRAPH.target(evt).parentNode.previousSibling;
  val = GRAPH.getCSS(olElm, 'display');
  if (val === 'none') {
    val = 'block';
  }
  else {
    val = 'none';
  }
  GRAPH.setCSS(olElm, 'display', val);
};

GRAPH.addEvent = function(elm, evt, func) {
  if (elm.addEventListener) {
    elm.addEventListener(evt, func, false);
  }
  else {
    elm.attachEvent('on' + evt, func);
  }
};

GRAPH.img = function() {
  var olElm, i, x, alt, path, imgElm, pElm, cssElm, cssNum;
  olElm = document.getElementsByTagName('ol');
  x = olElm.length;
  for ( i = 0; i < x; i = i + 1 ) {
    GRAPH.setCSS(olElm.item(i), 'display', 'none');
    alt = 'graph' + Number(i + 1);
    path = '../img/your5_' + Number( i + 1 ) + '.png';
    imgElm = this.createElm('img');
    imgElm.setAttribute('src', path);
    imgElm.setAttribute('width', '320');
    imgElm.setAttribute('height', '320');
    imgElm.setAttribute('alt', alt);
    this.addEvent(imgElm, 'click', GRAPH.pop);
    pElm = this.createElm('p');
    pElm.appendChild(imgElm);
    olElm.item(i).parentNode.insertBefore(pElm, olElm.item(i).nextSibling);
  }
  cssElm = document.styleSheets.item(0);
  if (window.addEventListener) {
    cssNum = cssElm.cssRules.length;
    cssElm.insertRule('img{cursor:pointer}', cssNum);
  }
  else {
    cssNum = cssElm.rules.length;
    cssElm.addRule('img', 'cursor:pointer', cssNum);
  }
};

GRAPH.start = function() {
  GRAPH.img();
  if (window.removeEventListener) {
    window.removeEventListener('load', GRAPH.start, false);
  }
  else {
    window.detachEvent('onload', GRAPH.start);
  }
};

GRAPH.addEvent(window,'load', GRAPH.start);

CSSによる表示・非表示切替例

　完全互換は煩雑だったので、クリックによる切替ではなくmouse overによる切替とし、画像は初めからHTMLに埋め込むことにした。更に隣接セレクタが使えない又はバグのあるInternet Explorer 6、7を対象外とした。

　以上の条件変更した上でCSSで書いたところ、次のとおり非常に簡易になった。なお、下記のCSSはCSS2.1までであり、CSS3は用いていない。

仕組みの概要

HTMLには予めimg要素、ol要素を書いておき、ol要素にdisplay:noneを設定。
img要素について、疑似クラスの:hoverによりimg要素上に対するmouse overを検知。
img:hoverの隣接セレクタによりol要素に設定されたdisplayプロパティの値をblockに上書き。

ソースコード

div p{cursor:pointer}
div ol{display:none}
div p:hover+ol{display:block}