[mootools]パンくずリンク自動記入

mootoolsでいちいち面倒くさいパンクズリンクを自動挿入するサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

でもこれだとHTMLソースにはリンクやテキストが書き込まれないから、SEO対策という面からしたら微妙。スゴイ楽なんだけど。

var pan1 = $$('h2 img').getProperty('alt');
var url1 = $$('h2 img').getProperty('class');

if (document.getElementById("panlink1")) {
$('panlink1').setHTML(pan1);
$('panlink1').setProperties({
href: url1 + '.html',
alt: pan1,
title:pan1
});
}
if (document.getElementById("panlink2")) {
var get = $E('h3 img');
var pan2 = get.getProperty('alt');
$('panlink2').setHTML(pan2);
$('panlink2').setProperties({
alt: pan2,
title:pan2
});
$('panlink2').removeProperty('href');
}

HTMLにはこう。

TOP><span id="panlink1"></span>
TOP><span id="panlink1"></span>><span id="panlink2"></span>

<span id=”panlink1″></span> 親カテゴリ
<span id=”panlink2″></span> 子カテゴリ

親カテゴリにはh2で使われているイメージのaltとclassが、それぞれテキストとリンクとして挿入される。

<h2><img src="images/title.gif" alt="説明1" width="" height="" class="linkURI"/></a></h2>

<span id="panlink1"><a href="linkURI.html">説明1</a></span>

子カテゴリには一番最初のh3で使われているイメージのaltが挿入される。

<h3><img src="mages/title2.gif" alt="説明2" width="" height="" /></h3>

このサンプルではpanlink2が最下層という設定なので、リンクはなし。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください