街中で見かけて「グッときた人」の思い出

サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

解決済

  • 質問者：nice36
  • 質問日時：
  • 回答数：2件

お世話になります。
JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。
下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。

記述４の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述１+２+３と組み合わせられず、作業が進まなくなってしまいました…。

フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか？

■記述１(html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js">
</SCRIPT>
</head>
<body>
<table width="400">
<a href="#" target="_blank">
<img src="http://test.com/img/01.jpg" name="imgSample"></a>
<div>
<div>
<script language="JavaScript" type ="text/javascript" src="http://test.com/01.js">
</script>
</body>
</html>

■記述２(js00)
//画像の名前を配列に代入していきます。
strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img …
function SetPicture(nVal)
{
document.imgSample.src = strPictureName[nVal];
}

■記述３(js01)
//サムネイル画像をオンマウスで拡大表示
img_num="8";
if( img_num == "" ){img_num='5';}
for ( cnt = 1 ; cnt <= img_num ; cnt++ ) {
cnt2 = cnt-1;
document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ;
}

■記述４(js02)

// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.yahoo.co.jp/";
jmp[1] = "http://bb.yahoo.co.jp/";
jmp[2] = "http://www.yahoo.co.jp/";
jmp[3] = "http://auctions.yahoo.co.jp/";
jmp[4] = "http://aeu.jp/cs/";
jmp[5] = "http://google.com/";
jmp[6] = "http://google.co.jp/";
jmp[7] = "http://news.yahoo.co.jp/";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "http://test.com/01.jpg";
img[1] = "http://test.com/02.jpg";
img[2] = "http://test.com/03.jpg";
img[3] = "http://test.com/04.jpg";
img[4] = "http://test.com/05.jpg";
img[5] = "http://test.com/06.jpg";
img[6] = "http://test.com/07.jpg";
img[7] = "http://test.com/08.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");


■完成イメージ

　　|￣￣￣￣￣￣￣|
　　|　 拡大画像　 |
　　|＿＿＿＿＿＿＿|
　　|￣||￣||￣||￣|
　　|＿||＿||＿||＿|←サムネイル

・サムネイル画像をオンマウスで拡大画像を表示
・サムネイル画像、拡大画像それぞれに指定リンクを入れる
・可能であればリンクページは　target="_blank"　で開きたい


以上がご質問内容です。
初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： _pipi_
  • 回答日時：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<title>TEST</title>
<style type="text/css">
.smlimg{ width:120px; height:80px; }
#bigimg{ width:600px; height:400px; }
#a{ width:600px; height:100px; overflow:auto; }
</style>

<div><img src="" id="bigimg"></div>
<div id="a"><div id="b"></div></div>

<script type="text/javascript">
//@cc_on
var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var jmpurl = 'htp:/test.xxx0.com htp:/test.xxx1.com htp:/test.xxx2.com htp:/test.xxx3.com htp:/test.xxx4.com htp:/test.xxx5.com '.split(' ');
var bufimg = [];

addEvent( window, 'load', init);
addEvent( 'b', 'mouseover', chgimg );
addEvent( document.body, 'click', chgurl );

function init(){
var w=0,r = Math.random()*i|0,image,p;
for(var i in simage){
bufimg[i] = new Image; bufimg[i].src = bimage[i]; image = document.createElement('img');
with( image ){ src = simage[i]; alt = bimage[i];title = jmpurl[i]; className = 'smlimg'; }
p = document.getElementById('b').appendChild( image ); w+=p.offsetWidth;
}
document.getElementById('b').style.width=w+'px'; setbimg( bufimg[r].src, jmpurl[r] );
}
function chgimg( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className && obj.className == 'smlimg') setbimg( obj.alt, obj.title );
}
function chgurl( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className == 'smlimg' || obj.id == 'bigimg' ) window.open( obj.title );
}
function setbimg(s,t){with( document.getElementById('bigimg')){src=alt=s;title=t}}
function addEvent(elementId, evt, eventHandler, flag){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag);
}
</script>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： _pipi_
  • 回答日時：

こんな書き方は駄目だと思っていますが、そういう例ということで・・。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
.smlimg{ width:120px; height:80px; }
#bigimg{ width:600px; height:400px; }
#a{ width:600px; height:100px; overflow:auto; }
</style>

<div><img src="" id="bigimg"></div>
<div id="a"><div id="b"></div></div>

<script type="text/javascript">
//@cc_on
var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var jmpurl = 'htp:/test.xxx0.com htp:/test.xxx1.com htp:/test.xxx2.com htp:/test.xxx3.com htp:/test.xxx4.com htp:/test.xxx5.com '.split(' ');
var bufimg = [];

addEvent( window, 'load', init);
addEvent( 'b', 'mouseover', chgimg );
addEvent( document.body, 'click', chgurl );

function init(){
var w=0;
for(var i in simage){
bufimg[i] = new Image; bufimg[i].src = bimage[i];
var image = document.createElement('img');
with( image ){ src = simage[i]; alt = bimage[i];title = jmpurl[i]; className = 'smlimg'; }
var p = document.getElementById('b').appendChild( image );
w+=p.offsetWidth;
}
document.getElementById('b').style.width=w+'px';
var r = Math.random()*i|0;
setbimg( bufimg[r].src, jmpurl[r] );
}
function chgimg( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className && obj.className == 'smlimg') setbimg( obj.alt, obj.title );
}
function chgurl( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className == 'smlimg' || obj.id == 'bigimg' ) window.open( obj.title );
}
function setbimg(s,t){with( document.getElementById('bigimg')){alt=s;title=t}; changeImage('bigimg',s,5,20);}
function addEvent(elementId, evt, eventHandler, flag){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag);
}
var ff=0;
function changeImage( elementId, imgsrc, step, wtime ){
this.setOpacity = function(n){
this.opacity = n;
this.obj.style./*@cc_on @if(1) filter = 'alpha(opacity='+ this.opacity+ ')'; @else @*/
MozOpacity = this.obj.style.opacity = this.opacity / 100;/*@end@*/
}
this.go = function(){
var f=0;
this.setOpacity( this.opacity += this.step );
if( this.opacity<0 || this.opacity>100 ) {
clearInterval( this.tmid );
this.obj.parentNode.removeChild( this.obj );
ff=0;
}
}
if(ff) return;
ff=1;
var tobj = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
tobj.style.position='absolute';
var wrap = document.createElement( 'img' );
wrap.src = tobj.src;
wrap.style.top = tobj.offsetTop +'px';
wrap.style.left = tobj.offsetLeft +'px';
wrap.style.width = tobj.offsetWidth +'px';
wrap.style.height = tobj.offsetHeight +'px';
wrap.style.position = 'absolute';
tobj.style.position='';
this.obj = document.body.appendChild( wrap );
tobj.src = imgsrc;
this.setOpacity( 100 );
this.step = -step;
this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime);
}

</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

昨日書き込み頂いた内容がメールで通知されず、
お礼が遅くなりました。
ご回答頂きありがとうございます。

お昼頃に上記内容をテストして正常に動作して感涙しておりますTT
知りえない記述が多く、何がどう、とお答えできませんが、
私の意図した動作そのものでした。

_pipi_さんのソースを解析するところから始めたいと思います。

本当にありがとうございました！！
勉強させて頂きます。
今後ともよろしくお願いいたしますｍ(_ _)ｍ

通報する
お礼日時：2008/12/01 11:30

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報