PHP & JavaScript Room :: 設置サンプル

<!-- CSS -->
<style type="text/css">
a img {
    border:0;
    vertical-align:text-bottom;
}
table {
    border:0;
    border-collapse:collapse;
    border-spacing:0;
    margin:0; padding:0;
}
th.side {
    background:transparent url(/content/img/css/crazyegg/bg_th_side.gif) no-repeat bottom left;
}
td.side {
    text-align:right;
    background:transparent url(/content/img/css/crazyegg/bg_td_side.gif) no-repeat bottom left;
    width:180px;
    color:#6e6f37;
    padding-right:8px;
}
th {
    height:64px;
    border-right:1px solid #fff;
    vertical-align:bottom;
    color:#fff;
    text-align:center;
    font:normal 21px/34px verdana;
    letter-spacing:2px;
    background:transparent url(/content/img/css/crazyegg/bg_th.gif) no-repeat bottom left;
}
td {
    text-align:center;
    background:transparent url(/content/img/css/crazyegg/bg_td.gif) no-repeat bottom left;
    border-right:1px solid #fff;
    color:#fff;
    width:108px; height:40px;
    font:bold 12px/18px verdana;
}
td.on {
    width:150px;
    background:transparent url(/content/img/css/crazyegg/bg_td_on.gif) no-repeat bottom left;
}
th.on {
    width:150px;
    background:transparent url(/content/img/css/crazyegg/bg_th_on.gif) no-repeat bottom left;
    padding-bottom:9px;
    width:148px;
}
tfoot td {
    background:transparent url(/content/img/css/crazyegg/bg_foot_td.gif) no-repeat top left;
    height:64px;
    vertical-align:top;
    padding-top:8px;
}
tfoot td.on {
    background:transparent url(/content/img/css/crazyegg/bg_foot_td_on.gif) no-repeat top left;
    padding-top:16px;
}
tfoot td.side {
    background:transparent url(/content/img/css/crazyegg/bg_foot_td_side.gif) no-repeat top left;
}
#formcontainer {
    width:443px;
    height:239px;
    background:transparent url(/content/img/css/crazyegg/bg_form.gif) no-repeat top left;
    position:absolute;
    top:24px;
    left:341px;
}
#formcontainer form {
    padding:8px 10px;
    margin:0;
}
#formcontainer h2 {
    margin:0;
    padding:0 0 14px 0;
    font:bold 21px/27px arial;
    color:#fff;
    background:none;
    border:0;
}
#formcontainer fieldset {
    border:none;
    padding:0;
}
#formcontainer label {
    display:block;
    float:left;
    font:bold 12px/18px verdana;
    color:#fff;
    padding-bottom:12px;
}
#formcontainer label.email {
    width:350px;
}
#formcontainer label.email input {
    width:340px;
}
#formcontainer label.password {
    clear:left;
    padding-right:40px;
}
#formcontainer label.password input,
#formcontainer label.retype input {
    width:150px;
}
#formcontainer fieldset.buttons {
    padding-top:10px;
    clear:left;
}
#prices {
    position:relative;
}
</style>
<!-- because ie is a little different with its positioning... -->
<!--[if lte IE 8]>
<style type="text/css">
#formcontainer {
    top:34px;
}
</style>
<![endif]-->

