掲示板/総合質問板/過去ログ/一覧/ イメージマップで作成したリンクに触れると指定した場所に別の画

0 名前： sinkirou ： 2007/10/03（水） 17:01 ID:JzTOh.5G sub-t1: 初めまして。HP制作初心者の者です。

早速、質問なのですが、3つ質問があります。

http://www.okimi.com/

質問１：
↑のサイトの両耳の部分のように
イメージマップで一つの画像に複数のリンクを貼り、それぞれのリンクの場所に触れると
それぞれの指定した場所にそれぞれ別の画像が現れる。

といったことをしたいのですが、どうかお教えいただけないでしょうか。

何度か、画像を別々にして、その画像に触れると指定した場所に別の画像が現れるように試みたのですが、
ブラウザによって元の画像の位置がズレてしまってうまくいかなかったもので質問致しました。

質問２：
Flashがなくても↑のサイトの目の部分のように不定期に画像を入れ替える。
といった方法があれば教えていただきたいです。

質問３：
どのブラウザで見ても画像が同じ位置に映るといった方法もあればお教えいただきたいです。

どうか、よろしくお願い致します。

1 名前：アヤ： 2007/10/03（水） 17:01 ID:I/L72zbC sub-0y: 質問1＆3
ロールオーバーじゃ駄目なんでしょうか？
実際に「試みた」というやり方を見せていただければ、他の方もアドバイスしやすいのではないでしょうか。
#ロールオーバーはJavascriptです。検索すれば山のように資料があります。

質問2
GIFアニメを作成すれば似たような感じになるかと。

2 名前：匿名： 2007/10/03（水） 17:01 ID:tut4p1uJ sub-Ds: 見本サイトは私にはまっピンクで見れませんでした。
ので、文章で感じることを。
1.リモートロールオーバーと呼ばれるテクだと思います。
　ブラウザによっては、ブラウザによって解釈が違うので、騙しだまし使うとか、特定のブラウザにしか効かない方言のようなものを使うなどで、対処する事が多いです。また、イメージマップより、土台の背景画像に、透過gifを設置したほうが楽な時もあります。いずれにせよ、具体例が無い事には、アドバイスできません。具体的にずれる、見本のソースを提示されれば、誰かが対処法を教えてくれるかも知れません。

2.不定期というのがランダムならJavaScriptでも出来そうですし、決まった順番で決まった時間で、というならアニメgifでも画像の入れ替えくらいならできます。アニメといっても、時間の間隔を長く設定すればスライドのように見えます。

3.1.と同じです。「どのブラウザでも」が、結構ネックですね。大昔のブラウザは切ってもいいのか、それに合わせて、他もダサくするのか？具体的に対応したいブラウザ名とバージョンを提示しないと有効な答えは出ない気がします。

3 名前： sinkirou ： 2007/10/03（水） 17:01 ID:JzTOh.5G sub-t1: アヤさん早速お答えありがとうございます。

試みたのは以下のです↓

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">

</style>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<br>
<br>
<br>
<br>
<div style="TEXT-ALIGN: center">
<span style="Z-INDEX: 1" LEFT: 340px; POSITION: absolute; TOP: 100px"><img title="" alt="" border="0" src="oya.jpg"></span>

<a href="about.html" onclick="window.open(this.href, '_blank', 'width=700, height=750, align=center scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0 ,'); return false"><span style="Z-INDEX: 2; LEFT: 343px; POSITION: absolute; TOP: 317px"><img title="" alt="" border="0" src="a.jpg" onMouseover="this.src='about.jpg'" onMouseout ="this.src='a.jpg'"></a></span>

<a href="gallary.html" onclick="window.open(this.href, '_blank', 'width=700, height=350, align=center scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0 ,'); return false"><span style="Z-INDEX: 6; LEFT: 402px; POSITION: absolute; TOP: 378px"><img title="" alt="" border="0" src="g.jpg" onMouseover="this.src='gallary.jpg'" onMouseout ="this.src='g.jpg'"></a></span>

