都道府県穴埋めゲーム

オンマウスで別の場所に画像とテキストを表示したい

解決済

  • 質問者：Bergamot
  • 質問日時：
  • 回答数：9件

（ｊａｖａ　ｓｃｒｉｐｔはいくつか使ったことがありますが、意味はわからず配布されてるのを使っている初心者です。）

過去ログでこちらの頁を見つけましたので、オンマウスで別の場所に画像表示はできるんですが、
同時に別の場所（画像のとなりにでも）テキストも表示させたいのです。
全然違うｓｃｒｉｐｔになりますか？

あと、下記のｓｃｒｉｐｔの場合、画像Ｂなどのリンク文字の両側にリンクタグを貼れば
リンクできるんですけど、やり方間違ってはないですよね？
あわせてお願いします。


参考ＵＲＬ
http://okweb.jp/kotaeru.php3?qid=1192554

通報する

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

質問の本文を隠す

A 回答 (9件)

No.4ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

<script type="text/javascript">


<!--
function textChange(id,text){
var span_el = document.getElementById(id);
var originalText = span_el.firstChild.nodeValue;
span_el.firstChild.nodeValue=text;
return originalText;
}
//-->
</script>
</head>
<body>
<span onMouseOver="RestoreText=textChange('text1','変更する文章')" onmouseout="textChange('text1',RestoreText)">文章変更</span>
<br>
<br>
<br>
<span id="text1">このへんに文章</span>

この回答への補足

ありがとうございます！！
文字はどのブラウザでもキレイに変わりました！！
あと、私の理解が足りないのかも知れないのですけど、最初に引用していた
過去ログのソースで、絵を変えるように設定して、それに追加する形でテキストも変更
してたんで、教えていただいたscriptは追加する形でよかったんですよね？

どっちで試しても絵が変わらない状態になってしまったんですが、
やっぱりどこか間違っていますか？

補足日時：2005/10/03 22:02
通報する
    • good
    • 0
    • 件
通報する

No.9

  • 回答者： BLUEPIXY
  • 回答日時：

#8補足>


resore();
が
restore();
だと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

できました！リストアの部分はすぐ直せたのですが、結局一から全部やり直しました。
おかげさまで助かりました。ありがとうございました。


＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

お二方とも、ご親切に何度も教えてくださってありがとうございました！

通報する
お礼日時：2005/10/10 02:27

No.8

  • 回答者： BLUEPIXY
  • 回答日時：

>ただ、リンクを貼るとうまくいきませんでした。


>入れ替わった表示になってしまったんで。
リンクを貼るのは、画像を変更する側ですか、される側ですか？
ちょっと状況が良く判らないので、
いったん、そのソースを補足してくれませんか？

この回答への補足

状況を再現しようとしたら、かえって成功しました。お騒がせしました。
あとはテキストがマウスを離したら元に戻ってくれるとありがたいです。
必要ないかも知れませんが、一応ソース貼ります。
（不要なものが多い素人くさいソースですが）


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>たいとる</title>
<link rel="shortcut icon" href="favicon.ico">

<style type="text/css">
<!--
body{
scrollbar-base-color : #FFFFFF;
scrollbar-face-color : #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color : #9e9e9e;
scrollbar-3dlight-color: #9e9e9e;
scrollbar-highlight-color : #FFFFFF;
scrollbar-shadow-color : #FFFFFF;
scrollbar-darkshadow-color : #9e9e9e;
overflow:auto;
line-height:150%;
font-family:Verdana,Helvetica,Arial,Osaka,;
font-size:11px;
margin-bottom:0px;
text-align:center
}

A:link { color: #000; }
A:visited { color:#000; }
A:hover { color:red; }
A:active { color: #000; }
A { text-decoration: none; }

#waku1{
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
width:645px;
height:460px;
background:#000;
border:solid 1px black;
}

#obi{
color:#fff;
background:#000;
height:40px;
width:645px;
text-align:left;
}

#waku2{
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
width:645px;
height:360px;
background:#fff;
}

