クリッカブルマップとインラインフレームを組み合わせたい

締切済

質問者：yuyu0525
質問日時：2005/08/14 18:20
回答数：1件

こんにちは。自分でも検索してしらべたのですが、どうしてもわからないので、質問させていただきます。

現在、ページを製作中なのですが、タイトルのとおり、クリッカブルマップ画像の上にインラインフレームを組み合わせる方法がわからず、困っています。

透過したインラインフレームを、女の子の画像に重ねて表示してあります。この女の子の画像にメニューが書いてあるので、それをクリッカブルマップにして、インラインフレームにリンクを表示したいと思っています。

画像の上にインラインフレームを重ねて表示するのには成功しましたが、クリッカブルマップのタグを書き加えると、画面が真っ白になってしまいます。

クリッカブルとインラインを組み合わせたデザインのサイトは結構あるので参考にしようとしてみましたが今いちわからなくて・・・

回答よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： N_A_O
回答日時：2005/08/16 22:33

<html>

<head>
<title>Danseuse Chevelure Noire</title>
<script SRC="inwin.js"></script>
</script>

</head>
<body bgcolor="">
<img src="http://blancnoir.client.jp/top2.jpg" width="600" height="450" usemap="#img" border="0" style="position:absolute; top:50px; left:100px; z-index:1;">
<MAP name="img">
<AREA shape="circle" coords="460,350,75" href="javascript:cls()">
</MAP>

<IMG src="http://blancnoir.client.jp/menu.jpg" usemap="#menu" border="0" style="position:absolute; top:440px; left:150px; z-index:1;">
<MAP name="menu">
<AREA shape="rect" coords="3,4,37,24" href="javascript:iwinOpen('http://blancnoir.client.jp/info.html')" onFocus="this.blur()">
<AREA shape="rect" coords="42,2,93,36" href="javascript:iwinOpen('http://www1.rocketbbs.com/619/dcndiary.html')" onFocus="this.blur()">
<AREA shape="rect" coords="96,4,131,26" href="javascript:iwinOpen('http://blancnoir.client.jp/box.html')" onFocus="this.blur()">
<AREA shape="rect" coords="132,5,174,31" href="javascript:iwinOpen('http://blancnoir.client.jp/warp.html')" onFocus="this.blur()">
</MAP>

<div id="iWindow" style="position:absolute; top:100px; left:175px; visibility:hidden; z-index:1;">
<iframe src="http://www1.rocketbbs.com/619/dcndiary.html" border="0" frameborder="0" width="450" height="300" id="iHtml">
</iframe>
</div>
<iframe src="http://blancnoir.client.jp/_yai_nobita/top.html" width="95%" height="15" FRAMEBORDER="0" SCROLLING=no style="margin:30px 0 0 0;position:absolute; top:475px; left:px; z-index:1;">
</iframe>
</body>
</html>

inwin.js　外部ファイルの内容

function iwinOpen(imgSrc){
var lgPhoto=document.getElementById('iHtml');
lgPhoto.src = imgSrc;
var iWin=document.getElementById('iWindow');
iWin.style.visibility = 'visible';
}

function cls(){
var iWin=document.getElementById('iWindow');
iWin.style.visibility = 'hidden';
//var lgPhoto=parent.document.getElementById('iHtml');
//lgPhoto.src = "../gif/clos1.gif";
}

デザイン等で細部は調整して。