- 締切済み
javaスクリプトでリンク付のスクロールテキストを作成したいのですが、
javaスクリプトでリンク付のスクロールテキストを作成したいのですが、困っております。 参考サイトを探し、下記の状態まで作成しております。 <html> <head> <script language="JavaScript"> <!----- var msg = "テキスト"; msg = msg + " "; msg = msg + "テキス2"; msg = msg + " "; var speed = 200; function textDisp(){ msg = msg.substring(1,msg.length) + msg.substring(0,1); document.form1.text1.value = msg; setTimeout("textDisp()",speed); } var winTarget = "_self"; var url = "http://www.yahoo.co.jp/"; function textlink(){ open(url, winTarget); } //-----> </script> </head> <body bgcolor="white" onLoad="textDisp();"> <form name="form1"> <input type="text" name="text1" size="60" onclick="textlink();" style="cursor:hand;border:none;color:#ff3399;" onMouseover="this.style.color='#ffcc00'" onMouseout="this.style.color='#ff3399'"> </form> </body> </html> 表示時に”テキスト”と”テキスト2”を独立してそれぞれ、違うリンク先に飛ばすには どのようにすればよろしいでしょうか？ また、空白をのぞき、リンク部分だけに下線をつけたいです。 CSSで指定をすると文字から空白まですべてに下線が付いてしまいます。 説明が悪いかもしれませんが、もしお分かりになる方おられましたら、参考サイトでも かまいませんのでお教えいただけますと幸いです。
- yotuyasan
- お礼率20% (2/10)
- JavaScript
- 回答数4
- ありがとう数9
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
す。 #3です。 とうこうもじすうがすくないので、みじかくしてみました。^^; function a(b,c,d,e){ var f=[],g=0,h='offsetWidth',i='px',j='style',k='nodeType',x,y,z;with(b[j])overflow='hidden',position='relative',width=c+i,height='1.3em'; for(x=0;z=b.childNodes[x++];)if(z[k]==1){with(z[j])position='absolute',top=0+i,left=g+i;g+=d+z[h];f.push(z)} (function l(){for(x=0;z=f[x++];)if(1==z[k]){y=z.offsetLeft-e;z[j].left=(0<e?(y+z[h]<0?y+=g:y):(b[h]<y?y-=g:y))+i}setTimeout(l,30);})() } a( document.getElementById( 'hoge2' ), 150, 16, -2 );
- babu_baboo
- ベストアンサー率51% (268/525)
fさんとyさんがかくなら、ばぶぅ～も！ということでかいてみました。 ぜんかくくうはくは、はんかくにしてください。 もじすうせいげんで、なまえをかしらもじしか、かけなかったことを、こころからおわびしま <!DOCTYPE html> <title></title> <body> <div id="hoge2"> <a href="http://www.yahoo.co.jp/">abcdefgihjklmnop</a> <a href="http://www.google.co.jp/">ABCDEFGHIJKLMNOPQR</a> </div> <div id="hoge1"> <a href="http://www.yahoo.co.jp/">abcdefgihjklmnop</a> <a href="http://www.google.co.jp/">ABCDEFGHIJKLMNOPQR</a> </div> <div id="fuga1"> <a href="http://www.yahoo.co.jp/">abcdefgihjklmnop</a> <a href="http://www.google.co.jp/">ABCDEFGHIJKLMNOPQR</a> </div> <div id="fuga2"> <a href="http://www.yahoo.co.jp/">abcdefgihjklmnop</a> <a href="http://www.google.co.jp/">ABCDEFGHIJKLMNOPQR</a> </div> <script><!-- var oneLineScroller = function ( node, width, space, speed ) { var style = node.style; var i, n, wmax = 0; style.overflow = 'hidden'; style.position = 'relative'; style.width = width + 'px' style.height = '1.3em'; for( i = 0; n = node.childNodes[i++]; ) if( 1 == n.nodeType ) { style = n.style; style.position = 'absolute'; style.top = '0px'; style.left = wmax + 'px'; wmax += space + n.offsetWidth ; } (function ( ) { for(var i = 0, n, j; n = node.childNodes[i++]; ) if( 1 == n.nodeType ) { j = n.offsetLeft - speed; if( 0 < speed ) { if( j + n.offsetWidth < 0) j += wmax; } else { if( node.offsetWidth < j) j -= wmax; } n.style.left = j + 'px'; } setTimeout( arguments.callee, 30 ); })() }; oneLineScroller( document.getElementById( 'hoge2' ), 150, 16, -2 ); oneLineScroller( document.getElementById( 'hoge1' ), 150, 32, -1 ); oneLineScroller( document.getElementById( 'fuga1' ), 150, 32, 1 ); oneLineScroller( document.getElementById( 'fuga2' ), 150, 32, 2 ); //--> </script>
- yyr446
- ベストアンサー率65% (870/1330)
これくらいなら、マーキー でスクロール （ブラウザーがサポートしてる限りはつかっちゃえ！） <style type="text/css"> marquee a{color:#ff3399;text-decoration:none;} marquee a:hover{color:#ffcc00} </style> </head> <body bgcolor="white"> <div style='height:2em;width:80px;cursor:hand;border:none;'> <marquee> <span> </span> <a href='http://www.yahoo.co.jp/'> Yahoo! </a> <span> </span> <a href='http://www.google.co.jp/'> Google! </a> </marquee> <div> </body>
- fujillin
- ベストアンサー率61% (1594/2576)
テキストのスクロールって好きになれませんけれど… リンクは通常のリンクタグの機能で、ロールオーバーはCSSで行い、スクロールのみスクリプトにしています。 ご参考まで。（スクロールのストップ機能なしです） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#scroll { position:relative; width:15em; height:1.2em; overflow:hidden; } div#scroll div { position:absolute; white-space:nowrap; } div#scroll a { text-decoration:none; color:#f39; display:inlin-block; padding-right:2em; } div#scroll a:hover { color:#fc0; } </style> </head> <body> <div id="scroll"> <div> <a href="http://www.yahoo.co.jp/">text1(Yahoo)</a> <a href="http://www.google.co.jp/">text2(Google)</a> </div> </div> <script type="text/javascript"> <!-- (function() { var scroll = document.getElementById("scroll"); var d, c, i, n, max = 0, tid; if (!scroll) return; d = scroll.firstChild; while (d && d.nodeName != "DIV") d = d.nextSibling; if (!d) return; c = scroll.style, n = c.width, c.width = "auto"; max = d.scrollWidth, c.width = n; c = d.childNodes, n = c.length; for (i=0; i<n; i++) d.appendChild(c[i].cloneNode(true)); d.style.width = (max * 2) + "px"; n = 0; (function R(){ n = (n - 2) % max, d.style.left = n + "px"; tid = setTimeout(R, 50); })(); })(); //--> </script> </body> </html>
関連するQ&A
- スクロールするテキストボックスの文字色について
<script language="javascript"> <!-- var speed = 400; var m1 = '<<挿入曲>> '; var m2 = '【トップページ】 ： ～ '; var m3 = '【掲示板】 ： ～ 「～」 '; var m4 = '【チャット】 ： ～ 「～」 '; var m5 = '【写真館】 ： ～ 「～」 '; var m6 = ' '; var m7 = 'もうすぐ新学期♪'; var m8 = ' '; var msg = m1 + m3 + m4 + m5 + m6 + m7 + m8; msg = msg + msg; function formMsg(){ setTimeout("formMsg()",speed); msg = msg.substring(2,msg.length) + msg.substring(0,2); document.fgColor = "green"; document.msgbox.message.value = msg; // document.msgbox.message.fontcolor("#2EE005") // msg.fontcolor("#2EE005"); msg.fontcolor("orange"); } //--> </script> ～ <form name="msgbox"> <input type="text" name="message" size="100" height="10" style="background-color:black"> </form> 上記のようなメッセージボックスをページに貼り付けているのですが、 バックグラウンドを黒、スクロールして流れる、テキストボックスのメッセージの色をオレンジに したいのです。 バックグラウンドの黒はできたのですが、テキストをオレンジにするにはどうすればよいのでしょうか？
- ベストアンサー
- JavaScript
- テキストボックスにスクロールする文字列を表示する。
テキストボックスにスクロールする文字列を表示する方法を知りました。^^ これはできたのですが、同じページで、「★メッセージ1」の他に 「別の表示」をさせたいのですがどうしたらいいんでしょうか? 例えば、「★メッセージ2」。など <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- msg="★メッセージ1 "; function scroll(){ msg=msg.substring(1,msg.length)+msg.substring(0,1); document.myform.mytext.value=msg; setTimeout("scroll()",300); } //--> </SCRIPT> </HEAD> <BODY onLoad="scroll()"> <CENTER> <FORM name="myform"> <INPUT name="mytext" size="20"> </FORM> </CENTER> </BODY> </HTML>
- ベストアンサー
- JavaScript
- テキストボックス途中で切れてしまう
テキストボックス内でスクロールする文字を作成したのですが、ＭＡＣのＩＥで見るとテキストボックスの途中で切れてしまいます。 msg="メッセージ"; function scroll(){ msg=msg.substring(1,msg.length)+msg.substring(0,1); document.myform.mytext.value=msg; setTimeout("scroll()",200); } ＝＝ ＨＴＭＬ部分 ＝＝ <form name="myform"> <input type="text" style="border:0px #ffffff;width:493px; height:18; color:#000000; font-size:13px; background-color:#ffffff" name="mytext" size="95"> </form> ＝＝＝＝＝＝＝＝＝＝＝＝ 何か指定事項が足りないのでしょうか？
- ベストアンサー
- HTML
- スクロールの中の文章を日ごとにかえる
JavaScriptをつかってテキストボックス内の文字をスクロールさせる方法ってありますよねぇ・・・この文字列を日ごとに変える方法ってあるのでしょうか？ <script language="Javascript"> <!-- msg="この部分に文字列を入力します "; function scrollText() { document.myForm.scroll.value = msg; msg = msg.substring(1,msg.length)+msg.substring(0,1); } //--> </script> <body onload="setIntereval('scroll()',200)"> <form name="myForm"> <input type="text" name="scroll" size="50"> </form> SSIを使えれば、CGIスクリプトをつかって、日ごとに表示させる文字列、すなわちmsgの部分を書き換えて変更できるのですが・・・データベースから引っ張ってきて表示させるJavaScriptを使うとユーザー側の負担が大きいのも気になりますが・・・
- ベストアンサー
- JavaScript
- java scriptで読み込むtxtでリンクする
java scriptを使って外部テキストデータをhtml内に表示させることはできたのですが、そのテキストからさらに別ページへのリンクを貼る方法はあるでしょうか？ ■java script内 var data = [ [2010.12.12,ここにコメント], [2010.11.11,'ここにコメント'], [2010.10.10,'ここにコメント'] ]; ※ここにコメントの全文または一部分をリンクさせたいです。 ■html内 <script type="text/javascript" src="data.js"></script> <script type="text/javascript"> for(var i=0;i<data.length;i++) document.write(data[i][0]+' '+data[i][1]+'<br>'); </script> よろしくお願いします。
- 締切済み
- JavaScript
- mapリンクとテキストスタイルの連動について
年末に失礼します。 ＿＿＿＿＿ ｜ ｜ aaa(テキスト) ｜ ＭＡＰ ｜ bbb(テキスト) ｜ ｜ ccc(テキスト) ￣￣￣￣￣￣ 上記のようなHTMLページを作りました。 MAPのリンクにマウスをあわせると、テキストのスタイルが変更するよう設定したいのですが、どのようにすればよいでしょう？ 自分で作ったスクリプトは以下の通りです。 ----------------------------------------------- <style type='text/css'> #s1 {color: "#000000"; font-size:14pt;} </style> <script language="JavaScript"> function setChange(){ document.getElementById("s1").style.color = "#FF0000"; document.getElementById("s1").style.fontSize = 20pt; } function setReturn(){ document.getElementById("s1").style.color = "#000000"; document.getElementById("s1").style.fontSize = 14pt; } </script> <map name="X"> <area shape=circle coords="x,y,z" onMouseover="setChange()" onMouseout="setReturn()" href="http://www.yyy.com/"> </map> <span id="s1">aaa</span> *<head><body>のタグは省略 ------------------------------------------------- ものの見事に反映しませんoTZ。修正・ご教示をお願いします。 また、bbb・cccもaaaと同様のスタイル変更をかけたいので、「この方がよい」というアイデアがありましたら、お教え下さい。 宜しくお願いします。
- ベストアンサー
- JavaScript
- テキストのデフォルト非表示に関して
テキストのデフォルト非表示に関して 以下のように、プルダウンの選択によってテキストの表示、非表示をjavascriptを使って コントロールしようとしていまいすが、そもそもデフォルトでテキストを非表示にしたい場合は どのように記述すれば良いでしょうか。。。 初歩的な質問で申し訳ありません。 よろしくお願いします。 《内容》 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection) { if (selection.value=="休み") { document.getElementById("text_note").style.display = "block"; }else if (selection.value=="出張") { document.getElementById("text_note").style.display = "block"; }else { document.getElementById("text_note").style.display = "none"; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%" VALUE=$out_goto></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </BODY>
- ベストアンサー
- JavaScript
- ジャバスクリプトが作動しません。
初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した１つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>
- ベストアンサー
- JavaScript
- リンクの線を消してもう一度表示したい。ところが・・・。
DTIでブログを作成している者です。 「リンクの下線を消して、ポイントしたときだけリンクの線が出るようにしたい」と思っています。 リンクの線を消すには、 <STYLE TYPE="text/css"> <!-- A { text-decoration:none } --> </STYLE> と入力すればよいとHTML辞書に書いてありました。 リンクをポイントしたときに下線が出るようにするには、 <STYLE TYPE="text/css"> <!-- A { text-decoration:none } A:hover {color:#FF0000;text-decoration:underline;} --> </STYLE> とタグを打ち込めばOKと書いてありました。 ここで、「リンクの下線を消してポイントだけ表示させる」ため、上記の二つ目のタグを打ち込んで文章を書き、リンクを作ったのですが、「リンクの下線を消して、ポイントした時だけ」という形では表示されません。（プレビュー画面ではちゃんとそうなっているのですが、その後ブログ上で見ても、下線もなければ、ポイントしても下線が出てきません。IEでもスレイプニルでも同じです。）正しくはどうやればいいのでしょうか？ あと、リンクごとによって「ポイントする前の最初の文字の色」を変更したいのですが、どのような順序でやればよいでしょうか？例えば最初ピンク色に設定したとして、その文章をリンクすると青文字になってしまいます。その場合、青色になった箇所のソースで、その単語の直前に<FONT color="#ff00ff">のタグを打ち込む、というやり方であってますか？教えてください！
- 締切済み
- その他([技術者向] コンピューター)
- Flashでテキストをランダム表示
現在ウェブページで、javascriptを使って、テキストメッセージをランダム表示しています。 FlashのActionScriptを使い、同等のことを行いたいのですが、どうすればよいでしょうか。 なお、出来たら表示するテキストは外部から読み込ませたいです。 よろしくお願いします。 現在使っているjavascriptは以下です。 --------------------------------- <script type="text/javascript"> var MsgCnt=5; var Msg=[]; Msg[1] = "これは1番目のメッセージです。"; Msg[2] = "これは2番目のメッセージです。"; Msg[3] = "これは3番目のメッセージです。"; Msg[4] = "これは4番目のメッセージです。"; Msg[5] = "これは5番目のメッセージです。"; var ary=[]; for(var i=0;i<MsgCnt;i++)ary[i]=i+1; function arySort(){ ary.sort(function(){return Math.random()-Math.random();}); } var cnt=0;arySort(); function RandomMsg(){ if(cnt>=MsgCnt)cnt=0,arySort(); document.write(Msg[ary[cnt++]]); } </script> <script type="text/javascript"> RandomMsg(); </script> --------------------------------- 環境： windows vista flash pro 8
- ベストアンサー
- Flash