<a href="bbs.html"><span style="Z-INDEX: 4; LEFT: 772px; POSITION: absolute; TOP: 481px"><img title="" alt="" border="0" src="hito1.jpg" onMouseover="this.src='bbs.jpg'" onMouseout ="this.src='hito1.jpg'"></a></span>

<a href="links.html" onclick="window.open(this.href, '_blank', 'width=700, height=750, align=center scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0 ,'); return false"><span style="Z-INDEX: 5; LEFT: 436px; POSITION: absolute; TOP: 266px"><img title="" alt="" border="0" src="l.jpg" onMouseover="this.src='links.jpg'" onMouseout ="this.src='l.jpg'"></a></span>

<a href="mail.html" onclick="window.open(this.href, '_blank', 'width=700, height=550, align=center scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0 ,'); return false"><span style="Z-INDEX: 3; LEFT: 535px; POSITION: absolute; TOP: 386px"><img title="" alt="" border="0" src="m.jpg" onMouseover="this.src='mail.jpg'" onMouseout ="this.src='m.jpg'"></a></span>

<span style="Z-INDEX: 7; LEFT: 388px; POSITION: absolute; TOP: 147px"><img title="" alt="" border="0" src="me.jpg" onMouseover="this.src='matuge.jpg'" onMouseout ="this.src='me.jpg'"></span>

<a href="profile.html" onclick="window.open(this.href, '_blank', 'width=700, height=750, align=center scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0 ,'); return false"><span style="Z-INDEX: 8; LEFT: 422px; POSITION: absolute; TOP: 164px"><img title="" alt="" border="0" src="p.jpg" onMouseover="this.src='profile.jpg'" onMouseout ="this.src='p.jpg'"></a></span>

<img name="Ga2" src="news.gif" style="position:absolute;top:474px;left:609px;display:none">
<a href="news.html" onclick="window.open(this.href, '_blank', 'width=300, height=450, align=center scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=0, top=0 ,'); return false"><img name="Ga" src="chibiahiru.jpg" border="0" style="position:absolute;top:569px;left:702px;" onMouseover="Gadasi()" onMouseOut="Gadasi2()"></a>

<a href="blog.html"><span style="Z-INDEX: 10; LEFT: 527px; POSITION: absolute; TOP: 460px"><img title="" alt="" border="0" src="b.jpg" onMouseover="this.src='blog.jpg'" onMouseout ="this.src='b.jpg'"></a></span>

<br>
<div></div>
</div>

というふうに、親画像に複数の画像を色んな位置に重ねて、その画像にリンクを貼りロールオーバーで
別の画像を表示するという風に試みたのですが、先ほど書いたようにブラウザによって見え方が違うので
始めに表示されている画像が指定した位置からズレてしまい、うまくいかなかったので、

今度は、ズレないように画像は一つでイメージマップで複数箇所にリンクを貼り、
それぞれのリンク箇所に触れるとそれぞれ指定した場所にそれぞれ別の画像を表示したくて、色々検索してみたのですが

「テキストリンクや、画像に触れると指定した場所に別の画像が表示される」
という、例はあっても、「イメージマップでリンクを貼った箇所に触れると指定した場所に別の画像が表示される」
という例はなかったので、質問した次第です。

いかがでしょうか？

4 名前：匿名： 2007/10/03（水） 17:01 ID:tut4p1uJ sub-Ds: まずは、正しいhtmlを書く練習を。
文法テストをして最初に試みた方法をもう一度試されては如何でしょうか
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.cgi
そりゃーずれるやろーと思いますけど。

最初からあるものをねこばばするんじゃなくて、自分で組み立てる意志はありますか？
「テキストリンクや、画像に　　　　　　　　触れると指定した場所に別の画像が表示される」
「イメージマップでリンクを貼った箇所に触れると指定した場所に別の画像が表示される」
の違いはなんですか？

5 名前：あや： 2007/10/03（水） 17:01 ID:TRVH9wjM sub-ND: >>4で提示されたURLではCGIに直接行ってしまうようですので

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

こちらから行ってください。