ベストアンサー

マウスオーバーでリンク（複数）画像を表示させるには？

2004/08/25 00:53

はじめての質問をさせていただきます。コピペが専門です。ＨＴＭＬ、JavaScriptを始めたばかりです。ソースを開いて、記述を変えたり、一つ一つの意味も勉強中です。私のやりたい（知りたいこと）述べます。ホームページに旅行記を書いています。例えば人，街並み、等を（複数リンクさせたい時、別画面、小窓ではなく）レイヤーとして表示させる時の関数、ルーチンと引数、戻り値のソースの記述方法です。コピペで取得した、リンクが一つの場合は、あるのですが。下記です <BODY> <DIV style="width : 380px;height : 192px;top : 21px;left : 199px; position : absolute; z-index : 1; visibility : visible; " id="Layer1" align="center"><IMG id="image" src="sample.jpg" style="HEIGHT: 0px; WIDTH: 0px; top : 16px; left : 0px; "> <DIV style="top : 0px;left : 0px; position : absolute; z-index : 1; " id="Layer2">・・・紀行文・・・・<BR> <BR> <DIV style="text-align: center">旅の始まり<A href="#" onMouseOver="zoom();">画像!</A>紀行文・・・・・・<BR> </DIV> </DIV> </DIV> </BODY> 段階的な質問をさせてください。上記のソースですが、一つ一つの意味はそれなりに理解できるのですが。関数ルーチンと引数、戻り値のソースの記述方法です。ヒントでよろしいのでお教えください。また参考urlもソースと毎日にらめっこしていますがなかなか・・・この難度は松？竹？梅？じっくりやりますのでよろしく。

imadoki
お礼率77% (7/9)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Shinoa
ベストアンサー率92% (12/13)

2004/08/25 15:05 回答No.2

こんな感じですか？サンプル程度なので、特にイメージ切替時の制御はしてませんが、少しでも参考になれば幸いです。 <SCRIPT language="JavaScript"> var mode=0; imagePath=new Array( 　　"sample1.jpg", 　　"sample2.jpg", 　　"sample3.jpg" ) ; function zoom( id ) { 　document.images[ "image1" ].src = imagePath[ id ] ; 　if(mode==0){ 　　if (document.images[ "image1" ].style.pixelWidth < 288 ) { 　　　document.images[ "image1" ].style.pixelWidth += 8; 　　　document.images[ "image1" ].style.pixelHeight += 8; 　　　window.setTimeout("zoom( " + id + " )", 20); 　　} 　　else { 　　　mode=1; 　　} 　} 　else { 　　if (document.images[ "image1" ].style.pixelWidth >= 0 ) { 　　　document.images[ "image1" ].style.pixelWidth -= 8; 　　　document.images[ "image1" ].style.pixelHeight -= 8; 　　　　window.setTimeout("zoom( " + id + " )", 20); 　　} 　　else { 　　　mode=0; 　　} 　} } </SCRIPT> <BODY> <center> 　<A href="#" onMouseOver="zoom( 0 );">画像!</A><br> 　<A href="#" onMouseOver="zoom( 1 );">画像!</A><br> 　<A href="#" onMouseOver="zoom( 2 );">画像!</A><br> </center> 　<IMG id="image1" src="" style="HEIGHT: 0px; WIDTH: 0px;top : 16px;left : 0px;"><br> </BODY>

質問者

お礼 2004/08/25 21:44

有難うございます。うまく動作いたしました。ただ、スタイルで位置を絶対と指定いたしました。欲を言いますと画像を開く位置をそれぞれ任意にしたいと思っています。これは自分でやってみます、できない時は、アドバイスお願いいたします。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

potedora
ベストアンサー率47% (66/140)

2004/08/25 16:13 回答No.3

#1です。質問内容がわかりました。こんなのでどうですか？ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <SCRIPT language=JavaScript> function zoomUp() { if (image.style.pixelWidth < 288 ) { image.style.visibility = "visible" ; image.style.pixelWidth += 8; image.style.pixelHeight += 8; window.setTimeout("zoomUp()", 20); } } function zoomDown() { if (image.style.pixelWidth >= 0 ) { image.style.visibility = "visible" ; image.style.pixelWidth -= 8; image.style.pixelHeight -= 8; window.setTimeout("zoomDown()", 20); } else { image.style.visibility = "hidden" ; } } </SCRIPT> </HEAD> <BODY> <DIV id="image" style="position:absolute;height:0px;width:0px;top:0px;left:0px;visibility:hidden;"> <IMG src="sample1.jpg" height="50%"> <IMG src="sample2.jpg" height="50%"> </DIV> <CENTER> ・・・紀行文・・・・<BR><BR> 旅の始まり<A href="#" onMouseOver="zoomUp();" onMouseOut="zoomDown();">画像!</A>紀行文・・・・・・<BR> </CENTER> </BODY>

ログインすると、全ての回答が全文表示されます。

potedora
ベストアンサー率47% (66/140)

2004/08/25 10:50 回答No.1

似たような記述がありました。

参考URL：: http://www.mco.ne.jp/~splan/javascript/zoomfactor.html

質問者

補足 2004/08/25 12:09

有難うございます。ＵＲＬの <img name="myimage" src="ここに画像ファイルを書きます。">が複数ある場合は？なんです。１回目の質問で字数の関係で＜ｂｏｄｙ＞以下を書きましたが、META から書きますと <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE></TITLE> <SCRIPT language=JavaScript> var mode=0; function zoom() { if(mode==0){ if (image.style.pixelWidth < 288 ) { image.style.pixelWidth += 8; image.style.pixelHeight += 8; window.setTimeout("zoom()", 20); } else { mode=1; } } else { if (image.style.pixelWidth >= 0 ) { image.style.pixelWidth -= 8; image.style.pixelHeight -= 8; window.setTimeout("zoom()", 20); } else { mode=0; } } } </SCRIPT> <STYLE type="text/css">  </STYLE> </HEAD> なんです。よろしくお願いします。

ログインすると、全ての回答が全文表示されます。