「Mac+Mozilla」でロールオーバーが表示されない

0   名前： いち ： 2006/04/13 11:20
画像にロールオーバー効果をつけました。
Win+IE
Win+Mozilla
Mac+IE
Mac+Safari
では正常に表示されますが、
Mac+Mozilla
だけうまくいきません。
ロールオーバー効果が無いばかりか、
画像自体が表示されません。
どうやったら表示できるようになるか、教えてください！

----------------------(ここから)----------------------------
<SCRIPT language="JavaScript">
<!--HPB_SCRIPT_ROV_50

// HpbImgPreload: 画像のプリロードを行ないます
//
function HpbImgPreload()
{
var appVer=parseInt(navigator.appVersion);
var isNC=(document.layers && (appVer >= 4)); // Netscape Navigator 4.0 or later
var isIE=(document.all && (appVer >= 4)); // Internet Explorer 4.0 or later
var isDOM1 = (document.getElementById);
if (isNC || isIE || isDOM1)
{
if (document.images)
{
var imgName = HpbImgPreload.arguments[0];
var cnt;
swImg[imgName] = new Array;
for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++)
{
swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image();
swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt];
}
}
}
}
// HpbImgFind: Imageオブジェクトを探します
//
function HpbImgFind(doc, imgName)
{
for (var i=0; i < doc.layers.length; i++)
{
var img = doc.layers[i].document.images[imgName];
if (!img) img = HpbImgFind(doc.layers[i], imgName);
if (img) return img;
}
return null;
}
// HpbImgSwap: 画像を入れ換えます
//
function HpbImgSwap(imgName, imgSrc)
{
var appVer=parseInt(navigator.appVersion);
var isNC=(document.layers && (appVer >= 4)); // Netscape Navigator 4.0 or later
var isIE=(document.all && (appVer >= 4)); // Internet Explorer 4.0 or later
var isDOM1 = (document.getElementById);
if (isNC || isIE || isDOM1)
{
if (document.images)
{
var img = document.images[imgName];
if (!img) img = HpbImgFind(document, imgName);
if (img) img.src = imgSrc;
}
}
}
var swImg; swImg=new Array;
//-->
</SCRIPT><SCRIPT language="JavaScript">
<!--HPB_SCRIPT_PLD_50
HpbImgPreload('_HPB_ROLLOVER1', '***1.gif', ***2.gif');
//-->
</SCRIPT>
<TABLE class=RegionBorder cellSpacing=2 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=PortletText2 vAlign=top bgColor=#f7f7e7>
<A href="+++.html" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1','***1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','***2.gif');"><IMG border="0" name="_HPB_ROLLOVER2" src="***1.gif">
</A>
　　</TD>
　</TR>
<TABLE>
----------------------(ここまで)----------------------------

1   名前： m035 ： 2006/04/13 11:20  ［URL］
指摘
1.languageよりはtypeでJavaScriptを指定してください。
2.
>HpbImgPreload('_HPB_ROLLOVER1', '***1.gif', ***2.gif');
のシングルコーテーションが足りないです。（***2.gifの部分）
3.document.imagesを使うのだから、無駄なブラウザ判別はいらないはずです。
（document.imagesが使えるかどうかだけでいいと思います）
4.tableタグのtbodyとtableの閉じタグがないです。（tableの閉じタグは/が抜けています）
5.imgにalt（代替テキスト）を指定したほうがいいでしょう。（一応適当につけておいたので変更してください）

シンプルにしてみたのが以下です。
動作テストはWin上でIE6とFireFox1.5.0.1でしかしていません。
正直に言うと理解できないものをおいそれと使うのはお勧めしません。
（ホームページビルダーを使っているようですが･･･）
もうひとつ言うなら、bgColor="#f7f7e7"のように指定するよりは、
style属性かstyleタグもしくは外部cssで指定したほうがいいと思います。
（これについては面倒なので未修正です）

<HTML>
<HEAD>
<TITLE>TEST</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
var swImg=new Array();

// ImgPreload: 画像のプリロードを行ないます
function ImgPreload(){
if(document.images){
for(var cnt=0,len=arguments.length;cnt<len;cnt++){
swImg[arguments[cnt]]=new Image();
swImg[arguments[cnt]].src=arguments[cnt];
}
}
}

// ImgSwap: 画像を入れ換えます
function ImgSwap(imgName,imgSrc){
if(document.images)document.images[imgName].src=swImg[imgSrc].src;
}

ImgPreload('***1.gif','***2.gif');
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE class="RegionBorder" cellSpacing="2" cellPadding="0" width="100%" border="0">
<TBODY>
<TR>
<TD class="PortletText2" vAlign="top" bgColor="#f7f7e7">
<A href="+++.html" onmouseout="ImgSwap('ROLLOVER1','***1.gif')" onmouseover="ImgSwap('ROLLOVER1','***2.gif')"><IMG border="0" name="ROLLOVER1" src="***1.gif" alt="img">
</A>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
2   名前： S ： 2006/04/13 11:20
　JavaScriptとJScriptの違いや、JavaScriptもバージョン違いがあると思うので、それらを踏まえた上でないと結論はでないと思う。
（JavaScriptは機種を問わないためのものだけれど、JScriptとごっちゃにして解説している資料もあるだろうし。）

検索で見つけた仕様書(和訳)：
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/

　なお、ホームページビルダーでも初期設定に注意することでそこそこよいHTMLは出力できるのでご参考まで。

「ホームページ・ビルダーV9ではじめてのWebページ」
http://hpbuilder.net/
3   名前： Pid ： 2006/04/13 11:20
>>0
> 画像自体が表示されません。

それならば，>>1 で m035 さんが指摘するように，まず HTML のミスを疑うべきですね。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
あと，ブラウザのバージョンも書いて下さい。

>>1
swImage を再利用しないなら

function ImgPreload () {
　　if (document.images)
　　　　for (var cnt = 0, len = arguments.length; cnt < len; cnt++)
　　　　　　(new Image).src = arguments[cnt];
}

で十分かも。

>>2
> JavaScriptは機種を問わないためのものだけれど

Netscape の JavaScript と，Microsoft の JScript を元にして，文法および環境に依存しないオブジェクトの標準化を行ったのが ECMAScript です。

※バージョンついでに，>>0 のスクリプトに見られる Function.arguments プロパティは JavaScript 1.4 で廃止されました。現在では >>1 のように，arguments にはその関数内でのみアクセス可能です。
4   名前： S ： 2006/04/13 11:20
　失礼、機種問わず目的はJava言語のほうだった。

http://www.scollabo.com/banban/term/java.html

　見つけた仕様書もECMAScriptのものだった。ご指摘ありがとう。
5   名前： 神崎 ： 2006/04/13 11:20
> （略）
> では正常に表示されますが、
本当に正常に表示できますか？
キャッシュを読んでいるだけの可能性もあるので、
Shiftキーを押しながら再読込ボタンを押して、読み直してみてください。
または、これらのブラウザで表示確認を行った後で何らかの編集をしたにもかかわらず、MacMZだけで表示確認をしていませんか？

スワップさせる画像の名前の指定が間違っています。
画像のスワップ設定画面で、_HPB_ROLLOVER2（1ではなく）を変更するようにしてみてください。

もし、HTMLやJavaScriptを自作（や一般に公開されているサンプル）のものに書き換えると、
ホームページビルダー（以下 HPB）で書き換えたときに別の不具合が起きたり、
変更内容によっては以前消したものと同じものを、HPBが改めて挿入しますので、
同じ効果のスクリプトが、自作の部分とHPBが挿入する部分の、二重に書かれることになります。

> m035さん
> 正直に言うと理解できないものをおいそれと使うのはお勧めしません。
その通りではありますが、
今までオーサリングソフトを使っていてJavaScriptを知らない人には、
m035さんの書かれるスクリプトをコピペで使うのはお薦めできない、
ということになるのではないでしょうか？
もちろん、質問者がJavaScriptをどれほど知っているか、というところにも関係しますが。

私は、HPBを使われている方には、HPBで修正する方法を教える方が良いと思います。
6   名前： いち ： 2006/04/13 11:20
m035 さん＞
ご指摘ありがとうございます。
> 正直に言うと理解できないものをおいそれと使うのはお勧めしません。
試行錯誤の勉強中ですので、皆様のコメントを参考に、「理解できる」ようになるまでがんばってみたいと思います。

S さん・Pid さん・神崎 さん＞
皆様のコメントも非常に参考になりました。
教えていただき、ありがとうございました。







一覧へ戻る