オンマウスで画像表示＋表示した画像にリンク

解決済

質問者：pearllove
質問日時：2008/11/08 20:12
回答数：4件

オンマウスで画像表示＋表示した画像にリンク

はじめまして。
今サイトを作っています。

↓このサイトの中央部分に大きな画像とその上に
タブが並んでいるのがお分かりになりますでしょうか？（参考サイト）
http://www.rakuten.ne.jp/gold/han-world/
タブにふれると大きな画像が変わり、なおかつ大きな画像にもリンクが貼られるというものです。
こういうものとジャバスクリプトで同じ風にしたいです。
（参考サイトはフラッシュで作成されています）

タブに触れると大きな画像が変わり、タブにリンクを貼ることはできたのですが
大きな画像にリンクさせるほうほうがよくわかりませんでした。

どこかのタグ素材サイトさんのソースをいじってなんとか触れるようなジャバの超初心者です。
どうぞお力をお貸しください
宜しくお願いいたします！

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： _pipi_
回答日時：2008/11/09 09:09

そして回る奴も、すぐできた！

<html>
<body>
<div id="a" style="width:600px;height:230px;border:1px #080 solid;position:absolute;top:50px;">
<input type="button" value="右回転" onClick="sp=1;">
<input type="button" value="停止" onClick="sp=0;">
<input type="button" value="左回転" onClick="sp=-1;">
<img src="./img/0.gif" width=120" height="120" alt="ぐ～ぐるに！" onClick="location.href='http://www.google.co.jp/webhp?complete=1&hl=ja'">
<img src="./img/1.gif" width=120" height="120" alt="2" onClick="location.href='http://www'">
<img src="./img/2.gif" width=120" height="120" alt="3" onClick="location.href='http://www'">
<img src="./img/3.gif" width=120" height="120" alt="4" onClick="location.href='http://www'">
<img src="./img/4.gif" width=120" height="120" alt="5" onClick="location.href='http://www'">
<img src="./img/5.gif" width=120" height="120" alt="6" onClick="location.href='http://www'">
<img src="./img/6.gif" width=120" height="120" alt="7" onClick="location.href='http://www'">
<img src="./img/7.gif" width=120" height="120" alt="8" onClick="location.href='http://www'">
<img src="./img/8.gif" width=120" height="120" alt="9" onClick="location.href='http://www'">
<img src="./img/9.gif" width=120" height="120" alt="10" onClick="location.href='http://www'">
</div>
<script>
var x=[],y=[],b=[],o=[],n=[],op=[];
var sp=1;
window.onload=function(){
for(i=0;i<=360;i++){
zx=Math.sin(i*3.14159/180)*300;
zz=Math.cos(i*3.14159/180)*300;
zy=-150;
zk=(1000-zz)/800;
x[i]=251-zx/zk;
y[i]=-zy/zk-80;
b[i]=((700+zz)/1000)*120|0;
op[i] = 100-(600-(300+zz))/8;
}
o=document.getElementById('a').getElementsByTagName('img');
p=(360/o.length)|0;
for(var i=0,m=o.length;i<m;i++){
o[i].style.position='absolute';
o[i].style.top=y[p*i];
o[i].style.left=x[p*i];
n[i]=p*i;
}
}
setInterval(c,50);

function c(){
for(i=0;i<o.length;i++){
with(o[i].style){
left=x[n[i]];
top =y[n[i]];
width =b[n[i]];
height=b[n[i]];
zIndex=b[n[i]];
/*@cc_on @if(1) filter = 'alpha(opacity='+ op[n[i]]+ ')'; @else @*/
MozOpacity = (op[n[i]] / 100);
opacity = (op[n[i]] / 100);/*@end@*/
}
n[i]=(360+sp+n[i])%360;
}
}
</script>

- 0
- 件

通報する

この回答へのお礼

す　すごい！（＠＠）
何から何まで本当にありがとうございます！
近日中にトライしてみます！！！！

通報する

お礼日時：2008/11/11 09:28

No.3

回答者： _pipi_
回答日時：2008/11/09 08:49

ちょっと息抜きに作ってみた！

参考までに！

なんとなくそのページの下のほうにある３Ｄでぐるぐる回るやつ！
似たようなのを過去に作ったからそれもjavascriptで作れそう！^^;

