画像内に複数のロールオーバーリンク

[新着] Webテンプレートを仮オープンしました

0   名前： ｃｈ ： 2007/05/09（水） 02:50  ID:Bcoyrjvd sub-bK
タイトルの通り、一枚の画像の中に複数ロールオーバーリンクを設置したいのですが、
mapﾀｸﾞとロールオーバーのimgﾀｸﾞを、どう組み合わせてよいかわかりません。
リンクのみ動作し、カーソルを合わせても画像が変わりません・・
ご教授よろしくお願いします。
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/05/09（水） 02:50  ［URL］  ID:O5hEMlpW sub-r2
ということは、イメージマップでなければ、「ロールオーバ」は可能なのですね？
では、その方法を投稿してください。

次に、chさんが「ロールオーバ」を組み入れたいイメージマップも投稿してください。

それぞれを検証できれば、誰か具体的な提案ができるかもしれません。

蛇足ですが、俗に言う(半角カタカナ)は使わぬほうが無難です。
2   名前： ｃｈ ： 2007/05/09（水） 02:50  ID:Bcoyrjvd sub-bK
単体の画像でしたら、ロールオーバーを動作させることはできます。
<img src="image/●●.jpg" border="0" onMouseOver="this.src='image/●.jpg'"onMouseOut="this.src='image/●●.jpg'">　のようにしています。

ただ、一枚の画像の中にメニューの役割を持たせたいので
さらに<img src="★.jpg" alt="menu" usemap="#maptest" border="0">
<area shape="rect" coords="◎,○,▽,◇">タグを
おそらくあわせたらいいんじゃないかなぁと　思い格闘しているのですが…；

半角カタカナ気を付けます！
3   名前： カヅサツ ◆ThCi95HEzw ： 2007/05/09（水） 02:50  ［URL］  ID:O5hEMlpW sub-r2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
</head>
<style type="text/css">
#maptest{
	border-width: 0px;
}
</style>
<script type="text/javascript">
function CangeImage(obj,url){
	document.getElementById(obj.parentNode.name).src = url;
}
</script>
<body>
<p><img src="http://i.yimg.jp/images/mht/2006/0401_10_c.gif"
alt="yahoo" usemap="#maptest" id="maptest" width="675" height="60">
<map name="maptest">
<area shape="RECT" coords="5,5,650,50" href="http://www.yahoo.co.jp/" alt="Test Page 1"
onmouseover="CangeImage(this,'http://www.google.co.jp/intl/ja_jp/images/logo.gif');"
onmouseout="CangeImage(this,'http://i.yimg.jp/images/mht/2006/0401_10_c.gif');">
</map>
</body>
</html>
4   名前： ｃｈ ： 2007/05/09（水） 02:50  ID:Bcoyrjvd sub-bK
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<BODY bgcolor="white" text="black">

<STYLE type="text/css">

<STYLE TYPE="text/css">

<style type="text/css">
<STYLE TYPE="text/css">
<STYLE TYPE="text/css">
<STYLE TYPE="text/css">
<!--
A{text-decoration:none;}
-->
<!--
BODY{
background-image:url(image/.gif);
background-attachment :fixed;
}
-->
</STYLE>

<!--
a:link,a:visited{text-decoration:none;
color:white;
}
a:visited {
color:white;
text-decoration:none;
}
a:hover,a:active{
text-decoration:none;
color:white;
}
-->
</STYLE>
<!--
A{text-decoration:none;}
-->
</STYLE>

#maptest{
border-width: 0px;
}
</style>


</HEAD>
</HEAD>

</STYLE>
</STYLE>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　
<img src="image/!^.jpg" alt="25:menu" usemap="#mapmap" border="0" id="mapmap" width="606" height="448">

<map name="mapmap">

<area shape="rect" coords="63,199,114,242" alt="welcome!" <IMG src="image/^-.jpg" onMouseOver="this.src='image/^/jpg'" onMouseOut="this.src='image/^-/jpg'">

<area shape="rect" coords="453,237,607,343" href="image.html" <IMG src="image/^^.jpg" onMouseOver="this.src='image/^^-.jpg'" onMouseOut="this.src='image/^^.jpg'"> alt="img">

<area shape="rect" coords="245,23,308,79" href="about.html" <img src="image/^^^.jpg" onMouseOver="this .src='image/^^^-.jpg'"onMouseOut="this .src='image/^^^.jpg'" alt="？">

