2004年05月14日

写真風画像(5)

枠をつけたくない画像がある場合の為の行を追加しました。
詳しい説明は写真風画像(4)をご覧下さい。

■外部スクリプト
function addPhoto() {
if(document.getElementById("content")==null) return;
var h3s = document.getElementById("content").getElementsByTagName("div");
for (var i = 0; i < h3s.length; i++) {
if(h3s[i].className != "text") continue;
var imgs = h3s[i].getElementsByTagName("img")
if(imgs.length == 0) continue;
var j = 0;
var k = 0;
var l = 0;
var txt1 = reptag(h3s[i].innerHTML,1);
var txt2 = "";
while(l != -1) {
if((l = txt1.indexOf("@img",k)) != -1) {
var tbl1 = "@table border='0'$@tr$@td class='pic'$";
var tbl2 = "@/td$@/tr$@/table$";
if(imgs[j].getAttribute("src").indexOf("blog.seesaa.jp") != -1) {
tbl1 = "";
tbl2 = "";
}
if(imgs[j].getAttribute("alt").indexOf("no-border") != -1) {
tbl1 = "";
tbl2 = "";
}

txt2 = txt2 + txt1.slice(k,l) + tbl1;
k = l;
l = txt1.indexOf("$",k);
txt2 = txt2 + txt1.slice(k,l+1) + tbl2;
k = l + 1;
j = j + 1;
}
}
txt2 = txt2 + txt1.slice(k);
h3s[i].innerHTML = reptag(txt2,2);
}
}

function reptag(e,f) {
var h1="@";
var h2="<";
if(f=="2") {
h1="<";
h2="@";
}
var ans = e
while(ans.indexOf(h2) != -1) {
ans = ans.replace(h2,h1);
}
h1="$";
h2=">";
if(f=="2") {
h1=">";
h2="$";
}
while(ans.indexOf(h2) != -1) {
ans = ans.replace(h2,h1);
}
h1="img";
h2="IMG";
while(ans.indexOf(h2) != -1) {
ans = ans.replace(h2,h1);
}
return(ans);
}

addPhoto();

赤太字部分を外部スクリプトに追加すると、imgタグのalt欄に
「no-border」の文字が有る画像には枠がつかなくなります。
  ■<img src="hoge.jpeg" alt="写真">←枠有り
  ■<img src="hoge.jpeg" alt="写真 no-border">←枠無し

■過去記事
写真風画像写真風画像(2)写真風画像(3)写真風画像(4)


posted by 電算担当者 at 18:58| Comment(8) | TrackBack(1) | ブログ考 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
はじめまして。

参考にさせていただき、
画像を写真風にしてみました。
ありがとうございました。
Posted by 冬泉響 at 2004年10月13日 22:20
冬泉響さん
はじめまして。
この記事が参考になって幸いです。
最初の写真は舞台でしょうか、素敵ですね。
何だか絵はがきのようにも見えます。
Posted by 電算担当者 at 2004年10月14日 21:39
電算担当者さま

レスありがとうございました。
最初の写真は、昨年の冬公演の写真です。
といっても前日のリハーサルなので、本番とはちょっと違うのですが・・・(ノーメイクです。)

教えて頂いたCSSで周りを囲むと、「絵はがき」にみえたり、「写真」に見えたり、良い感じです。
ありがとうございます(@^∇^@)
Posted by やよ*冬泉響 at 2004年11月26日 22:09
やよさん
あれはリハーサルなんですか。
リハーサルという事は普段は
私達が目にする事が無い貴重
な画像という事ですね。
Posted by 電算担当者 at 2004年11月27日 08:47
javascriptでの方法教えていただいて、ありがとうございました。写真風画像(5)まであったんですね。3までしか呼んでませんでした(笑
javascriptですか、なるほど。で、ちょっと自分なりに改造させてもらって、class="photo"のときに枠をつけるようにしてみたんですが、画像にリンクが張ってある場合にIE ではリンクがきかなくなります。やっぱりaタグの中にtableタグをはさんでるからでしょうか?
Posted by ksuke at 2005年02月05日 15:57
ksukeさん
確かにアンカータグの中にテーブルは駄目ですね。
画像にリンク張る事無いから気付きませんでした。
イメージタグの親タグがアンカーだったら、それを
無効にしてテーブルのonclickにそのurlを入れると
いうのを昨日試して見たのですが、もう少しで上手く
行きそうです。
Posted by 電算担当者 at 2005年02月08日 08:53
ありがとうございます。お手数おかけします。
javascriptはあまり触ったことがなかったので、簡単な変更はできても、それ以上は無理でした・・・。
なるほど、そういう方法もあるんですね。勉強になります。
考えたんですが、親タグがアンカータグの場合にその外側にテーブルタグを挿入するというのはできないんでしょうか?
Posted by ksuke at 2005年02月08日 15:46
ksukeさん
それが一番シンプルで良いのですが
なんだか大変そうだったので...
Posted by 電算担当者 at 2005年02月08日 17:46
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

javascriptとCSSで写真の周りに枠を表示...
Excerpt: 前回のエントリーでトラックバックした日々是ブログの電算担当者さんからjavascriptでの方法をコメントで教えていただきました。具体的な方法はこちらで紹介されていますが、簡単に言うと前回紹介した、t..
Weblog: connect
Tracked: 2005-02-05 15:54
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。