<html>
<body>
<div>
<div>
<a href="url0"><img src="./img/0.gif" width="90" height="60" alt="menu0" border="0"></a>
<a href="url1"><img src="./img/1.gif" width="90" height="60" alt="menu1" border="0"></a>
<a href="url2"><img src="./img/2.gif" width="90" height="60" alt="menu2" border="0"></a>
<a href="url3"><img src="./img/3.gif" width="90" height="60" alt="menu3" border="0"></a>
<a href="url4"><img src="./img/4.gif" width="90" height="60" alt="menu4" border="0"></a>
<a href="url5"><img src="./img/5.gif" width="90" height="60" alt="menu5" border="0"></a>
</div>
<a href="url0" id="bigurl">
<img id="big" src="./img/0.gif" alt="menu0" width="540" height="360" border="0">
</a>
</div>

<script>
document.body.onmouseover = chk;
var rap = wrapping('screen', 'big', '#ffffff', 0) ;

function chk(e){
o=e?e.target: event.srcElement;
if(o.tagName!='IMG') return;
new setOpacity( rap, 100, -5, 10);
document.getElementById('big').src = o.src;
document.getElementById('big').alt = o.alt;
document.getElementById('bigurl').href = o.parentNode.href;
}
function wrapping( newId, elementId, backcolor, opacity ){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
var wrap = document.createElement('div');
wrap.id = newId;
with( wrap.style ){
position = 'absolute';
backgroundColor = backcolor;
/*@cc_on @if(1) filter = 'alpha(opacity='+ opacity+ ')'; @else @*/
MozOpacity = (opacity / 100);
opacity = (opacity / 100);/*@end@*/
top = element.offsetTop;
left = element.offsetLeft;
width = element.offsetWidth;
height = element.offsetHeight;
}
document.body.appendChild( wrap );
return document.getElementById(newId);
}

function setOpacity( elementId, opacity, step, wtime ){
this.opacitySet = 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(){
this.opacitySet( this.opacity += this.step );
if( this.opacity<0 ) { this.opacitySet(0); clearInterval( this.tmid );return; }
if( this.opacity>100 ) { this.opacitySet(100); clearInterval( this.tmid ); return; }
}
this.obj = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
if( !this.obj ) return false;
if( opacity != undefined ) this.opacitySet( opacity );
if( step != undefined ) this.step = step;
if( wtime != undefined ) this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime);
return true;
}
</script>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！すごいです！
息抜きレベルで作れてしまうんですねーーーー

まだ試していませんが取り急ぎお礼をと思い
書き込ませていただきました。
近日中にトライしてみます！！！！

通報する

お礼日時：2008/11/11 09:27

No.2

回答者： kura07
回答日時：2008/11/09 06:04

えーと、MM_preloadImages()とMM_swapImage()の内容が分かりませんね…

ページのソースに<script>～</script>のような部分はありませんか？
どこかにあるはずだとおもいます。
もしあったら、その部分も提示してください。

- 0
- 件

通報する

No.1

回答者： kura07
回答日時：2008/11/08 20:34

ソースを提示していただくとありがたいですが、

var link = document.getElementById(id);
link.href = "ほにゃらら";
とかすると、実現できそうですね。

この回答への補足

ありがとうございます
ソースは（これであってるかわかりませんが）以下です

-------------------------
<body onLoad="MM_preloadImages('画像.jpg','画像.jpg','画像.jpg')">
<br>
<table width="517" cellpadding="0" cellspacing="0">
<tr>
<td width="517"> <table width="369" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td width="171" align="left"><a href="リンク先"><img src="画像.gif" name="ksale" width="123" height="27" border="0" id="ksale" onMouseOver="MM_swapImage('tt','','画像.jpg',1)"></a></td>
<td width="171"><a href="リンク先"><img src="画像.jpg" name="kb" width="123" height="27" border="0" id="kb" onMouseOver="MM_swapImage('tt','','画像.jpg',1)"></a></td>
<td width="131"><a href="リンク先" target="_top"><img src="画像.jpg" name="kn" width="123" height="27" border="0" id="kn" onMouseOver="MM_swapImage('tt','','画像.jpg',1)"></a></td>
</tr>
</table>
<img src="画像.jpg" name="tt" width="517" height="283" id="tt"></td>
</tr></table>
-------------------------------------