<area shape="rect" coords="84,307,261,449" href="http://www7.oekakibbs.com/" <img src="image/^^^^.jpg" onMouseOver="this.src='image/^^^^-.jpg'"onMouseOut="this.src='image/^^^^.jpg'" alt="day">
</map>
　　　　　　　


<font size=2><br>

</body>
</html>

---
すみません、お手上げ状態で
現段階でのタグの写しを載せさせていただきました；
知識がなく、お恥ずかしい限りです；　なにかヒントはありませんでしょうか…?
もしよろしければお教えを乞いたいのですが…
5   名前： カヅサツ ◆ThCi95HEzw ： 2007/05/09（水） 02:50  ［URL］  ID:lY9L7AMa sub-gm
HTMLが無茶苦茶です。ヒントどころか、何処からお教えすればよいのか見当もつきません。
非常に言いにくいことですが、chさんは九九を覚えずに因数分解にチャレンジしようとしています。
>>3 を見て「何が何だかわからない」場合は、この手の JavaScript は避けた方が無難です。

とはいえ、自分でも、それほど難しいサンプルを提出したつもりはありませんので、
多少基礎を学べばだいたいなんとかなるのではないかと思います。

http://members.jcom.home.ne.jp/jintrick/Personal/markup.html
http://www.kanzaki.com/docs/htminfo.html
http://www.asahi-net.or.jp/~sd5a-ucd/www/
http://members.jcom.home.ne.jp/pctips/
6   名前： める ： 2007/05/09（水） 02:50  ID:fIfV8NKh sub-.G
マップとロールオーバーを組み合わせる方法を探していてこちらのスレッドを見つけました。
カヅサツ様のサンプルを参考にさせていただき動作させることができましたが、
<script type="text/javascript">
function CangeImage(obj,url){
	document.getElementById(obj.parentNode.name).src = url;
}
</script>

この部分は<head>内と<body>内のどちらに書くのでしょうか。
どちらでも動作するのでどちらでもいいのでしょうか。
（わかる人から見れば常識なのかもしれませんが）教えていただけるとありがたいです。
7   名前： Z ◆XTzyosZXcL ： 2007/05/09（水） 02:50  ID:tWsRhjqj sub-Cl
>>6
><head>内と<body>内のどちらに書くのでしょうか。
　HTML4.01仕様書にズバリ書いてあります(18.2.1）のでそちらをご参照下さい。

HTML4.01仕様書該当部分（スクリプト）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/scripts.html
http://www.w3.org/TR/html401/interact/scripts.html

仕様書の読み方など（HTMLの基本）：
http://www.kanzaki.com/works/2001/pub/wsd01.html

#本来でしたら新規スレッドを立てて質問しなおしてください、となりますが、まあ、回答そのものは一言で済む話ですので。

関連する掲示板Q&A:
http://www.tagindex.com/bbs/qa05.html#a05
http://www.tagindex.com/bbs/qa05.html#a04

　次回からは便乗されないようお気をつけ下さい。
8   名前： カヅサツ ◆ThCi95HEzw ： 2007/05/09（水） 02:50  ［URL］  ID:O5hEMlpW sub-r2
>>3
あー今見たら思いっきり文法違反してる(html要素直下にscript要素が置かれちゃってる)。

[pre]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
#maptest{
border-width: 0px;
}
</style>
<script type="text/javascript">
function CangeImage(obj,url){
document.getElementById(obj.parentNode.name).src = url;
}
</script>
</head>
<body>
<p><img src="http://i.yimg.jp/images/mht/2006/0401_10_c.gif"
alt="yahoo" usemap="#maptest" id="maptest" width="675" height="60">
<map name="maptest">
<area shape="RECT" coords="5,5,650,50" href="http://www.yahoo.co.jp/" alt="Test Page 1"
onmouseover="CangeImage(this,'http://www.google.co.jp/intl/ja_jp/images/logo.gif');"
onmouseout="CangeImage(this,'http://i.yimg.jp/images/mht/2006/0401_10_c.gif');">
</map>
</body>
</html>[pre]

>>6
> この部分は<head>内と<body>内のどちらに書くのでしょうか。

どちらでも良いですが、CangeImage関数を呼び出すイベント属性より先に書いておいた方が無難です。
9   名前： める ： 2007/05/09（水） 02:50  ID:N/tYsfCJ sub-.G
ありがとうございました。
一覧へ戻る