• ベストアンサー

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

オンマウスで画像表示＋表示した画像にリンク はじめまして。 今サイトを作っています。 ↓このサイトの中央部分に大きな画像とその上に タブが並んでいるのがお分かりになりますでしょうか？（参考サイト） http://www.rakuten.ne.jp/gold/han-world/ タブにふれると大きな画像が変わり、なおかつ大きな画像にもリンクが貼られるというものです。 こういうものとジャバスクリプトで同じ風にしたいです。 （参考サイトはフラッシュで作成されています） タブに触れると大きな画像が変わり、タブにリンクを貼ることはできたのですが 大きな画像にリンクさせるほうほうがよくわかりませんでした。 どこかのタグ素材サイトさんのソースをいじってなんとか触れるようなジャバの超初心者です。 どうぞお力をお貸しください 宜しくお願いいたします！

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

  • ベストアンサー
noname#84373
noname#84373
回答No.4

そして回る奴も、すぐできた！ <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>

pearllove
質問者

お礼

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

その他の回答 (3)

noname#84373
noname#84373
回答No.3

ちょっと息抜きに作ってみた！ 参考までに！ なんとなくそのページの下のほうにある３Ｄでぐるぐる回るやつ！ 似たようなのを過去に作ったからそれも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>

pearllove
質問者

お礼

ありがとうございます！すごいです！ 息抜きレベルで作れてしまうんですねーーーー まだ試していませんが取り急ぎお礼をと思い 書き込ませていただきました。 近日中にトライしてみます！！！！

  • kura07
  • ベストアンサー率50% (30/59)
回答No.2

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

  • kura07
  • ベストアンサー率50% (30/59)
回答No.1

ソースを提示していただくとありがたいですが、 var link = document.getElementById(id); link.href = "ほにゃらら"; とかすると、実現できそうですね。

pearllove
質問者

補足

ありがとうございます ソースは（これであってるかわかりませんが）以下です ------------------------- <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> -------------------------------------

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • オンマウスで画像が差し変わるタグ教えてください！

    Web制作初心者です。 Dreamweaverを使用しています。 オンマウス又はクリックで、下記のようなイメージで画像が差し変わるように 設定したいと思っています。 画像1 画像2　　　メイン画像（画像1表示デフォルト） 画像3 ↓画像2をクリックまたはオンマウスで 画像1 画像2　　　メイン画像（画像2が表示） 画像3 イメージとしては、下記サイトの各作品ページ内のような設定です。 http://book.nihonvogue.co.jp/magazine/keitodama_web/148/works.html わかりますでしょうか？ ジャバスクリプトとかスタイルシートとか、使えないため、 Dreamweaverでタグ埋め込みなどで設定したいと思っています。 でもそれができるのかどうかも不明です。 マウスオーバーの方法はわかるのですが、これとは少し違うの思い やり方が全くわからず、質問させていただきました。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。

    オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。 右側にメニューボタン（１～４）があり 各ボタンにオンマウスすると左側に画像を表示、 クリックすると別ページにリンクさせたいのです。 フレームは使っていません。 初心者なので具体的なタグを教えていただくと助かります。

  • オンマウスで画像と説明文を表示する方法

    画像ではなく文字のリンク先にオンマウスで画像と説明文を 表示したいと思っておりますが、タグが分からず困っておりますので教えていただければ光栄です。宜しくお願いいたします。

  • オンマウスで別の場所に画像とテキストを表示したい

    （ｊａｖａ　ｓｃｒｉｐｔはいくつか使ったことがありますが、意味はわからず配布されてるのを使っている初心者です。） 過去ログでこちらの頁を見つけましたので、オンマウスで別の場所に画像表示はできるんですが、 同時に別の場所（画像のとなりにでも）テキストも表示させたいのです。 全然違うｓｃｒｉｐｔになりますか？ あと、下記のｓｃｒｉｐｔの場合、画像Ｂなどのリンク文字の両側にリンクタグを貼れば リンクできるんですけど、やり方間違ってはないですよね？ あわせてお願いします。 参考ＵＲＬ http://okweb.jp/kotaeru.php3?qid=1192554

  • 画像のリンクタグで、オンマウスしても色を変えないようにしたい

    画像のリンクを作ったのですが、オンマウスすると、リンクの部分の色が変わってしまいます。 オンマウスしても、リンクの部分の色が変わらないタグはどう書けばいいでしょうか

    • ベストアンサー
    • HTML
  • テキストにオンマウスで指定箇所に画像を表示

    画像またはテキストリンクにオンマウスすると指定の場所にそれぞれのリンクで 指定の画像を表示するようにしたいのですが、色々調べてみたもののよくわかりませんでした。 リンク１にオンマウスして画像が出て、そのリンク１からマウスを放しても 別所に表示された画像はそのままで、次のリンク２にオンマウスすると 次の画像と入れ替わる、というようにしたいのですが・・・説明が下手ですみません＾＾； このようにしたい場合、どのようにしたらいいでしょうか。

  • オンマウスで画像が切り替わった先の画像にリンク

    オンマウスで画像が切り替わった先の画像に別ページのリンクを新窓で立ち上げたいのですが、方法が分かりません。 参考までに該当ページのURLを落としていきます。 http://rs-produce.net/html/deco-goods/order/or_004.html

  • 画像が表示されないんです

    WindowsXP　IE6を使っています。 リンクを貼ってある画像（バナー）やJAVA画像が表示されないことが多いんです。 四角に×が表示されるとかじゃないんです。 ソースを見るとimgタグが抜け落ちてるんです。 でも別のパソコンのWin98 IE6で見るとちゃんと表示されて、imgタグもあります。 JAVAはONになっています。 JAVAについては見れるJAVAと見れないJAVAがあります。 リンク貼ってある画像に関しても、見れる画像と見れない画像があります。 どうしたらいいんでしょうか・・・？

  • ランダム表示された画像にリンクを張る方法

    Javaスクリプトで更新ごとにランダムで画像を表示させることはできたのですがそれにはリンクがつけられませんでした。ランダムで画像を表示させさらにそれぞれリンクをはる場合はどうすればよいのでしょうか？

  • オンマウスで文字色を変える

    オンマウスでリンクの文字の色が変わる様に設定したのですが 変わってくれません。 ○今現在作っているページで、設定しても 　変わりません。 ○新規にページを作成し、同じやり方で設定すると 　出来ます。 今作っているページは、テンプレート素材をいただいたものです。 なにかオンマウスでいじることが出来ないタグの様なものって あるのでしょうか？ HTMLで直接オンマウスの設定をしてもダメでした。 詳しい方、よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する