プロが教える店舗＆オフィスのセキュリティ対策術

onMouseで、画像を変更する方法で…

解決済

  • 質問者：mirai-r
  • 質問日時：
  • 回答数：5件

最近よく見かけるのですが、リンクの貼り付けられたボタン（gif画像等）にマウスを乗せると、その画像と同時に他のセル内の画像もそれぞれ変更するといったページを見かけます。ボタンのみの画像の変更は出来たのですが、onMouseで、2つの画像を同時に変更するにはどうすればよいでしょうか？
ちなみにそのボタンは5つ作る予定です。

通報する

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

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： ittochan
  • 回答日時：

＞よければまた回答をお願いします。


せっせ。・°°・_〆(・_・；)(；・_・)φ_・°°・。せっせ

どうでしょうか。
↓これは背景画
background="haikei.jpg"

↓これはボタンです５個あります。
<IMG alt="" src="button*.gif" name=btn id=button*>

↓これが表示される画像です。５個あります。
<IMG ・・・・ src="img*.jpg" width=103 id=gazou* >


<HTML>
<HEAD>
<META name=VI60_defaultClientScript content=JavaScript>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var ig = new Array();
function cleanup(){
detachEvent("onmouseover", event_onmouseover);
detachEvent("onmouseout" , event_onmouseout);
}
function img_disp_disp(ev) {
var img = sub1(ev);
img.style.display="";
}
function img_disp_none(ev) {
var img = sub1(ev);
img.style.display="none";
}
function sub1(ev){
if(ev){var btn=ev.target;}
else {var btn=event.srcElement;}
var s = btn.id.substr(6,1);
return document.getElementById("gazou" + btn.id.substr(6,1));
}
function window_onload() {
ig = document.getElementsByName("btn");
for(i=0;i<ig.length;i++){
ig[i].onmouseover=img_disp_disp;
ig[i].onmouseout=img_disp_none;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY LANGUAGE=javascript onload="return window_onload()">
<P>
<TABLE cellSpacing=1 cellPadding=1 width="655" border=0 HEIGHT="339">
<TR><TD HEIGHT="136" width="72">
<IMG alt="" src="button1.gif" name=btn id=button1>
</TD><TD background="haikei.jpg" HEIGHT="271" width="495" ROWSPAN="2">
<DIV STYLE="WIDTH: 405px; HEIGHT: 347px">
<IMG style="display: none; z-index: 100; left: 424; position: absolute; top: 90" height =77 src="img1.jpg" width=103 id=gazou1 >
<IMG style="display: none; z-index: 101; left: 350; position: absolute; top: 255" height =77 src="img2.jpg" width=103 id=gazou2 >
<IMG style="display: none; z-index: 102; left: 147; position: absolute; top: 77" height =77 src="img3.jpg" width=103 id=gazou3 >
<IMG style="display: none; z-index: 102; left: 283; position: absolute; top: 134" height =77 src="img4.jpg" width=103 id=gazou4 >
<IMG style="display: none; z-index: 102; left: 154; position: absolute; top: 217" height =77 src="img5.jpg" width=103 id=gazou5 >
</DIV>　
</TD><TD HEIGHT="136" WIDTH="68">
<IMG alt="" src="button3.gif" name=btn id=button3>
</TD></TR>
<TR><TD HEIGHT="135" width="72">
<IMG alt="" src="button2.gif" name=btn id=button2>
</TD><TD HEIGHT="135" WIDTH="68">
<IMG alt="" src="button4.gif" name=btn id=button4>
</TD></TR>
<TR><TD HEIGHT="56" WIDTH="647" COLSPAN="3">
<P ALIGN="center">
<IMG alt="" src="button5.gif" name=btn id=button5>
</P>
</TD></TR></TABLE>
</BODY>
</HTML>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！
自分の作ろうと思ってたのとは少し違ったのですが、逆に『こんなのもあるのか！』と、面白くていいな～と思いました！
参考にさせていただきます。
わざわざありがとうございましたm(__)m

通報する
お礼日時：2002/10/09 15:35

No.5

  • 回答者： cat_2001
  • 回答日時：

もう遅いでしょうかね・・・？念の為、5個にした形でソースを書きました。


しかし、先日の私のソースは大変不親切で「う～ん、分かりにくい！！」と自分で思ってしまったので、もう少し分かりやすく画像名を変えてみました。（笑）
これで「ボタン」と「変更したい画像」との差がはっきり理解できるかと思います。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title></title>
<SCRIPT Language="JavaScript">
function htmlChange(text) {
document.change1.src = text;
}
function htmlUnChange() {
document.change1.src = "images/change.gif";
}
<!--
//ブラウザの判別
var agent = navigator.userAgent;
var nv = 0;
if(agent.indexOf("Mozailla/2") == 0){var nv = 1}

//新規画像の読み込み
if(nv != 1)
document.onimage1 = new Image();
document.onimage1.src="./images/button1_2.gif";

document.onimage2 = new Image();
document.onimage2.src="./images/button2_2.gif";

document.onimage3 = new Image();
document.onimage3.src="./images/button3_2.gif";

document.onimage4 = new Image();
document.onimage4.src="./images/button4_2.gif";

document.onimage5 = new Image();
document.onimage5.src="./images/button5_2.gif";

//■画像の入れ換え
function menuon(i){
if(nv != 1){
if(i == 1){document.menu1.src="./images/button1_2.gif"}
if(i == 2){document.menu2.src="./images/button2_2.gif"}
if(i == 3){document.menu3.src="./images/button3_2.gif"}
if(i == 4){document.menu4.src="./images/button4_2.gif"}
if(i == 5){document.menu5.src="./images/button5_2.gif"}
}
}
function menuout(i){
if(nv != 1){
if(i == 1){document.menu1.src="./images/button1_1.gif"}
if(i == 2){document.menu2.src="./images/button2_1.gif"}
if(i == 3){document.menu3.src="./images/button3_1.gif"}
if(i == 4){document.menu4.src="./images/button4_1.gif"}
if(i == 5){document.menu5.src="./images/button5_1.gif"}
}
}
// -->

</script>
</head>

<body bgcolor="#FFFFFF">
<table border="0" cellpadding="0" cellspacing="0" width="280">
<tr>
<td><img border="0" src="images/change.gif" NAME="change1" width="280" height="200"></td>
</tr>
<tr>
<td align="center"><a href="test1.htm" onMouseover="htmlChange('images/change_1.gif');menuon(1);" onMouseout="htmlUnChange();menuout(1);"><img border="0" src="images/button1_1.gif" NAME="menu1" width="150" height="40"></a></td>
</tr>
<tr>
<td align="center"><a href="test2.htm" onMouseover="htmlChange('images/change_2.gif');menuon(2);" onMouseout="htmlUnChange();menuout(2);"><img border="0" src="images/button2_1.gif" NAME="menu2" width="150" height="40"></a></td>
</tr>
<tr>
<td align="center"><a href="test3.htm" onMouseover="htmlChange('images/change_3.gif');menuon(3);" onMouseout="htmlUnChange();menuout(3);"><img border="0" src="images/button3_1.gif" NAME="menu3" width="150" height="40"></a></td>
</tr>
<tr>
<td align="center"><a href="test4.htm" onMouseover="htmlChange('images/change_4.gif');menuon(4);" onMouseout="htmlUnChange();menuout(4);"><img border="0" src="images/button4_1.gif" NAME="menu4" width="150" height="40"></a></td>
</tr>
<tr>
<td align="center"><a href="test5.htm" onMouseover="htmlChange('images/change_5.gif');menuon(5);" onMouseout="htmlUnChange();menuout(5);"><img border="0" src="images/button5_1.gif" NAME="menu5" width="150" height="40"></a></td>
</tr>
</table>
</body>
</html>

です。実際動く事は立証済みです。
・・・これを丸まるコピペでもいいのですが、ちゃんと「どこがどうゆうようなスクリプトなのか、そのおおよその意味」を少しでもいじってみながら理解してくださいね。（そうしないと、また6個になったら・・・100個になったら・・・等、カスタムする時に分からなくなりますよ。）
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： cat_2001
  • 回答日時：

今日は。


こんなんで如何でしょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title></title>
<SCRIPT Language="JavaScript">
function htmlChange(text) {
document.change1.src = text;
}
function htmlUnChange() {
document.change1.src = "images/change.gif";
}
<!--
//ブラウザの判別
var agent = navigator.userAgent;
var nv = 0;
if(agent.indexOf("Mozailla/2") == 0){var nv = 1}

//新規画像の読み込み
if(nv != 1)
document.onimage1 = new Image();
document.onimage1.src="./images/change_2_2.gif";

//■画像の入れ換え
function menuon(i){
if(nv != 1){
if(i == 1){document.menu1.src="./images/change_2_2.gif"}
}
}
function menuout(i){
if(nv != 1){
if(i == 1){document.menu1.src="./images/change_2.gif"}
}
}
// -->
</script>
</head>

<body>
<table>
<tr>
<td><img border="0" src="images/change.gif" NAME="change1" width="300" height="200"></td>
</tr>
<tr>
<td><a href="test.htm" onMouseover="htmlChange('images/change_1.gif');menuon(1);" onMouseout="htmlUnChange();menuout(1);"><img border="0" src="images/change_2.gif" NAME="menu1" width="100" height="50"></a></td>
</tr>
</table>
</body>

</html>

この回答への補足

こんにちは！回答有難うございます_(_ _)_
まさしくこんな感じです！
この、下のほうにあるリンクを貼り付けたボタン（画像）を増やす場合は、どこを書き加えていくといいのでしょうか？（5個くらいまで増やします）

すみません、初心者なものでくだらない質問ばかりで…(>_<;)
よければまた宜しくお願いしますm(__)m

補足日時：2002/10/09 15:35
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： cat_2001
  • 回答日時：

今日は。


こんなんで如何でしょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title></title>
<SCRIPT Language="JavaScript">
function htmlChange(text) {
document.change1.src = text;
}
function htmlUnChange() {
document.change1.src = "images/change.gif";
}
<!--
//ブラウザの判別
var agent = navigator.userAgent;
var nv = 0;
if(agent.indexOf("Mozailla/2") == 0){var nv = 1}

//新規画像の読み込み
if(nv != 1)
document.onimage1 = new Image();
document.onimage1.src="./images/change_2_2.gif";

//■画像の入れ換え
function menuon(i){
if(nv != 1){
if(i == 1){document.menu1.src="./images/change_2_2.gif"}
}
}
function menuout(i){
if(nv != 1){
if(i == 1){document.menu1.src="./images/change_2.gif"}
}
}
// -->
</script>
</head>

<body bgcolor="#FFFFFF">
<table border="0" cellspacing="1">
<tr>
<td><img border="0" src="images/change.gif" NAME="change1" width="300" height="200"></td>
</tr>
<tr>
<td><a href="products_w.htm" onMouseover="htmlChange('images/change_1.gif');menuon(1);" onMouseout="htmlUnChange();menuout(1);"><img border="0" src="images/change_2.gif" NAME="menu1" width="100" height="50"></a></td>
</tr>
</table>
</body>

</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ittochan
  • 回答日時：

こういうのでしょうか？



<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var ig = new Array();
function cleanup(){
detachEvent("onmouseover", event_onmouseover);
detachEvent("onmouseout" , event_onmouseout);
}
function ig_onmouseover() {
ig[0].src="img5.jpg";
ig[1].src="img5.jpg";
ig[2].src="img5.jpg";
ig[3].src="img5.jpg";
}
function ig_onmouseout() {
ig[0].src="img1.jpg";
ig[1].src="img2.jpg";
ig[2].src="img3.jpg";
ig[3].src="img4.jpg";
}
function window_onload() {
var nn=document.getElementById("ig");
ig = nn.getElementsByTagName("IMG");
//ig[0]は最初の画像のこと
ig[0].onmouseover=ig_onmouseover;
ig[0].onmouseout=ig_onmouseout;
}
//-->
</SCRIPT>
</HEAD>
<BODY LANGUAGE=javascript onload="return window_onload()">
<P><DIV id=ig>
<IMG height=77 src="img1.jpg" width=103>
<IMG height=77 src="img2.jpg" width=103>
<IMG height=77 src="img3.jpg" width=103>
<IMG height=77 src="img4.jpg" width=103>
</DIV>
<P></P>
</BODY>
</HTML>

この回答への補足

すみませんm(__)m
私の説明が悪かったようで、ちょっと違いました。
私の作りたいものと全く同じ機能を持っているページがありました！
↓↓↓↓
http://www.bloomix.com/
このページのような感じなんですが、私にJavaScriptの知識がないので、ソースを見ても全然わかりません(>_<)
よければまた回答をお願いします。

補足日時：2002/10/08 13:23
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報