/* はりつけ画像ネスケ用 */

#waku3{
margin-top:25px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
width:645px;
height:510px;
}

#waku4{
margin-top:0px;
height:360px;
width:230px;
padding:0px;
text-align:left;
float:right;
overflow:auto;
}

#waku6{
color:#fff;
background:#000;
text-align:left;
height:50px;
width:645px;
padding:0px;
border:none;
}

h2{
text-align:center;
font-size:14px;
padding:5px;
border:none;
}

h1{
text-align:left;
font-size:26px;
color:#fff;
font-style:bold;
margin-top:12px;
margin-bottom:8px;
}

#image{
margin-top:100px;
float:right;
}

#image2{
float:left;
margin-top:50px;
margin-left:50px;
width:205px;
height:300px;
text-align="left"
}

.com{
margin-top:5px;
margin-left:0px;
font-weight: bold;
}

.item{
line-height:4px;
}

.text{
line-height:17px;
}
-->
</style>
<script type="text/javascript">

<!--
function change(fname){
document.images['CHANGE'].src=fname;
}
function restore(){
document.images['CHANGE'].src="A.jpg";
}
function textChange(id,text){
var span_el = document.getElementById(id);
var originalText = span_el.firstChild.nodeValue;
span_el.firstChild.nodeValue=text;
return originalText;
}
-->

</script>
</head>
<body>
<div id="waku3">
<div id="waku1">
<div id="obi">
<h1>たいとる</h1>
</div> <!--obi"-->
<div id="waku2">

<div id="image2">
<img name="CHANGE" src="1.png" alt="○○"><span id="text1">変更前</span>
<br>
</div>
<div id="waku4">

<div class="com">
<span onmouseover="change('a.png');RestoreText=textChange('text1','変更する文章')" onmouseout="resore();textChange('text1',RestoreText)"><a href="aa">リンクを貼ろうとしたのはココ</a></span>
</div>　　　　 <!--com-->

<div class="com">
<span onmouseover="change('b.png');RestoreText=textChange('text1','さらに変える')" onmouseout="resore();textChange('text1',RestoreText)"><a href="aa">リンクを貼ろうとしたのはココ</a></span>
</div>　　　　 <!--com-->







</div> <!--4-->
</div> <!--2-->
<div id="waku6">
文字
<div style="position:absolute;left:560;top:295;"><img src="c.png" width="216" height="238" alt="○○"></div>
</div> <!--1-->
</div> <!--3-->
</body>
</html>

補足日時：2005/10/06 01:31
通報する
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： BLUEPIXY
  • 回答日時：

>どっちで試しても絵が変わらない状態になってしまったんですが、


＃４では、
<img name="CHANGE" src="A.jpg"><span id="text1">画像の隣のテキスト</span>
みたいな並びを想定しています。
<span onmouseover="change('b.png');RestoreText=textChange('text1','変更する文章')" onmouseout="resore();textChange('text1',RestoreText)">画像＆文章変更</span>
みたいな感じでうまくいくと思います。（未検証）

この回答への補足

何度もありがとうございます！
ＵＲＬのscriptと一緒にして、Ｎｏ．７のまま使うと、うまくいきました！
ただ、リンクを貼るとうまくいきませんでした。（入れ子にはしたんですが）
他のＣＳＳの部分が間違ってるのかも知れないです。入れ替わった表示になってしまったんで。

補足日時：2005/10/05 21:23
通報する
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： yambejp
  • 回答日時：

おっと真打、＃４さんがきれいですね。


不勉強ですみません
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： yambejp
  • 回答日時：

あー、すみません。

ie以外を考えるとinnerTextを
innerHTMLにかえるだけですね。
それと文字列は通常のアンカー(<a>)タグで行けます。

とりあえずチェック用にいれてるnn7.1と火狐1.04
では動いているようです。古いブラウザなど
あまり考慮していません。場合によってはlayerに
対する処理などが必要になるでしょう。

