画像Aをクリックすると画像Bとテキストが出てくる

[新着] Webテンプレートを仮オープンしました

0   名前： sacco ： 2006/08/01（火） 13:01  ID:pMZRxa2t
いつもお世話になってます。

早速ですが
http://www.soup-web.net/_main.html#about
の<!--house-->(243行目)のところで
お家の画像をクリックすると
煙突からから煙とテキストが出てくるみたいにしたいのです。
(具体的にはhttp://www.soup-web.net/_main_about.html#aboutのように)

さらに、出てきたテキスト内の「× close」をクリックして
煙とテキストを非表示にするようにしたいのです。

画像の表示／非表示を切り替えるサンプルは結構あるのですが
テキストの表示／非表示のサンプルが見つからなくて困っています。

JavaScriptはコピペしてちょっと値を変えるぐらいのことしかできません。
どなたかご助言よろしくお願いいたします。
1   名前： sacco ： 2006/08/01（火） 13:01  ID:pMZRxa2t
N_A_Oさんにメールで教えていただいた方法で
ばっちりいけました！
ありがとうございます。

１つ気になったのが、今回教えていただいたサンプルでは
画面が自動で目的地（今回の場合、お家の画像）まで
スクロールするようになってますが、
自分のファイルにコピペしたファイルではスクロールしないんです。
onLoadで何か書いてあるのかな？と思って
ファイル内を検索したんですがなにもひっかかりませんでした。

このスクロールの記述はどこにしてあるんでしょうか？
とても気に入ったので、是非実現させたいのです。
自分であちこち見て回りましたが、ちょっとわからなかったので...

どうぞよろしくお願いいたします。
2   名前： えじ ◆HtEaXt.II9 ： 2006/08/01（火） 13:01  ID:WP1ytrfY
>>0
saccoさんへ
こんにちは、管理人のえじです。

別のサイトへ移動された場合は、移動先のURLを提示した上でこちらの質問を終了させてください。
※そうしておかないと、こちらのスレッドにもレスがついてしまう可能性があります。

また、メールで教えていただいた内容を掲示板上でやり取りされましても、第三者にはその内容が把握できません。ですので、そのようなやり取りは掲示板上ではご遠慮ください。


しばらくお待ちしますが、特にレスが無い場合はこのスレッドをロックさせていただきます。
3   名前： N_A_O ： 2006/08/01（火） 13:01  ID:OD2twXVf
>>2
管理人えじさんへ。申し訳有りません。N_A_Oです。
こちらに書込んだ後にメールを送ったつもりでいたんですが、
来てみたら、送信？を忘れたようで、惚けたかな。

内容は下記です。

<SCRIPT>
//http://allabout.co.jp/internet/javascript/closeup/CU20010415/index2.htm#hideLAYER
function showLAYER(idName){
if ( document.getElementById )
document.getElementById( idName ).style.visibility = 'visible'
else if ( document.all ) document.all( idName ).style.visibility = 'visible'
else if ( document.layers ) document.layers[ idName ].visibility = 'show'
}
function hideLAYER(idName){
if ( document.getElementById )
document.getElementById( idName ).style.visibility = 'hidden'
else if ( document.all ) document.all( idName ).style.visibility = 'hidden'
else if ( document.layers ) document.layers[ idName ].visibility = 'hide'
}
var count = 0
function swt(idName){
//交互にshowLAYER(idName)とhideLAYER(idName)を実行します
(count++%2)?showLAYER(idName):hideLAYER(idName)
}

<!--house-->の変更部分
<div style="position:absolute; bottom:5px; left:1889px; z-index:2;"><a href="javascript:showLAYER('test1');showLAYER('test2')" >
<img src="http://www.soup-web.net/img/house.gif" width="175" height="138" alt="about" border="0"></a>
</div>
<div style="position:absolute; bottom:143px; left:1803px; z-index=1;visibility:hidden" id="test1">
<img src="http://www.soup-web.net/img/mokumoku.gif" width="381" height="290" alt="about">
</div>
<div class="fb_10">
<p style="position:absolute; text-align:center; width:300; bottom:175px; left:1860px; z-index:2;visibility:hidden" id="test2">
<span class="fb_12">about soup…スウプについて</span><br>
soup【スウプ】は「物語を感じる表現」をテーマに<br>
活動する創造集団。シーズン毎にテーマを展開し<br>
そのテーマに沿った空間表現、雑貨の制作・販売を行います。<br>
　<br>
<span class="fb_12">about this site…このサイトについて</span><br>
soupの活動報告、予告がメイン。いずれはweb shopも...<br>
　<br>
当サイトはリンクフリーですのでご自由に切り張りしてください。<br>
リンク先は必ずhttp://www.soup-web.net/でお願いします。<br>
　<br>
<a href="javascript:hideLAYER('test1');hideLAYER('test2')"><b>× close</b></a>
</p>
</div>
以下変更無し。

動作確認サンプル　http://www.geocities.jp/n_a_o11/soup3.html

以上です。迷惑をかけました。
4   名前： N_A_O ： 2006/08/01（火） 13:01  ID:OD2twXVf
>>1
sacco�Aさんへ、迷惑かけました。
スクロールの件。cssの位置に縦横スクロールするのを。
位置指定を横だけにしたもの。saccoさんのは
<body onload="scrollPageTo(1600,0)">で
ページを開いた時に指定の位置に行く様にしたもの。
更新した時又指定の場所に行くのであまり良くないけど。
動作確認サンプル　http://www.geocities.jp/n_a_o11/sidescroll1.html
動作したら下記参照。
(script)
// script by ForLoops http://forloops.digitalrice.com/
// event.onAnyError = MessageTo.Board@ForLoops
var isIE = 0;
if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {isIE = 1;}
function scrollPageMath(start_x,end_x,start_y,end_y){
var start_x;
var end_x;
var start_y;
var end_y;

var distance_x;
var distance_y;
var move_x;
var move_y;
var set_x;
var set_y;

distance_x = .05 * (end_x - start_x); // 動かすx幅の比率
if(distance_x > 0)set_x = Math.ceil(distance_x);
else set_x = Math.floor(distance_x) ;
distance_y = .05 * (end_y - start_y) ; // 動かすy幅の比率
if(distance_y > 0)set_y = Math.ceil(distance_y);

else set_y = Math.floor(distance_y);
move_x = start_x + set_x;
move_y = start_y + set_y;

if (set_x > 0 && move_x <= end_x || set_y > 0 && move_y <= end_y || set_x < 0 && move_x >= end_x || set_y < 0 && move_y >= end_y){
scroll(move_x,move_y)
start_x += set_x;
start_y += set_y;
setTimeout("scrollPageMath("+start_x+","+end_x+","+start_y+","+end_y+")",1);
}

else return true;
}

function scrollPageOffset(go){
if (go=="go_x")return (document.all) ? document.body.scrollLeft:pageXOffset;
if (go=="go_y")return (document.all) ? document.body.scrollTop:pageYOffset;
}

function scrollPageTo(end_x,end_y){
var start_x = scrollPageOffset("go_x");
var start_y = scrollPageOffset("go_y");
scrollPageMath(start_x,end_x,start_y,end_y);
}

2000字オーバーなので次へ
5   名前： N_A_O ： 2006/08/01（火） 13:01  ID:OD2twXVf
>>1
saccoさんへ続き。

(css)
/* - - - Position - - - */
#top0 {
position: absolute;
top: 10px;
left: 10px;
width: 1000px;
z-index: 100;
visibility: visible;
}

