Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 メモ帳を開く


何時の日かホームページを作ってみたいけど、何だか難しそう。って思っている方に、
私がネット上で色々な方から教わった事を書き留めておきたいと思います。
きっと「何だ簡単じゃん」と思われることでしょう。

1.メモ帳を開く

先ず、パソコンのスタートボタンから「すべてのプログラム」→「アクセサリー」→「メモ帳」をクリックします



出てきましたら

次、行って見よう
【More Open】
【2004/12/28 13:13】 html | トラックバック(0) |
コメント(2)
きゅうり/ どりーみー/ 

 ドキュメントの記述


基本的タグの記述でページが出来ましたら
次にそれぞれタグにドキュメントの記述をします。
だれのパソコンからもちゃんと見えるようにいろいろな命令を書いておきましょう。

HTMLタグの前にドキュメントタイプを記述

続きを見てみよう
【2004/12/29 15:44】 html | トラックバック(0) |
コメント(4)
きゅうり/ どりーみー/ きゅうり/ どりーみー/ 

 音楽を流そう


画像の貼り付けが成功したら、今度は音楽を流して見ましょう。

<BODY></BODY>

の中に






<embed src="midiのアドレス" autostart="true" loop="true" width="144" height="45" volume="50" border="0">


と書き込んで見てね。


上のタグのっ説明デス。↓

loop="true" 繰り返しあり loop="false" 繰り返し無し

border="0" インラインムービーふちなし

hidden="true" インラインムービー非表示、表示させるときは書かない

autostart="true" オートスタートあり、falseはオートスタートなし

width="144" height="45"はインラインムービーの表示の大きさ




下は音楽だけが流れる「タグ」だよーヾ(●~▽)ゞおほ


<embed src="midiのアドレス" hidden="true" autostart="true" loop="true" width="144" height="45" volume="50" border="0">


hidden="true"を入れるとムービーは表示されません。
続きを読むは
このタグがHP上に現れるムービーです。
【More Open】
【2005/01/03 17:57】 html | トラックバック(0) |
コメント(18)
きゅうり/ どりーみー/ きゅうり/ どりーみー/ きゅうり/ きゅうり/ どりーみー/ きゅうり/ きゅうり/ どりーみー/ 

 ホスト側にもフォルダを


お友だちから教わった、ホスト側にもフォルダを作る方法
!(^o^)
さて、デスクトップに散らばっている、ファイルをまとめてフォル ダに入れておきましょう。
ヾ(●~▽)ゞおほ
実は私は相当、長い間、このことを知らないでとても作業が大変でした。
以前作ったものと同じ名前を付けて、上書きしてしまったり、とほほ...

そうして、ある日、ネットのお友だちから教わりました。
それから後は、とても楽になりました。

では、行って見ようヾ(´▽`*)ゝ エヘ

先ず、ディスクトップで右クリックして
新規作成→フォルダ→出来たフォルダ を右クリック→名前の変換→ここでは「honbako」と付けました。
>次にこの中に画像ファイルやMIDIファイルと共に
index.htmlというファイルを入れるんだそうです。
↓は「honbako」の中身です。




index.htmlのソースです。↓空っぽです。開いて見ると真っ白のページです。
index.htmlが無いと他人に中味を見られてしまいます。




更にサーバーに送るためのフォルダをつくり名前をつけます。
仮に「mikan」としておきます。

↓は、「mikan」の中身です。

「netehon.htm」は、フォルダ「honbako」の中身を使って作ったページです。

IMGの書き方、例えばみらい本だと

   <img src="honbako/miraihon111.jpg">  のように
<img src="フォルダ名/ファイル名">  だそうです。
つまり、一個のページ、または同じテーマのページ毎、使う画像
や音楽をまとめて入れておけば良かったんでした。
ヾ(´▽`*)ゝ
私は、それまでは、まるで体育館のように広い一つの場所に
何でもかんでも詰め込んでいたんだなぁと思いました。
教わった方法は、それぞれを各教室に入れたようだと、その時思いました。ヾ(´▽`*)ゝ
これは、多分誰でも知っていることなんだと思います。
当然過ぎて、誰も語ろうとしないんですね。きっと...
【2005/01/05 17:22】 html | トラックバック(0) |
コメント(2)
どりーみー/ どりーみー/ 

 TABLE


もうすっかりページが出来てきていますね。
それでは、
画像と文章を配置してみましょう。
DIV 
を使った方法も楽しいのですが、今回はテーブルをやって、
次にリンクの方法をやってみますね。♪
<BODY>ここです。</BODY>
の間に

<TABLE>
<TR><TD></TD><TD></TD></TR>
</TABLE>

と書きます。


このままだと解りにくいので、まわりに線を入れてみます。
<TABLE>タグの中に BORDER と書きます。

<TABLE BORDER>
<TR><TD></TD><TD></TD></TR>
</TABLE>

<TD></TD>

と言うのが一個の部屋です。部屋の中に何か入れましょうね。

画像と音楽いってみますか。
<TD>ここと</TD><TD>ここです</TD>


<TABLE BORDER>
<TR>
<TD><img src="画像のアドレス"></TD>
<TD><embed src="midiのアドレス" autostart="true" loop="true"
width="144" height="45" volume="50" border="0"></TD>
</TR>
</TABLE>

このようになりました。









または、上下に部屋を分けたい時は

<TD></TD>

の次に

</TR><TR>

を入れます。

<TABLE BORDER>
<TR>
<TD><img src="画像のアドレス"></TD>
</TR><TR>
<TD><embed src="midiのアドレス" autostart="true" loop="true" width="144" height="45" volume="50" border="0"></TD>
</TR>
</TABLE>











BORDERというのは線です。書かないか、ゼロを入れるかと線がでません。
BORDER="1"
BORDER="5"

のように数字を変えてみてね♪


また指定がないとTABLEは左側に表示されます。
真ん中に持ってきたときは

<TABLE></TABLE>

の前後に
<CENTER></CENTER>

と書きます。

/ というのは、ここで終わりと言う意味ですよーヾ(´▽`*)ゝ