<!-- JS -->
<script type="text/javascript">
/*
    For functions getElementsByClassName, addClassName, and removeClassName
    Copyright Robert Nyman, http://www.robertnyman.com
    Free to use if this text is included
*/
function getElementsByClassName(className, tag, elm){
    var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all :elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }
    }
    return returnElements;
}
function addClassName(elm, className){
    var currentClass = elm.className;
    if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){
        elm.className = currentClass + ((currentClass.length > 0)? " " :"") + className;
    }
    return elm.className;
}
function removeClassName(elm, className){
    var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
    elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, "");
    return elm.className;
}
function hasClass(el, c) {
  if (!el || !el.className.length) return;
  var bits = el.className.split(' '), has = false;
  for (var j = 0; j < bits.length; j++) if (bits[j] === c) has = true;
  return has;
}
function activateThisColumn(column) {
  var table = document.getElementById('pricetable');
  var form = document.getElementById('formcontainer');
  /* まず、すべての他のth要素からonクラスを削除 */
  var ths = table.getElementsByTagName('th');
  for (var g=0; g<ths.length; g++) {
    removeClassName(ths[g], 'on');
    if (!hasClass(ths[g],'side')) {
      ths[g].style.display = 'none';
    }
  }
  /* 次に、すべての他のtd要素からonクラスを削除 */
  var tds = table.getElementsByTagName('td');
  for (var m=0; m<tds.length; m++) {
    removeClassName(tds[m], 'on');
    if (!hasClass(tds[m],'side')) {
      tds[m].style.display = 'none';
    }
  }
  /* 選択したth要素にonクラスを追加 */
  var newths = getElementsByClassName(column, 'th', table);
  for (var h=0; h<newths.length; h++) {
    addClassName(newths[h], 'on');
    newths[h].style.display = '';
    /* not all browsers like display = 'block' for cells */
  }
  /* 選択したtd要素にonクラスを追加 */
  var newtds = getElementsByClassName(column, 'td', table);
  for (var i=0; i<newtds.length; i++) {
    addClassName(newtds[i], 'on');
    newtds[i].style.display = '';
    /* not all browsers like display = 'block' for cells */
  }
  /* フォームを表示 */
  form.style.display = 'block';
}
function hideTheForm() {
    /* フォームを取得 */
    var form = document.getElementById('formcontainer');
    /* フォームを隠す */
    form.style.display = 'none';
    
    /* 隠されているテーブルのセルを取得し、それらを再び表示 */s
    var table = document.getElementById('pricetable');
    var tds = table.getElementsByTagName('td');
    for (var i=0; i<tds.length; i++) {
        tds[i].style.display = '';
    }
    var ths = table.getElementsByTagName('th');
    for (var k=0; k<ths.length; k++) {
        ths[k].style.display = '';
    }
}
</script>

<!-- HTML -->
<div id="prices">
    <div id="formcontainer" style="display:none;">
        <form action="#">
            <h2>Get an account!</h2>
            <fieldset>
                <label for="email" class="email">
                    Email<br>
                    <input id="email" type="text" />
                </label>
                <label for="crazypassword" class="password">
                    Password<br>
                    <input id="crazypassword" type="password" />
                </label>
                <label for="retype" class="retype">
                    Retype Password<br>
                    <input id="retype" type="password" />
                </label>
            </fieldset>
            <fieldset class="buttons">
                <input
                    type="image"
                    alt="Cancel"
                    src="/content/img/css/crazyegg/button_cancel.gif"
                    onclick="hideTheForm();return false;" />
                <input
                    type="image"
                    alt="Submit"
                    src="/content/img/css/crazyegg/button_submit.gif"
                    onclick="return false;" />
            </fieldset>
        </form>
    </div><!-- #formcontainer -->
    <table id="pricetable">
        <thead>
            <tr>
                <th class="side">&nbsp;</th>
                <th class="choiceA">$1000</th>
                <th class="choiceB">$100</th>
                <th class="choiceC on">$10</th>
                <th class="choiceD">$1</th>
                <th class="choiceE">Free</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td class="side">&nbsp;</td>
                <td class="choiceA"><a href="#" onclick="activateThisColumn('choiceA');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
                <td class="choiceB"><a href="#" onclick="activateThisColumn('choiceB');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
                <td class="choiceC on"><a href="#" onclick="activateThisColumn('choiceC');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
                <td class="choiceD"><a href="#" onclick="activateThisColumn('choiceD');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
                <td class="choiceE"><a href="#" onclick="activateThisColumn('choiceE');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td class="side">Number of quarters</td>
                <td class="choiceA">4,000</td>
                <td class="choiceB">400</td>
                <td class="choiceC on">40</td>
                <td class="choiceD">4</td>
                <td class="choiceE">None</td>
            </tr>
            <tr>
                <td class="side">Number of zeros</td>
                <td class="choiceA">3 zeros</td>
                <td class="choiceB">2 zeros</td>
                <td class="choiceC on">1 zero</td>
                <td class="choiceD">No zeros</td>
                <td class="choiceE">None</td>
            </tr>
            <tr>
                <td class="side">Checks on this row</td>
                <td class="choiceA"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceB"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceC on"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceD"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceE">&nbsp;</td>
            </tr>
            <tr>
                <td class="side">Checks on another row</td>
                <td class="choiceA"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceB"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceC on">&nbsp;</td>
                <td class="choiceD">&nbsp;</td>
                <td class="choiceE">&nbsp;</td>
            </tr>
        </tbody>
    </table><!-- #pricetable -->
</div><!-- #price -->