Page: 1/1   
_on _offと画像ファイル名だけ変えればよいJavascriptロールオーバー
 Javascriptで実装するロールオーバーで、
画像ファイル名に「_on」「_off」とだけつければ動くソースを探していました。

ソース元はこちら
http://css-happylife.com/archives/2007/0621_0010.php

function smartRollover() {
    if(document.getElementsByTagName) {
        var images = document.getElementsByTagName("img");
        for(var i=0; i < images.length; i++) {
            if(images[i].getAttribute("src").match("_off."))
            {
                images[i].onmouseover = function() {
                    this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
                }
                images[i].onmouseout = function() {
                    this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
                }
            }
        }
    }
}
if(window.addEventListener) {
    window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
    window.attachEvent("onload", smartRollover);
}
↑このソースを
<script type="text/javascript" src="***.js"></script>
でよみこめばよいだけでとても簡単でした。

18:54 | comments(0) | - | - | -
画像を簡単に角丸にするajax(javascript)
 http://www.netzgesta.de/corner/ こちらからcorner.jsをダウンロードし、アップします。

<script src="../js/corner.js" type="text/javascript"></script>
↑をヘッダーで読み込ませ(パスは随時変更)

あとは、角丸にしたい画像のclassを

<img src="img/corner.jpg" alt="" width="170" height="100" class="corner iradius30" />

とするだけ。

iradius30のとこの数字を小さくすれば、角丸も小さくなります。
角丸以外にも、シャドウとか、いろいろエフェクトがつけられるみたいです。



16:09 | comments(0) | - | - | -
画像イメージバナーをランダムに表示する
バナー+テキストをランダムに表示させます。
altもtxtで設定したものが入るようにしました。

<SCRIPT language="JavaScript">
<!--
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
txt = new Array();
// URL
jmp[0] = "a.html";
jmp[1] = "b.html";
jmp[2] = "c.html";
// 画像ファイル名
img[0] = "a.jpg";
img[1] = "b.jpg";
img[2] = "c.jpg";
// テキスト
txt[0] = "aです";
txt[1] = "bです";
txt[2] = "cです";

n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0' width='***' height='***' alt='"+txt[n]+"' />");
document.write("</a>");
document.write("<a href='"+jmp[n]+"'>");
document.write(txt[n]);
document.write("</a>");
//-->
</SCRIPT>


参考にしたサイトはこちら

14:29 | comments(0) | - | - | -
サブウィンドウから親ウィンドウを操作
サブウィンドウから親ウィンドウのURLを変えるjanascript

<SCRIPT language="JavaScript">
<!--
// サブウィンドウから親ウィンドウを操作
function urlWindow01() {
window.opener.location.href="http://www.hogehoge.com/"
}
-->
</SCRIPT>


<a href="JavaScript:urlWindow01()">チェック<BR></a>



こちらを参考にさせていただきました
12:16 | comments(0) | - | - | -
ブログなどのRSSを読み込んで、サイトで表示する
ブログで書いた記事を、タイトル一覧のような形で、自分のサイトに表示できないか・・・?
という方法です。

こちらのサイトを参考にし、
使い勝手のよいように、多少手をくわえたものになります。
http://www.kawa.net/works/ajax/rss/rss-box.html

まず、
こちらから、「jkl-hina.js」「jkl-parsexml.js」をダウンロード。
こちらから、「jse-date-w3cdtf.js」をダウンロード。

読み込んで表示させたいページのhtmlファイルの同ディレクトリ内に置きます。

htmlファイルのHEAD内に、以下を記述。

<script type="text/javascript" src="jkl-hina.js" charset="Shift_JIS"></script>
<script type="text/javascript" src="jkl-parsexml.js"></script>

<script type="text/javascript" src="jse-date-w3cdtf.js"></script>

<script><!--
window.onload = function () {
var url = "読み込ませたいRSS";
var http = new JKL.ParseXML( url );
var func = function ( data ) {
var items = data["rdf:RDF"].item;

//表示する件数
if ( items.length > 15 ) items.length = 5;
var hina = new JKL.Hina( "rssbox" );

//日付表示
var items = data["rdf:RDF"].item;
for( var i=0; i<items.length; i++ ) {
var dd = new Date();
dd.setW3CDTF( items[i]["dc:date"] );
var min = ""+dd.getMinutes();
if ( min.length < 2 ) min = "0" + min;
var hour = ""+dd.getHours();
if ( hour.length < 2 ) hour = "0" + hour;
var date = dd.getFullYear() + "/" + (dd.getMonth()+1) + "/" +
dd.getDate() + " " + hour + ":" + min;
items[i]["dc:date"] = date;
}


var dest = hina.expand( data, "rssbox" );
dest.style.display = "";
};
http.async( func );
http.parse();
}
// --></script>

BODY部に、

<ul>
<li title="@foreach item1 [/rdf:RDF/item]"><a _href="[/item1/link]" style="color: #666666; text-decoration: none;">[/item1/title]</a> [/item1/dc:date]</li>
</ul>

