画像をマウスオーバーで置き換える

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

0   名前： けろりん ： 2006/05/11（木） 14:03  ID:SfIaNHpZ
【ＨＰを開いたとき①】【マウスオン②】【マウスアウト①】の順で、２枚の写真を使ってＴＯＰページに使用している画像を、マウスオーバーで入れ替えたいのですが、マウスオンした時の画像がエラーになってしまいます。

windowsXPのメモで作成してからジオシティーズを使ってＵＰしていますが、自分のＰＣではマウスオーバーされるのですが、ＨＰにＵＰするとエラーになってしまいます。
（画像のＵＲＬが間違っているわけではないと思います。）

最近ＰＣを最近買い替えており、以前のＰＣで作成したページのマウスオーバーは問題なく表示されています。
ＰＣがブロックをかけていて表示できなくなっているのでしょうか？

よろしくお願い致します

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP ">

<title>マウスオーバー</title>


<script language='javascript'><!--
mx=0;my=-100;pn=1;
var kazu=7;
for(i=0;i<=kazu;i++){document.write('<span id=ms'+i+' class=stoker style=position:absolute;left:0px;top:-100px;><img src=img/botan/pu_migi.gif></span>');}
function imagemove(){
mx=document.body.scrollLeft+window.event.clientX;
my=document.body.scrollTop+window.event.clientY;}
document.onmousemove=imagemove;
function stoker(){
document.all['ms'+pn].style.top=my+10;
document.all['ms'+pn].style.left=mx+10;
pn=pn%kazu+1;
setTimeout('stoker()');}
window.onload=stoker;
// --></script>



<STYLE>
<!--
body {scrollbar-3dlight-color:#ff99cc;
　　　　scrollbar-arrow-color:#ff99cc;
　　　　scrollbar-base-color:white;
　　　　scrollbar-darkshadow-color:#ffffff;
　　　　scrollbar-face-color:white;
　　　　scrollbar-highlight-color:#ffffff;
　　　　scrollbar-shadow-color:#ff99cc}
-->
</STYLE>

<style type=text/css>
<!--
body{
background-attachment;
background-attachment: fixed;}
-->
</style>


</head>

<body background="img/kabe/kaberibon2_pink.gif">

<div align="center">
<img src="img/1.jpg"
onmouseover="this.src= '2.jpg'"
onmouseout="this.src='1.jpg'">
<width="645" height="455" border="0">

</body>



</html>
1   名前： Z ◆XTzyosZXcL ： 2006/05/11（木） 14:03  ID:Pb89cS04
>><width="645" height="455" border="0">
　WIDTH要素というものは存在しないと思うのですが(^^;
（多分IMG要素にWIDTH属性、HEIGHT属性、BORDER属性を指定しようとして、余分な”><”を入れてしまったのだと思います。）

参考）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html
http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html

～src='1.jpg'"><width～の間の><を取り払ってみてもエラーになりますか？

HTML文法チェッカのすすめ）
http://web.xii.jp/iec/note/checker
2   名前： とおりすがり ： 2006/05/11（木） 14:03
単純にアドレス間違いでは？

<img src="img/1.jpg"
onmouseover="this.src= '2.jpg'"
onmouseout="this.src='1.jpg'" width="645" height="455" border="0">

"img/1.jpg"、"img/2.jpg"
ではないですか？
3   名前： けろりん ： 2006/05/11（木） 14:03  ID:SfIaNHpZ
>>1
Zさん、ありがとうございます。
画像の大きさを指定したかったのですが…
ご指摘のように<width="645" height="455" border="0">を消してみましたが、表示できませんでした。

>>2
とおりすがりさん、ありがとうございます。
すみません記載間違いでした。
正しくは、下記の通りです。
<img src="img/1.jpg"onmouseover="this.src='img/2.jpg'"onmouseout="this.src='img/1.jpg'"
width="645" height="455" border="0">
よろしくお願い致します。
4   名前： とおりすがり ： 2006/05/11（木） 14:03  ID:78wX.Uap
画像はもちろん、「img」フォルダを作ってそこにアップロードしているんですよね？

<img src="img/1.jpg"onmouseover="this.src='img/2.jpg'"onmouseout="this.src='img/1.jpg'"
width="645" height="455" border="0">
<img src="img/1.jpg">
<img src="img/2.jpg">

こう書いて、下二つが×になるなら、画像がないことになりますが。
5   名前： けろりん ： 2006/05/11（木） 14:03  ID:SfIaNHpZ
>>4
とおりすがりさん、度々ありがとうございます。
画像は「img」フォルダにアップロードしてあります。
img/1の画像だけ（ページを開いたときと、マウスを離したとき）が表示されて
マウスオーバーしたときのimg/2の画像だけが×になってしまいます。
名前などをつけ直して、再度アップロードしてみても、2枚目の画像だけ×になってしまいます。
マウスオーバー以外に、何枚かの画像を順番に表示させる方法はありますか？
6   名前： とおりすがり ： 2006/05/11（木） 14:03  ID:78wX.Uap
＞名前などをつけ直して、再度アップロードしてみても、2枚目の画像だけ×になってしまいます。
えーと、名前をつけなおすよりも、ロールオーバーしない画像<img src="img/2.jpg">がちゃんと表示されるかどうかが知りたいんですが。
試していただけたのでしょうか？

＞マウスオーバー以外に、何枚かの画像を順番に表示させる方法はありますか？
JavaScriptを使えば可能だと思います。
7   名前： けろりん ： 2006/05/11（木） 14:03  ID:hKvagKKB
>>6
静止画？では<img src="img/2.jpg">の画像は表示されます。
ですがマウスオーバーにすると×になってしまいます。

JavaScriptですか？
ちょっと私のレベルでは大変そうですが挑戦してみます！
いろいろと、ありがとうございました。
一覧へ戻る