以下ソース

<script language="javascript">
function textChange(id,text){
cacheText=document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML=text
}
function textBack(id){
document.getElementById(id).innerHTML=cacheText;
}
</script>
<img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')" onMouseOut="textBack('text1')"><br>
<a href="文章変更" onMouseOver="textChange('text1','文章を変更する')" onMouseOut="textBack('text1')">文字列</a>
<br>
<br>
<br>
<span id="text1">このへんに文書</span>

この回答への補足

<!--
function change(fname){
document.images['CHANGE'].src=fname;
}
function restore(){
document.images['CHANGE'].src="a.png";
}
//-->

<!--
function textChange(id,text){
cacheText=document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML=text
}
function textBack(id){
document.getElementById(id).innerHTML=cacheText;
}
-->





－ｂｏｄｙ－


<span onmouseover="change('b.png')" onmouseout="restore()" style="color:red;text-decoration:underline"><a href="○○○"><img src="c.gif" width="88" height="31" onMouseOver="textChange('text1','文書を変更する文書を変更する')" onMouseOut="textBack('text1')" border="0"></a></span>




どの組み合わせかわからなくなってきたんですけど、
これだとうまくいきました。これでよいんでしょうか？

補足日時：2005/10/03 22:24
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

<span onmouseover="change('b.png')" onmouseout="restore()" style="color:red;text-decoration:underline"><a href="○○○" onMouseOver="textChange('text1','文章を変更する')" onMouseOut="textBack('text1')">△△△</a>
</span>



あ、ごめんなさい。これでいけました。ありがとうございました。

通報する
お礼日時：2005/10/03 22:38

No.3

  • 回答者： yambejp
  • 回答日時：

文字列？



質問の意味がよくわかりません。
もうちょっと具体的に例示してもらえれば
お答えできるかもしれません

この回答への補足

<img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')" onMouseOut="textBack('text1')">

ここが、img タグに命令を入れているので、これが画像でなく文字列だとどうなるかという質問でした。言葉不足ですみません！



さらにもう一つ問題がありまして。
コメント表示がＩＥでしか機能しないのです。他ブラウザでも動くようにはできますか？

補足日時：2005/10/03 02:00
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

やっぱ戻すんですね（苦笑）



あまり複雑なことをしなければ当座変数は覚えておく
ことは可能です。なのでこんなかんじ

<script language="javascript">
function textChange(id,text){
cacheText=document.getElementById(id).innerText;
document.getElementById(id).innerText=text
}
function textBack(id){
document.getElementById(id).innerText=cacheText;
}
</script>
<img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')" onMouseOut="textBack('text1')"><br>
<br>
<br>
<br>
<span id="text1">このへんに文書</span>
    • good
    • 0
    • 件
通報する
この回答へのお礼

できました！！！できました！！！！ありがとうございます！！！！

あともしよろしければ、文字列でもできるかどうかだけでも教えて頂けると幸いです^ ^

通報する
お礼日時：2005/10/03 01:19

No.1

  • 回答者： yambejp
  • 回答日時：

idで管理するのが一般的ですが、テキストなら


spanやdivにidを振るのが無難でしょう。
こんなんでわかりますか？

<script language="javascript">
function textChange(id,text){
document.getElementById(id).innerText=text
}
</script>
<img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')"><br>
<br>
<br>
<br>
<span id="text1">このへんに文書</span>

この回答への補足

それと画像ではなく文字列にも
onMouseOver="textChange('text1','文章を変更する')"
は入れられますか？

補足日時：2005/10/03 00:25
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

できました！ありがとうございます！！
あとついでに、マウスを離したら元の「このへんに文書」へ戻すには
どうすればいいですか？

通報する
お礼日時：2005/10/03 00:19

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

Q質問する（無料）

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

おすすめ情報

Q質問する（無料）

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

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

おすすめ情報