ラウンジ(兼FAQ掲示板)

時間によって画像を表示させたのですが、リンクは貼れますか?
過去ログ NO.1096437079
□ yo- [2004年09月21日19時29分]
はじめまして!
以下のように時間によってday.jpgとnight.jpgを表示させたいのですが、
その際画像に対してリンクを貼りたいのですがどうしたらよいでしょうか?
document.write("<a href="○○.html"><img src='"+sampleImg+"'></a>");
では無理でした・・・


<SCRIPT Language="JavaScript">
<!--
sampleTime=(new Date()).getHours();
if(sampleTime>=6 && sampleTime<18){ //朝6時〜夕方6時
sampleImg="images/day.jpg"; //昼の画像
}
else if(sampleTime>=18 || sampleTime<6){ //夕方6時〜朝6時
sampleImg="images/night.jpg"; //夜の画像
}

document.write("<img src='"+sampleImg+"'>");
// -->
</SCRIPT>
□ NXer [2004年09月21日21時34分]
はじめまして。NXerです。

>画像に対してリンクを貼りたい

すえぽんさん風荒技の醍醐味とは、ほどとおいかもしれません。
コピーペーストでお試しください。

------------------------------画像は.gifを使いました。
<BODY>
<SCRIPT>
<!--
link= "index.html";            //link先 
dir ="./images/";             //ディレクトリ

sampleTime=(new Date()).getHours();    //以下元を生かす
if(sampleTime>=6 && sampleTime<18){ //朝6時〜夕方6時
sampleImg="day.gif"; //昼の画像
}
else if(sampleTime>=18 || sampleTime<6){ //夕方6時〜朝6時
sampleImg="night.gif"; //夜の画像
}

val ="<a href='"+link+"'>"+"<img src='"+dir+sampleImg+"'>"+"</a>";

document.write(val);
// -->
</SCRIPT>
</BODY>
</HTML>
-------------------------------------------------------------
次の行は、リンクを画像にする荒業です。
はじめはこうでした。
--------------------------------------
val ="link";

val ="<img src='"+dir+sampleImg+"'>"+"<a href='"+link+"'>"+val+"</a>";
-----------------------------------------------
画像の右横に、テキストでlinkと表示されその文字にリンクを
貼った状態になりました。これでも結構使えそうです。
しかし、画像そのものにリンクを貼るため前後を入れ替えてみました。
おそらくご希望のスクリプトかと想像しています。
--------------------------------------------------------------
val ="<a href='"+link+"'>"+"<img src='"+dir+sampleImg+"'>"+"</a>";
---------------------------------------------------------------
なお、.gif画像周囲にリンクの枠が入りました。
□ yo- [2004年09月22日18時38分]
ご丁寧にありがとうございました。
リンクの枠を取るにはどうしたらよいでしょうか。。
何度もすみません。。

> はじめまして!
> 以下のように時間によってday.jpgとnight.jpgを表示させたいのですが、
> その際画像に対してリンクを貼りたいのですがどうしたらよいでしょうか?
> document.write("<a href="○○.html"><img src='"+sampleImg+"'></a>");
> では無理でした・・・
>
>
> <SCRIPT Language="JavaScript">
> <!--
> sampleTime=(new Date()).getHours();
> if(sampleTime>=6 && sampleTime<18){ //朝6時〜夕方6時
> sampleImg="images/day.jpg"; //昼の画像
> }
> else if(sampleTime>=18 || sampleTime<6){ //夕方6時〜朝6時
> sampleImg="images/night.jpg"; //夜の画像
> }
>
> document.write("<img src='"+sampleImg+"'>");
> // -->
> </SCRIPT>
> はじめまして。NXerです。
>
> >画像に対してリンクを貼りたい
>
> すえぽんさん風荒技の醍醐味とは、ほどとおいかもしれません。
> コピーペーストでお試しください。
>
> ------------------------------画像は.gifを使いました。
> <BODY>
> <SCRIPT>
> <!--
> link= "index.html";            //link先 
> dir ="./images/";             //ディレクトリ
>
> sampleTime=(new Date()).getHours();    //以下元を生かす
> if(sampleTime>=6 && sampleTime<18){ //朝6時〜夕方6時
> sampleImg="day.gif"; //昼の画像
> }
> else if(sampleTime>=18 || sampleTime<6){ //夕方6時〜朝6時
> sampleImg="night.gif"; //夜の画像
> }
>
> val ="<a href='"+link+"'>"+"<img src='"+dir+sampleImg+"'>"+"</a>";
>
> document.write(val);
> // -->
> </SCRIPT>
> </BODY>
> </HTML>
> -------------------------------------------------------------
> 次の行は、リンクを画像にする荒業です。
> はじめはこうでした。
> --------------------------------------
> val ="link";
>
> val ="<img src='"+dir+sampleImg+"'>"+"<a href='"+link+"'>"+val+"</a>";
> -----------------------------------------------
> 画像の右横に、テキストでlinkと表示されその文字にリンクを
> 貼った状態になりました。これでも結構使えそうです。
> しかし、画像そのものにリンクを貼るため前後を入れ替えてみました。
> おそらくご希望のスクリプトかと想像しています。
> --------------------------------------------------------------
> val ="<a href='"+link+"'>"+"<img src='"+dir+sampleImg+"'>"+"</a>";
> ---------------------------------------------------------------
> なお、.gif画像周囲にリンクの枠が入りました。
>
□ NXer [2004年09月23日19時38分]
早速お試しいただきありがとうございました。NXerです。
 
>.gif画像周囲にリンクの枠

画像の枠(border)を零ピクセルに設定したところ、
なくなりました。
-------------------------
link= "index0.html";
dir = "./images/";
bdr="0";           //←追加・変更した行付近↓のスクリプト

val ="<a href='"+link+"'>"+"<img src='"+dir+sampleImg+"'border='"+bdr+"'>"+
"</a>";
------------------------------

javascriptに送る値として、img srcタグの画像の後に、
border="0”;
を追加します。引用記号の処理がよくわかりませんので、
他の初期設定値と同じように、スクリプトの先頭にまとめています。
bdr="0";
は画像のborder属性、枠線の太さを0(零)ピクセルに設定。
他に画像のwidth=やheight=など諸属性が設定できます。

なお、正確な表現は、
「画像周囲に、リンクの枠」ではなくて
「リンクさせた画像の周囲の枠」
ということに気が付きました。(アンク『ホームページ辞典』p.102)

ついでに、画像の代わりにテキストを使うと、リンク用のテキストに
下線が付きますが、これも類似の処理で下線無しにできます。
ただし、この場合は<a href=の属性として、style="text-decoration:none;"
となります。

表現力に富んだjavascriptやhtml言語をマスターされて、よりよいウェブ
ページを作成してください。
□ yo- [2004年09月29日14時51分]
NXerさん

ご丁寧にありがとうございました!
また何かございましたら宜しくお願い致します!
一定時間書込が無かったので過去ログに移りました

suepon.com | CGI作成/CGI制作 | JavaScript | ドメイン検索 | バナー自動作成 | Google ダンスツール | 松浦亜弥 | H.P.memo | パソコン | ネイル

Copyright (C) 2002 - 2009 suepon , All rights reserved. Powered by CGI Script Market.