と記述。

フリーのRSSリーダーだと、カスタマイズも出来ず、広告も入るので、
こちらのやり方がとても便利だと思います。
15:26 | comments(0) | - | - | -
javascriptを使ったドロップダウン(プルダウン)メニュー
javascriptを使ったドロップダウン(プルダウン)メニューの作り方です。
http://jsajax.com/DropDownMenuArticle286.aspxより引用させていただいたスクリプトを、自分用にいじりやすいように多少手を加えたものです。

■htmlファイル

<html>
<head>
<title>ドロップダウン</title>
<link href="DropDownMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="DropDownMenu.js"></script>
</head>
<body>
<ul id="dd">
<li>
<a href="#" class="menu" id="mmenu1"
onmouseover="mopen(1);"
onmouseout="mclosetime();">Home</a>
<div class="submenu" id="menu1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
<a href="#">メニュー4</a>
</div>
</li>
<li>
<a href="#" class="menu" id="mmenu2"
onmouseover="mopen(2);"
onmouseout="mclosetime();">Download</a>
<div class="submenu" id="menu2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">メニュー5</a>
<a href="#">メニュー6</a>
<a href="#">メニュー7</a>
<a href="#">メニュー8</a>
</div>
</li>
<li>
<a href="#" class="menu" id="mmenu3"
onmouseover="mopen(3);"
onmouseout="mclosetime();">Contact</a>
<div class="submenu" id="menu3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">メニュー9</a>
<a href="#">メニュー10</a>
<a href="#">メニュー11</a>
<a href="#">メニュー12</a>
</div>
</li>
</ul>

</body>
</html>

■jsファイル

http://jsajax.com/DropDownMenuArticle286.aspx
より引用

■cssファイル


#dd {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
width:500px;
}

#dd li {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
float: left;
}

#dd li a.menu {
margin:0px 0px 0px 0px;
padding:5px;
display: block;
text-align: center;
background: #CCCCCC;
color: #000000;
width: 100px;
text-decoration: none;
}

#dd li a.menu:hover {
background: #999999;
}

.submenu {
margin:0px 0px 0px 0px;
background: #EFEFEF;
border: 1px solid #cccccc;
visibility: hidden;
position:relative;
top:10px;left:10px;

}

.submenu a {
display: block;
text-align: left;
text-decoration: none;
padding: 5px;
color: #2875DE;
width: 98px;
}

.submenu a:hover {
background: #49A3FF;
color: #FFF;
}

20:18 | comments(0) | - | - | -
折りたたむメニュー
クリックで表示、ダブルクリックで折りたたむメニューのソースサンプルです。


<html>

<head>

<title>折りたたみメニュー</title>

<script language="JavaScript">
<!--
function msl(idmn){
if(document.getElementById)
document.getElementById(idmn).style.display='block'
else if(document.all)document.all(idmn).style.display='block'
}
function kks(idmn){
if(document.getElementById)
document.getElementById(idmn).style.display='none'
else if(document.all)document.all(idmn).style.display='none'
}
//-->
</script>

<style type="text/css">
<!--
.list{
display : none;
}
-->
</style>

</head>

<body>

<div><a href="javascript:void(0);" onclick="javascript:msl('sub_a')" ondblclick="javascript:kks('sub_a')">Menu_A</a></div>
<ul class="list" id="sub_a">
<li>sub_1</li>
<li>sub_2</li>
<li>sub_3</li>
</ul>

</body>

<html>



こちらを参考にさせていただきました。
ありがとうございました。
http://www.wsb.jp/hpb/css/o_menu.htm
21:57 | comments(0) | - | - | -
MacとWinで別々のCSSを読み込ませるJavascript
os.js
というファイルの中に
if(navigator.userAgent.indexOf("Mac")!=-1){
document.write("<link rel=stylesheet href=./common/css/common_mac.css type=text/css />");
} else {
document.write("<link rel=stylesheet href=./common/css/common.css type=text/css />");
と記述。
cssファイルのパスは、読み込むファイルからのパス。
(jsファイルからのパスではない)

読み込むファイルのhead内に
<script language="JavaScript" src="./common/js/os.js" type="text/javascript"></script>
という感じでjsファイルの読み込みを指定
13:11 | comments(0) | - | - | -

Calendar

     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>

Recommend

Search

Entry

Comment

  • リンク元のページに戻るボタン(PHP)
    Tadashi (03/13)
  • サイト全体をメンテナンスページに切り替える単純な方法
    yo5kg (06/06)
  • 再配布不可識別子の入れ方
    jumbo (04/25)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    ぐみ (12/11)
  • 再配布不可識別子の入れ方
    eguti (06/04)
  • ナビゲーションをul、liで作成する時
    ビジログ (03/09)
  • 再配布不可識別子の入れ方
    nana (02/02)
  • 再配布不可識別子の入れ方
    TOM (01/22)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)

Archives

Category

Link

Feed

Others

無料ブログ作成サービス JUGEM

Mobile

qrcode