#css1 {
position: absolute;
top: 10px;
left: 1000px;
width: 1000px;
z-index: 100;
visibility: visible;
}

#script2 {
position: absolute;
top: 10px;
left: 2000px;
width: 1000px;
z-index: 100;
visibility: visible;
}

#left3 {
position: absolute;
top: 10px;
left: 3000px;
width: 1000px;
z-index: 100;
visibility: visible;
}
/* - - - Position - - - */


<body>
<div id="top0">
<p><A name="0" id="0" alt="top"></a>
<a href="#1" onClick="scrollPageTo(990,0)">Css &gt;</a> |
<a href="#2" onClick="scrollPageTo(1990,0)">Script &gt;</a> |
<a href="#3" onClick="scrollPageTo(2990,0)">Right &gt;</a> |
</p>
</div>
<div id="css1">
<p><A name="1" id="1" alt="Css"></a>
<a href="#0" onClick="scrollPageTo(0,0)">&lt; Top</a> |
<a href="#2" onClick="scrollPageTo(1990,0)">Script &gt;</a> |
<a href="#3" onClick="scrollPageTo(2990,0)">Right &gt;</a> |
</p>
</div>
<div id="script2">
<p><A name="2" id="2" alt="script"></a>
<a href="#0" onClick="scrollPageTo(0,0)">&lt; Top</a> |
<a href="#1" onClick="scrollPageTo(990,0)">&lt; Css</a> |
<a href="#3" onClick="scrollPageTo(2990,0)">Right &gt;</a> |
</p>
</div>
<div id="left3">
<p><A name="3" id="3"></a>
<a href="#0" onClick="scrollPageTo(0,0)">&lt; Top</a> |
<a href="#1" onClick="scrollPageTo(990,0)">&lt; Css </a> |
<a href="#2" onClick="scrollPageTo(1990,0)">&lt; Script</a> |
</p>
</div>
以上。使えるようにやってみて。
6   名前： sacco ： 2006/08/01（火） 13:01  ID:pMZRxa2t
＞管理人えじさん
ご迷惑をおかけしてすみません。
以降気をつけます。

＞N_A_Oさん
丁寧に教えていただいてありがとうございます。
がんばってやってみます。
7   名前： Pid ： 2006/08/01（火） 13:01  ID:TnlTHoeS
ちうかマルチさんですよね。
http://otd8.jbbs.livedoor.jp/javascript/bbs_tree?base=15996&range=1

このままだとマズいので，何とかして下さいませ。
8   名前： えじ ◆HtEaXt.II9 ： 2006/08/01（火） 13:01  ID:WP1ytrfY
>>3
N_A_Oさん、内容の提示ありがとうございました。


>>6
saccoさん、了解いたしました。
ただ、現時点でも >>0 の投稿は、

http://otd8.jbbs.livedoor.jp/javascript/bbs_tree?base=15996&range=1

上記のサイトさんとの「条件外のマルチポスト」になってしまっています。
そのため、今回はこのスレッドをロックさせていただきます。

マルチポスト時の条件については下記のページにて説明していますので、次回からはこの条件内での投稿をお願いいたします。

http://www.tagindex.com/bbs/note.html#h202


>>7
URLの提示どうもでした。
9   名前： えじ ◆HtEaXt.II9 ： 2006/08/01（火） 13:01  ID:WP1ytrfY
>>3 の内容に関する続き（質問）があるようでしたら、新規スレッドで改めて質問してください。
一覧へ戻る