<CENTER>
<TABLE BORDER>
<TR>
<TD><img src="画像のアドレス"></TD>
</TR><TR>
<TD><embed src="midiのアドレス" autostart="true" loop="true" width="144" height="45" volume="50" border="0"></TD>
</TR>
</TABLE>
</CENTER>

【More Open】
【2005/01/12 16:15】 html | トラックバック(0) |
コメント(9)
きゅうり/ どりーみー/ きゅうり/ きゅうり/ どりーみー/ きゅうり/ どりーみー/ どりーみー/ どりーみー/ 

 いろいろなTABLE









色々TABLE

ヾ(@~▽~@)ノわぁい

凄い、こっちが間に合いませんヾ(●~▽)ゞおほほほ

では色々なTABLEをみてみましょう。

先ずこれは、半透明なTABLEです。

背景が透き通ってみえますか?










上のタグです。
TABLEのTD中にTABLEを作っています。
外側のTABLEにはbackgroundで画像のアドレスを入れ、
その画像の大きさにTABLE
の大きさを合わせました。

<!--ココから-->
<CENTER><TABLE background="sirakabaki.jpg" width="400" height="300">

<TR><TD>




<CENTER><TABLE width="300" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)" bgcolor="#FFFFFF">

<TR><TD>

<font size="4" color="#000000"><b>

色々なTABLE</b></font><br>

<font size="2" color="#000000">ヾ(@~▽~@)ノわぁい<br>

凄い、こっちが間に合いませんヾ(●~▽)ゞおほほほ<br>

では色々なTABLEをみてみましょう。<br>

先ずこれは、半透明なTABLEです。<br>

背景が透き通ってみえますか?<br></font>



</TD></TR>

</TABLE></CENTER>

</TD></TR>

</TABLE></CENTER>


></ココまで!---->
TABLEの背景に画像ではなく色を指定すると色が付きます。

bgcolor=""ですね。

またTDの中に指定するとTDの色を指定できます。

大きさを指定しなくても、

入れたいものだけは入ってくれます。

