FireFoxでHTML+TIMEのような動作

質問

--簡潔に--こっちの方がわかりやすいかな・・・
開く（伸ばす）用のIDと閉める（縮める）用のIDを用意して
画像をニューっと指定サイズまで伸縮したい。
また伸ばすのも縮めるのも同じIDでする場合の方法も教えていただければありがたいです。

皆様の力で何とかならないでしょうか。

--もうちょっと--スルーでもいいかも。
http://html-time.com/time/menu_down.htm
このような伸縮をテーブル内の画像で（開スイッチはTD、閉スイッチはテキストで）、（TDとテキストにはIDをつける）やりたいのですが、
FireFoxではどうも、TIMEが使えないようです。
イメージとしては
<img border="0" src="hoge.jpg" width="10" height="50" id="gazou">
<t:animate id="time1" targetElement="gazou" attributeName="width" begin="IDtuketatd.click" from="10" to="170" dur="1.2" autoreverse="false" fill="freeze" />
<t:animate id="time2" targetElement="gazou" attributeName="width" begin="IDtuketatext.click" from="170" to="10" dur="1.2" autoreverse="false" fill="freeze" />
のような感じです。

よろしくお願い致します。

回答No.2

leap_day · ベストアンサー

こんにちは

onoff.value = "CLOSE";
menu1.from = "10";

などの書き方が有効なのはＩＥのみです

加えてbehaviorプロパティも<t:animate>もおそらくＩＥのみ有効です

なので下のは改良できないかもしれないですけど上の---簡潔に---の方であればjavascriptやjsライブラリを駆使すればできると思います
※barA , barBをどのようにするのか分からなかったので適当にしてます

<script type="text/javascript">
<!--
flag=0;
function iFrame() {
if (document.getElementById("onoff").value == "OPEN" && flag == 0) {
document.getElementById("onoff").value = "CLOSE";
document.getElementById("barA").className="close";
document.getElementById("barB").className="open";
flag = 1;
width(10);
height(50);
} else {
document.getElementById("onoff").value = "OPEN";
document.getElementById("barA").className="open";
document.getElementById("barB").className="close";
flag=0;
width(180);
height(100);
}
}
function width(len) {
obj = document.getElementById("menu");
objB = document.getElementById("display");
if(flag ==1) {
len += 2;
if(len > 180)return false;
}
else {
len -= 2;
if(len < 10)return false;
}
obj.style.width = len + "px" ;
objB.style.width = len + "px";
setTimeout("width("+len+")",10);

}
function height(hlen) {
obj = document.getElementById("menu");
if(flag ==1) {
hlen += 2;
if(hlen > 100)return false;
}
else {
hlen -= 2;
if(hlen < 50)return false;
}
obj.style.height = hlen + "px" ;
setTimeout("height("+hlen+")",35);

}

//-->
</script>

<style type="text/css">
<!--
#display { overflow:hidden;}
#barB { width:180px; }
.close {display:none;}
.open {display:block;}
-->
</style>

<table cellspacing="0" cellpadding="0" style="width:100%;height:500px;border-collapse:collapse;border:solid 1px #747474;">
<tr>
<td style="width:1%;height:100%;text-align:center;vertical-align:top;border:solid 1px #747474;">

<img src="http://file.tubamesound.blog.shinobi.jp/spacer.gif" style="width:10px;height:50px;border:none;" id="menu">
<div id="display">
<p id="barA" class="open">m<br>e<br>n<br>u</p>

<div id="barB" class="close">

<p id="off">close</p>

<br>menu2<br>menu3<br>menu4<br>
</div>
</div>
</td>
<td style="idth:100%;height:100%;text-align:center;vertical-align:middle;border:solid 1px #747474;padding:10px;">
コンテンツ
</td>
</tr>
</table>

<input type="button" onclick="iFrame()" id="onoff" value="OPEN">

お礼

わー！、まさにこれです。
Javascriptはまだまだ勉強始めたばかりですが、いろいろいじってみます。
本当にありがとうございましたー。

回答No.1

SAYKA

time？
何を言いたいのかよくわからないけれど伸びるのはそれぞれの大きさのを何回もかけて描画してるだけだよ

補足

タイムって何？
参考URL：http://html-time.com/time/about_time.htm
FireFoxでは動作しないみたいなので。

サーバーへアップいたしました、
m
e
n
u
の文字の上の
透過gifの大きさで左側のmenuのTDを押し広げています。右側のTDはwidth100%。

InternetExplorerで見てみてください。
http://tubamesound.uijin.com/menutest.html

これをJavascriptのみ（またはCSSを併用）して行いたいのです。