解決済み

マウスオーバーでリンク(複数)画像を表示させるには?

  • 暇なときにでも
  • 質問No.974693
  • 閲覧数374
  • ありがとう数1
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 77% (7/9)

はじめての質問をさせていただきます。コピペが専門です。HTML、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も
ソースと毎日にらめっこしていますがなかなか・・・
この難度は松?竹?梅?
じっくりやりますのでよろしく。

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

  • 回答No.2

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

こんな感じですか?
サンプル程度なので、特にイメージ切替時の制御はしてませんが、少しでも参考になれば幸いです。

<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>
お礼コメント
imadoki

お礼率 77% (7/9)

有難うございます。うまく動作いたしました。
ただ、スタイルで位置を絶対と指定いたしました。

欲を言いますと画像を開く位置をそれぞれ任意にしたいと思っています。これは自分でやってみます、できない時は、アドバイスお願いいたします。
投稿日時 - 2004-08-25 21:44:53
感謝経済、優待交換9月20日スタート

その他の回答 (全2件)

  • 回答No.3

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

#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>
  • 回答No.1

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

似たような記述がありました。
補足コメント
imadoki

お礼率 77% (7/9)

有難うございます。URLの
<img name="myimage" src="ここに画像ファイルを書きます。">が複数ある場合は?なんです。
1回目の質問で字数の関係で<body>以下
を書きましたが、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">
<!--
IMG{
position : absolute;
}
BODY{
position : absolute;
}
-->
</STYLE>
</HEAD>

なんです。よろしくお願いします。
投稿日時 - 2004-08-25 12:09:09
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