ヾ(´▽`*)ゝヾ(@~▽~@)ノ












TDの中に背景画像も同じ要領でできます

<TD background="画像のアドレス">

です。



この例では外側のTABLEタグの中にbgcolor="pink"

内側のTABLEタグの中にbgcolor="#FFFFFF"白を指定しました。




また、大きさの指定も出来ます。

上の例で解りますように

width="400" height="300"

等のようにTABLEタグの中に書きます。





【2005/01/14 10:45】 html | トラックバック(0) |
コメント(8)
きゅうり/ きゅうり/ どりーみー/ どりーみー/ きゅうり/ きゅうり/ きゅうり/ どりーみー/ 

 リンクの方法


リンクの方法
きゅうりさんの現在のおじぞうさまのページがindexになっているようですのでおじぞうさまのページから「那須塩原ハイキング」に行けるようにすれば出来上がりです。


<a href="ページのアドレス">ここに書く文字または画像が表に現れます</a>

<a href="http://kyuuri.eco.to/hik.htm">那須塩原ハイキング</a>
サンプル
那須塩原ハイキング

または画像の例ですと

<a href="http://kyuuri.eco.to/"><img src="http://kyuuri.eco.to/nikkou2.jpg"></a>

画像の周りに線が出ないようにするには画像のアドレスの後に border="0" を書きます。
それから width="100"
 
画像の大きさの指定です。
<a href="http://kyuuri.eco.to/"><img src="http://kyuuri.eco.to/jizou.jpg" width="100" border="0"></a>

次に
画像や文字の上にマウスが来た時、説明を出す方法です。
a タグの中に title="見てね♪"
又は
img タグの中に alt="綺麗だよぉー"

など適宜に、どちらかを書きます。

<a href="http://kyuuri.eco.to/" ><img src="http://kyuuri.eco.to/jizou.jpg" width="100"border="0" alt="綺麗だよぉー"></a>

サンプル
綺麗だよぉー


<a href="http://kyuuri.eco.to/"title="見てね♪" ><img src="http://kyuuri.eco.to/jizou.jpg" width="100" border="0" ></a>






TARGETの指定

a タグの中にTARGETを書くことによってページの表示の方法を指定します。
主な物では
別ウインドウを開く  TARGET=" _blank"
現在のページに表す  TARGET="_top"

<a href="http://kyuuri.eco.to/hik.htm" title="見てね♪" TARGET=" _blank">那須塩原ハイキング</a>
サンプル
那須塩原ハイキング

<a href="http://kyuuri.eco.to/hik.htm" title="見てね♪" TARGET="_top">那須塩原ハイキング</a>
サンプル
那須塩原ハイキング

【2005/01/18 08:14】 html | トラックバック(0) |
コメント(15)
きゅうり/ どりーみー/ きゅうり/ きゅうり/ どりーみー/ どりーみー/ きゅうり/ どりーみー/ きゅうり/ きゅうり/ 

 背景


BODYタグ


背景を右下に固定しています

<!--//ここから//-->



<BODY style="
background : url(背景画像のアドレス) fixed no-repeat bottom

right">


<!--//ここまで//-->



bottom right ーーーーこの部分を変えると位地が変ります。

bottom left ーーーー左下に固定

top right ーーーー右上に固定

top left ーーーー左上に固定

top center ーーーー真ん中上に固定

bottom center ーーーー真ん中下に固定

center center ーーーーど真ん中に固定



サンプル
【2005/02/01 13:30】 html | トラックバック(0) |
コメント(5)
きゅうり/ どりーみー/ どりーみー/ -/ -/ 

 カテゴリーのRSS


2005.06.30のFC2インフォメーション よりの覚書


・カテゴリー別の最新記事
・最新コメント
・最新トラックバック
そして勿論
・最新記事についてもRSSがあるのはホントにすごいことです。


・カテゴリーのRSS
BlogURL/?xml&category=数字  ←登録した順の番号ですね。

・コメントのRSSのURL
BlogURL/?xml&comment

・トラックバックのRSSのURL
BlogURL/?xml&trackback

ちょっと遅れてる私

【2007/10/27 07:21】 html | トラックバック(0) |
コメント(0)

 絵文字の背景


背景が白以外の場合、文中に挿入した絵文字の背景が白くなってしまいますよね。
その対処方法ですが、
CSSで設定することによって回避できるんですね。
また、記事の中の画像に枠などを付けている場合、あの小さい絵文字にまで枠がついてしまうことがありますね。

記事を囲っているタグのclassが[entry_text]の場合

.entry_text img.emoji {
border:none;
float:none;
margin:0px;
padding:0px;
background-color: #000000;
valign:bottom;
}

というのをスタイルシートに入れると良いみたいです。
上の例は背景が黒い場合です。
背景に画像を入れている場合はその背景画像を絵文字の背景にも入れます。
background-color: #000000;のところを
background: url(背景画像のアドレス) no-repeat top right 背景の色;
ですね。

【2007/10/29 14:17】 html | トラックバック(0) |
コメント(12)
Ktaro/ どりーみー/ Ktaro/ どりーみー/ Ktaro/ Ktaro/ どりーみー/ Ktaro/ どりーみー/ Ktaro/ 

 半透明にする


テーブル、カラムなどを半透明にするタグをスタイルシートで指定する方法で
IE・Firefox・Opera・Netscape・Safariで表示可能な方法を公開されているのを見つけました。
IEとFirefoxで試したところ実行されていました。



filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;

参考URL
【2008/01/24 06:59】 html | トラックバック(0) |
コメント(0)

 サムネイル画像.Highslide JS


私はテンプレートindexページにサムネイル画像を置きそれをかっこよく拡大させるテンプレートを夢見ています。
先日、作成したgallery-w
では画像をクリックすると別ウインドウで画像が拡大するんです。


サムネイル画像を拡大するjavascriptにはIDが着いていて、そのIDには名前がついているので、topentryのように繰り返し表示するものは無効になってしまいます。

今回のHighslide JSもそうです。テンプレートとして取り入れることはまだできません。

ただ記事の中に取り入れる方法を記事になさっている方を見つけました。
TomomiX日記/Highslide JS実装手順/http://blackcat13numbers.blog31.fc2.com/blog-entry-188.html

早速やってみました。
*改行の扱いをHTMLタグのみ にしました。

画像をクリックするとその場で拡大します。
拡大した画像をクリックすると元の大きさに戻ります。 桜と城桜と城


どうでしょう?

ストレスが少ないですね。
これはクリック後の拡大表示された画像をドラッグして動かせることが面白いですね
caption・・・・写真の説明をつけない場合IDはいらないらしいですね?
【2008/04/18 08:32】 html | トラックバック(0) |
コメント(10)
TomomiX/ どりーみー/ TomomiX/ どりーみー/ TomomiX/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 

 1枚の画像に複数のリンクを貼る


一枚の画像の中に複数のリンクを貼る方法があるそうです。
下の画像は一枚の写真ですが、丸や三角、四角又多角形にそれぞれリンクを入れてあります。











タグは以下の通りです。
ーーーーーーーーーーーーーーーーーーーーーーーー
<IMG src="talink.jpg" width="400" height="300" border="1" usemap="#mapID"><BR>
<MAP name="mapID">
<AREA shape="poly" coords="197,9,382,106,350,142" href="http://www.yahoo.co.jp/" title="三角-Yahoo!">
<AREA shape="poly" coords="171,199,245,125,353,176,341,253,243,292" href="http://blog.fc2.com/" title="五角形-FC2ブログ">
<AREA shape="rect" coords="38,185,142,271" href="http://blog2.fc2.com/dreamy/" title="四角形-MyBlog">
<AREA shape="circle" coords="86,88,62" href="http://www.google.co.jp/" title="円-Google"></MAP>
ーーーーーーーーーーーーーーーーーーーーーーーー
形が円の時は
・cirle:円の中心のx座標, y座標, 円の半径
四角の時
・rect:四角形の左上のx座標, y座標, 四角形の右下のx座標, y座標
多角形の時
・poly:多角形のすべての点のx座標, y座標を交互に記述

ということでやってみました。面白かったです。
街の地図などに適していますね。



【2008/06/04 17:22】 html | トラックバック(0) |
コメント(0)

 CSS だけでサムネイルギャラリー


JavaScriptやFlashを使わずにスタイルシートだけで
サムネール画像にマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。
固定した画像にリンクを入れられます。


JavaScriptやFlashを禁止されているサーバーの方も使えますね。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>title</title>
<style type="text/css">
<!--
ul#gallery {
padding:5px 0px 0px 10px; /*上、右、下、左*/
margin:0px;
width:204px;
height:170px;
border:1px solid pink; 
position:relative;
background:url(背景画像のURL) no-repeat fixed top left;/**/
-height:155px;
-width:212px;
}
#gallery li {
list-style-type:none;
width:50px;
height:37px;
float:left;
z-index:100;
-width:45px;
-height:34px;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}

#gallery a {
position:relative;
width:50px;
height:37px;
display:block;
float:left;
z-index:100;
cursor:default;
margin: 5px 2px 2px 0px; /*上、右、下、左*/
background: url(画像の影のURL) bottom right;
float: left;
width: auto;
-width:45px;
-height:34px;
}
#gallery a img {
position:relative;
width:50px;
height:37px;
border:1px solid #888;
z-index:100;
background: #ffffff;
border: 0px solid #999;
padding:1px;/*元5*/
position: relative;
left: -7px;
top: -7px;
-padding:1px;/*元5*/
-border: 1px solid #999;
-width:45px;
-height:34px;
}
#gallery a:hover {
width:203px;
height:151px;
padding:0px 0px 2px 9px; /*上、右、下、左*/
position:absolute;
left:12px;
top:20px;
z-index:200; /*マウスを当てた時画像が前面に現れる・元は20*/
-padding:0px 0px 2px 9px; /*上、右、下、左*/
-left:2px;
-top:10px;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:200; /*マウスを当てた時画像が前面に現れる・元は10*/
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*上、右、下、左*/
position:absolute;
left:0;
top:0;
z-index:400; /*クリックした時画像が前面に現れる・元は10*/
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:400;/*マウスを当てた時画像が前面に現れる・元は10*/
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:203px;
font-size:0;
padding-top:93px; /*サムネイル画像下の列・上の列の下端からのpadding*/
-padding-top:83px; /*サムネイル画像下の列・上の列の下端からのpadding*/
}

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*上、右、下、左*/
position:absolute;
left:0;
top:0;
z-index:100;/*元10*/
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:160px;
height:120px;
border:0;
z-index:100;/*元10*/
}-->
</style>
</head>
<body>

<ul id="gallery">
<li><a href="#">
<img src="#1画像のURL" alt="#1" title="#1" /></a></li>
<li><a href="#">
<img src="#2画像のURL" alt="#2" title="#2" /></a></li>
<li><a href="#">
<img src="#3画像のURL" alt="#3" title="#3" /></a></li>
<li><a href="#">
<img src="#4画像のURL" alt="#4" title="#4" /></a></li>

<li class="pad"></li>
<li class="lft"><a href="#">
<img src="#5画像のURL" alt="#5" title="#5" /></a></li>
<li><a href="#">
<img src="#6画像のURL" alt="#6" title="#6" /></a></li>
<li><a href="#">
<img src="#7画像のURL" alt="#7" title="#7" /></a></li>
<li><a href="#">
<img src="#8画像のURL" alt="#8" title="#8" /></a></li>
</ul>
</body>
</html>


参考にさせていただいたサイト
Stu Nicholls CSSplay CSS Photograph Gallery with hover and active states
ありがとうございます。
【2008/06/11 16:17】 html | トラックバック(0) |
コメント(0)

 cssだけでマウスオーバーで展開


先日(2008/06/11)の「CSS だけでサムネイルギャラリー」
のcssを勉強しました。
マウスオーバーで展開、更にサムネイル画像に触れると拡大
と言うところのCSSがだいたい解かりました。面白いですね。
忘れないように書いて置きます。
サンプル


CSS部分

 /*メニューの文字に触れたら展開する ここから*/
  /*サムネイル画像が入るtable*/
.album ul :hover table{ 
 padding:0;
 margin-top:-2px;
 display:block;
 border:1px solid red;
 border-width:0px 1px 1px 1px;}

/* メニューの一個一個のtable   文字だけの囲みになった*/
.album ul li table {    
 margin:0;
 padding:0;
 display:none;
}

/*  transparentが背景色を透過させる指定*/
.album ul li a.set:hover {
background:transparent;    
}

/*  transparentが背景色を透過させる指定*/
.album ul li:hover a.set {  
background:transparent;    
}


 /*メニューの文字に触れたら展開する ここまで*/



/*展開したサムネイル画像の上にマウスオーバーで拡大 ここから*/

.album ul li a.set:hover li a:hover
{
	background-color: #fff;
}

.album ul li a.set:hover li a:hover img{
	width:auto;
	height:auto;
position : absolute;
top: 15px;
left: 170px;
}
/*展開したサムネイル画像の上にマウスオーバーで拡大 ここまで*/




HTML部分
<div class="album">

<ul>
<li><a class="set" href="#nogo">アジアンタム#1<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
<li>
<a href="#"><img src="http://blog-imgs-27.fc2.com/d/r/e/dreamy/2008-6-9-38.jpg" alt="代替" width="50"
height="50" /></a>
</li>
</ul>
</td></tr></table></ins><!--[if lte IE 6]
></a><![endif]-->
</li>

</ul>
<br class="clear" />
</div><!--album-->



もしメニューの文字をクリックしたら展開する
と言う場合は
「hover」ではなく「active」を使う
【2008/06/20 15:58】 html | トラックバック(0) |
コメント(0)

 album2の画像サムネイルを並べる


写真の枠を外して写真のサムネイルを横に2つ3つ並べたい
ということですのでやってみました

2008-6-13-1.jpg2008-6-13-2.jpg2008-6-13-10.jpg


こんな感じでよろしいでしょうか?

以下にこの方法を書いてみますね。

画像の枠を外すには
管理ページのお使いのテンプレート「album2」の編集をクリック
スタイルシートの


/*テキスト内の画像*/と言うところを

background-color: #ffffff;
padding: 2px;
float: left;


意味はfloat: left;が横に並べるということです。今までも入っていましたね。
padding: 2px;は画像と画像の隙間です。0だと写真同士がくっついてしまいますので、1か2くらいはあったほうが良いですね。この記事では2pxにしてみました。

次に
「環境設定の変更」のサムネイル作成のサイズを100~120くらいにして更新(この数字はBlogを見て決めてください。)この記事では100pxに設定しました。

記事を書く時、

先ず画像をアップする時
1、「サムネイル 同時に作成する(jpg)」にチェックを入れます。
2、画像のサムネイルで記事を書く をクリック
記事を作成部分に入ったタグの一番最後「 <br clear="all" /> 」を消します。
<br clear="all" />が並べずに左下へと言う意味です。
いかがでしょうか?
【2008/06/20 22:48】 html | トラックバック(0) |
コメント(14)
もみ/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 

 超簡単画像のポップアップ


サムネイル画像を拡大する方法、Highslide JS、lightbox、lightbox2などいろいろありますね。
FC2では、類似プラグインにPhotoscope pictlayer 画像ポップアップ等があるようです。

Photoscopeでは画像をクリックすることでその画像を背景としたページが手前に出て来るようです。とても面白いです。
pictlayerでは拡大表示される画像以外のところが半透明でlightboxなどに似ていますね。しかし動作しないサーバーがあるようです。
画像ポップアップはマウスを乗せると画像がポップアップされるようですが、中にはマウスをはずしても消えないものがあってその時はクリックすれば消えるようです。でもその位置がたまたま他の画像の上だった時、また新しく思わぬ画像がポップアップされていて、ストレスが多いです。

いろいろと調べて回り、たどり着いたのがcssによるマウスオーバーです。
以前にも記事(http://dreamy.blog2.fc2.com/blog-entry-106.html)にしましたが、
とても簡単です。

マウスを乗せた画像が消えてそれが大きくなるので、大きくなった分他の画像や文章が動くのがストレスでは有りますが、簡単さは抜群、
スタイルシートの
body
の中に

a:hover {
text-decoration: underline;
color: #CD8B32;
background-color: #fff;
}

a:hover img
{
width:auto;
height:auto;
}

と書き加えるだけです。
ただ、
記事を作成する時、
<a href="画像のアドレス"><img src="画像のアドレス" alt="説明" width="50" boeder="0" /></a>
のように width=""を入れる必要があるようです。
画像をアップする時にサムネイルを作成するとしてサムネイル画像で投稿した場合や
リンク先の画像が表示画像と同じ大きさだった場合はポップアップされません。

ストレスの無さではHighslide JS、lightbox、lightbox2が勝っていると思いますが、それらが使えない時などは良いですね。
【2008/10/01 11:54】 html | トラックバック(1) |
コメント(6)
通りすがり/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ 

 onmouseoverによってコンテンツが現れた時objectやembedを非表示


今回はマウスオーバーで開くものです。


【More Open】
【2008/12/04 14:41】 html | トラックバック(0) |
コメント(0)

 背景を半透明にした時写真は半透明にしない


TABLEやcolumnなどに半透明の画像を背景に設定した場合、記事に挿入した画像まで半透明になってしまうことがあります。
Lightbox JSやHighslide JSで画像を表示した時その場で背景が半透明になるんですが
画像の部分は半透明にはなっていません。
これに近い感じにするには
cssでboxなどを同じ場所に重ね
下になるboxは空で大きさを指定し
その上に画像や文章を書いたboxを重ねると出来ます。
これがあまり勧められないものかどうかそれは解かりません。
実感するためには[Open-Close]をクリックしてみてください。
もう一度クリックすると消えます。





【2009/02/03 17:23】 html | トラックバック(0) |
コメント(3)
のあ/ どりーみー/ どりーみー/ 

 プラウザの戻るボタンで戻れない


yahooなどの検索サイトでいろいろなサイトを見て歩いている時、
また検索サイトに戻ろうとして、プラウザの戻るボタンを押しても、どうしても戻れない時が有りますよね。
また初めから検索の文字を入れてやり直しです。
いつも頭にくるなぁ。何の意味があるんだと内心怒っていた私。

ところが何ということでしょう。私のHPがそうなっていることに気がつきました。
ほんとにびっくりです。
もう恥ずかしくて顔から火が出る位でした。

取り急ぎHTMLをくまなくチェックしたところ、
JavaScriptで、「時間ごとに決められたページを読み込む」ことにしてあるiframe ( インラインフレーム)のところで引っかかりました。
読み込んでいるつもりだったのが、ジャンプしていたのですね。
そうか、ジャンプか・・・・
でも、ジャンプしているのはインラインフレームの中でページ自体ではないのではないか?
と思うものの、実際にURLが影で飛んでいるらしい。
新しくページを開いたその時から戻るボタンに色が付いて前のページへのリンクが貼られてしまいしかも戻れないのです。

今日初めてこのことについて調べました。
実際にそのようにしようとして作ることも出来るのですね。
でもそうとは知らず、ページを作り、しかも気がついていない人もいるかもしれませんね。

ページが出来た時、チェックを忘れがちなところですね。って私だけかな?汗


同じ仕事ををするものでも
http://www.01nni.com/free-b.html
オートチェンジHTML(1時間毎)
というCGIは大丈夫のようです。

勉強になりました。
【2009/03/19 20:53】 html | トラックバック(0) |
コメント(3)
どりーみー/ マフラーボンボン/ どりーみー/ 

 サイトマップWebsite Explorer


サイトマップを作るのにいちいち自分で確かめてページを集めるのはたいへんですよね。

ホームページを作り始めたその時から、真面目にやっていればいいのかもしれないのですが、
いつの間にか巨大化してしまったホームページ、
自分でももてあましてしまいます。

そこでなんとかもっと簡単に出来ないものかと、調べて結果、
Website Explorer にたどり着きました。

サンプル

自分のイメージにぴったりと言う訳ではないですが、瞬時にやってくれるこのソフト、本当にありがたいです。
【2009/09/04 08:22】 html | トラックバック(0) |
コメント(2)
荒野鷹虎/ どりーみー/ 

 画像を虫眼鏡で見るように拡大表示



Javascriptの場合
↑画像にオンマウスで
拡大されます。


商用の場合は料金が発生しますが、非商用でしたら Freeだそうです。
詳しくは参考サイト
http://solidstate.jp/ImageDisplay/glass/script_62.html
をご覧ください。


Flashの場合










アクションレイヤーに


zoom.setMask(lupe);
_root.onMouseMove = function ()
{
lupe._x = _root._xmouse;
lupe._y = _root._ymouse;
zoom._x = -_root._xmouse * 3 + photo._width * (_root._xmouse / photo._width);
zoom._y = -_root._ymouse * 3 + photo._height * (_root._ymouse / photo._height);
};


注:zoom._x  zoom._yの3というのは3倍という意味
 大きい画像MCにzoomと命名
 虫眼鏡の丸MCにlupeと命名 マウスについてくるように書き込む。
【2009/10/04 06:52】 html | トラックバック(0) |
コメント(0)

 画像をクリックすると非表示






画像をクリックすると消える。
というものです。
<span onClick="this.style.visibility='hidden'">
<img src="画像のURL">
</span>

ページを更新しするとまた現れます。

使い方で楽しい物が出来るかもしれませんね。

【2010/01/22 14:56】 html | トラックバック(0) |
コメント(0)

 IE8ってどうよ?


ホームページを編集しているんですが、
今まで私はIE6を主に使っていますので、それでの表示確認とMozilla Firefoxで確認していました。
ところが新しいパソコンがIE8なのです。
そっちのパソコンで見るとIEむけのcssも書いているのに、崩れているんです。
一体どうすればいい?

検索してみると
IE8で見ている人向けMETAタグを見つけました。

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /

これをページのソース、headの中に書いておくことで、IE8で見ている人にはIE7で見るように変換して表示してくれるそうです。
そうするとIE8でもうまく表示できました。


これってどうゆうこと?

IE8はよくないのかしら?


はたまたIE9はどうなんでしょう?

どうやらYouTubeでもIE6では近々閲覧できなくらるらしいですね。
そうなったら、もう過去のものとなっていくんでしょね。


【2010/01/23 21:56】 html | トラックバック(0) |
コメント(0)

 リンク部分の周囲の点線を消す


ページのリンクをクリックすると回りに点線の枠が出ますね。
普通は他のページへ飛んでいくので、気にならないし、戻ってきてみると、点線が付いているので、ここまで見たんだと解かり、助かります。

ただこのBlogのトップページのようにその場で続きを読むような場合、リンク文字は消えるのに点線だけが残り目障りと感じることがあります。
その時の対処方法を教えてくれているところが見つかりました。


リンクのURLの次に 「onFocus="this.blur()"」と書くことによって回避できるそうです。

参考URL
http://www.auone-net.jp/netguide/hp/mkhp/022/022.html

ありがとうございます。
【2010/03/04 06:51】 html | トラックバック(0) |
コメント(0)

 写真の右側に文章を回りこませるには


コメントありがとうございます。
どのテンプレートをお使いなのでしょうか?
連絡先も解からないのではお答えしようが無いのですが
とりあえずは
記事を書くとき
<a href="http://blog-imgs-31.fc2.com/d/r/e/dreamy/2009-10-1-22.jpg"><img src="http://blog-imgs-31.fc2.com/d/r/e/dreamy/2009-10-1-22.jpg" width="200" border="0" align="left"></a>

としてみてはいかがでしょうか?
<a href="画像のアドレス"><img src="画像のアドレス" width="画像の大きさ" border="0" align="left"></a>

いかがでしょうか?

【2010/05/08 16:42】 html | トラックバック(0) |
コメント(4)
荒野鷹虎/ どりーみー/ 荒野鷹虎/ どりーみー/ 

 Javascript window openで窓をたくさん出さない


Javascriptを使って指定した大きさの窓を開くサムネイルをたくさん並べている元ページから次々クリックすると次々と窓が現れて、閉じる時驚く事があります。

そんな時、最終的に別窓がひとつだけ残っているようにするには

<A href="Javascript:w=window.open('URL1','コメント','scrollbars=yes,Width=510,Height=570');w.focus();"><img src="サムネイル画像のアドレス1" border="0"></a>

<A href="Javascript:w=window.open('URL2','コメント','scrollbars=yes,Width=510,Height=570');w.focus();"><img src="サムネイル画像のアドレス2" border="0"></a>

<A href="Javascript:w=window.open('URL3','コメント','scrollbars=yes,Width=510,Height=570');w.focus();"><img src="サムネイル画像のアドレス3" border="0"></a>

このように書き、コメントの部分の文字を全部同一にすると良いです。
【2010/10/02 06:45】 html | トラックバック(-) |コメント(-)

 枠や影をつける画像とつけない画像を貼り分ける


たまにこの画像には枠や背景をつけたいと思う時があったとしたら、
cssを使って同一のページ内に貼り分けることが出来るそうです。
1、枠と影付き背景をつける
画像

これに対し
2、背景をつけない場合は


先ずスタイルシートには

div.phot { 
margin: 0px 0px 5px 5px;
background: url(背景画像のアドレス) right bottom;
float: left;
}
div.img {
position: relative;
left: -5px;
top: -5px;
padding: 5px;
background: #FFFFF0;
border: 1px solid #999999;
}

画像を貼り付けるところは
1、枠と背景画像をつける

<div class="phot"><div class="img"><img src="画像のアドレス" alt="画像の説明"></div></div>

2、枠なし画像は

<img src="画像のアドレス" alt="画像の説明">



ちなみに背景画像はこれ↓(縮小表示しています)
2011-1kage.jpg
【2011/01/27 00:18】 html | トラックバック(0) |
コメント(0)

 クリックした画像を大きくする方法


いただいた質問ですです。現在ブログで横650pixの画像を貼り付けていますが、クリックして別窓で開いたときにもっと大きなサイズで開くには

2011_0919-2.jpg




これは大きい画像が1024px,小さい方が640pxです。

クリックすると別窓で出てきた画像の上に+マークが出ているので画像をクリックすると1024pxの画像になりました。

いかがでしょうか?
【2011/09/26 20:34】 html | トラックバック(0) |
コメント(0)

 画像に影をつける


cssは
{
filter: progid:DXImageTransform.Microsoft.shadow(color=#999999, direction=135, strength=10);
}
例えば
class=phot

htmlは

<img src="画像のアドレス" class="phot">

こんな感じです
htmlkage.jpg
【2012/06/06 16:58】 html | トラックバック(0) |
コメント(0)






| ホーム | 次ページ
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview