忙しい現代人の腰&肩のお悩み対策!

初心者です。
ホームページのトップ画像を自動的に複数の画像に切り替えたいのですが、
簡単で重たくならない方法を教えてください。
できれば残像を残すような感じが良いです。

Javaでも出来るのでしょうか?

すみませんが、よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

「残像を残す」というのは、カナリ大変になりますが、


例を挙げてみます。Javascriptを使います。

<script type="text/javascript">
var imgs = new Array();
imgs[0] = "Image0.gif";
imgs[1] = "Image1.gif";
i = 0;
function Blend(){
document.getElementById("imgframe").filters.blendTrans.apply();
document.all.item("imgframe").src = imgs[i++];
document.getElementById("imgframe").filters.blendTrans.play();
if(i>=imgs.length) i=0;
}
onload = function(){setInterval(Blend,5*1000)}
</script>
<img src="Image1.gif" id="imgframe" style="filter:blendTrans(duration=2);">

これを、画像を表示したいところに張ってください。
「imgs[0] = "Image0.gif";」とありますが、「"Image0.gif"」を変えることで、自分の好きな画像に指定できます。
画像を増やしたいときには「imgs[2] = "Image2.gif";」みたいに、数字を大きくしていけばOKです。

あと、切り替わる時間ですが、
「duration=2」というところは、切り替えの時間(秒)です。
「setInterval(Blend,5*1000)」の5は、切り替えと切り替えの間の時間です。
かならず、後者を大きくしてください。

参考URL:http://www5e.biglobe.ne.jp/~access_r/hp/filter/f …
    • good
    • 1
この回答へのお礼

ありがとうございます。
Javascriptで出来れば、軽いしベストです。
活用させて頂きます。

お礼日時:2008/11/03 13:10

下記サイトの「JAVATEA13:画像の切替を自動的に行います。

」を参照下さい。この例では画像2枚を替えていますが、同じ要領で複数枚を自動的に入れ替えることができます。
http://www.geocities.jp/digitwland/javatea/javat …
    • good
    • 1
この回答へのお礼

ありがとうございます。
サイト活用させて頂きます。

お礼日時:2008/11/03 13:09

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJAVAで画像をボタンで切り替え表示し、さらにそれぞれの画像をそれぞれ

JAVAで画像をボタンで切り替え表示し、さらにそれぞれの画像をそれぞれ別のURL(.html)へリンクをつける方法について教えて下さい。

<html>
<head>
<script language="JavaScript"> <!--
var i_index=-1;

var arrImgs = [ '絵1.jpg', '絵2.jpg', '絵3.jpg', '絵4.jpg' ];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
img1.src=arrImgs[getGazou()].src;
img1.filters[0].Play();
}

function getGazou(){
var i= Math.floor(Math.random()*arrImgs.length);
if ( i==i_index ) {
if (i_index==arrImgs.length-1) {
i=0;
} else {
i++;
}
}
i_index=i;
return i
}
//-->
</script>
</head>

<body text="#000000">
<center>
<img id="img1" src="絵0.jpg">
</center>

<form name="fm">
<table align="center" border=1 bgcolor="#FFFFCC">
<tr>
<td colspan=2 align="right">
<input type="button" value="絵のランダム切り替え(フィルタ付)" onClick="flt1()">
</td>
</tr>
</table>
</form>
</body>
</html>

上記の内容で、各画像ごとにそれぞれ別のホームページURLへリンクさせたいのですが、どのようにすれば良いか分かりません。

下の方にある
<img id="img1" src="絵0.jpg">
の前に<a href=" ">を加えるとどの画像にもこのURLしかリンクされません。当然ですが…

http://oshiete.goo.ne.jp/qa/3786377.html
で回答されている方の内容にリンクを加える形になります。

色々と検索して探していますが、これらが組み合わさったソースが見当たらず解決できず先に進めません。

どうかご回答よろしくお願いいたします。

JAVAで画像をボタンで切り替え表示し、さらにそれぞれの画像をそれぞれ別のURL(.html)へリンクをつける方法について教えて下さい。

<html>
<head>
<script language="JavaScript"> <!--
var i_index=-1;

var arrImgs = [ '絵1.jpg', '絵2.jpg', '絵3.jpg', '絵4.jpg' ];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[...続きを読む

Aベストアンサー

もとプログラムががぜんぜんだめすすが、そのレベルで
そのまま改造すると
<script type="text/javascript">
<!--
var i_index=-1;

var arrImgs=['絵1.jpg','絵2.jpg','絵3.jpg','絵4.jpg'];
var arrUrls=['1.html','2.html','3.html','4.html'];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
var index=getGazou();
link1.href=arrUrls[index];
img1.src=arrImgs[index].src;
img1.alt="絵"+(index+1);
img1.filters[0].Play();
}

function getGazou(){
var i= Math.floor(Math.random()*arrImgs.length);
if ( i==i_index ) {
if (i_index==arrImgs.length-1) {
i=0;
} else {
i++;
}
}
i_index=i;
return i
}
//-->
</script>
</head>
<body text="#000000">
<center>
<a id="link1" href="/0.html"><img id="img1" src="絵0.jpg" alt="絵0"></a>
</center>
<form name="fm">
<table align="center" border=1 bgcolor="#FFFFCC">
<tr>
<td colspan=2 align="right">
<input type="button" value="絵のランダム切り替え(フィルタ付)" onClick="flt1()">
</td>
</tr>
</table>
</form>
</body>

もとプログラムががぜんぜんだめすすが、そのレベルで
そのまま改造すると
<script type="text/javascript">
<!--
var i_index=-1;

var arrImgs=['絵1.jpg','絵2.jpg','絵3.jpg','絵4.jpg'];
var arrUrls=['1.html','2.html','3.html','4.html'];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
var index=g...続きを読む

Q複数のリンク画像を一定時間で(各リンク先も)切り替えるには?

画像表示を一定時間で切り替え、同時にそれぞれの画像に別のリンク先を指定したいのです。JavaScriptかスタイルシート、その両方の組み合わせなどの応用になるのではないかと思うのですが、なるべくシンプルな方法をご存知の方、よろしくお願いいたします。

Aベストアンサー

<html>
<head>
<script type="text/javascript">
window.onload = function(){
var num = 1;
setInterval(function(){
document.getElementById('link' + num).style.display = 'none';
num = document.getElementById('link' + (num+1))? ++num : 1;
document.getElementById('link' + num).style.display = 'block';
},5000);
}
</script>
<style type="text/css">
.banner { display:none; }
</style>
</head>

<body>

<div id="link1"> ここにリンク&画像の普通のタグ1 </div>
<div id="link2" class="banner"> ここにリンク&画像の普通のタグ2 </div>
<div id="link3" class="banner"> ここにリンク&画像の普通のタグ3 </div>
<div id="link4" class="banner"> ここにリンク&画像の普通のタグ4 </div>
<div id="link5" class="banner"> ここにリンク&画像の普通のタグ5 </div>

</body>
</html>

色んな方法ありますがHTMLさえ書ければリストの記述ミスが無い方法ならこれかな?

各 画像リンクは、それぞれをDIVで囲んで link1~ (link + 連続した数値)のIDを付ける。
1個目以外は classやstyle=""で初期非表示にしておく。(サンプルの通り)
あとは勝手に順番に表示して最後まで行くとループします。
5000の所が秒数 5000=5秒。

1ページに1個で考えてるサンプルなのでsetInterval()を使っています。
複数使う場合はsetTimeout()を使った方が良いので、わからなければ補足で。

広告バナーなどの自動表示切替 と同じ事ですから、
ネット上に結構サンプルもあるんじゃないかと思います。

<html>
<head>
<script type="text/javascript">
window.onload = function(){
var num = 1;
setInterval(function(){
document.getElementById('link' + num).style.display = 'none';
num = document.getElementById('link' + (num+1))? ++num : 1;
document.getElementById('link' + num).style.display = 'block';
},5000);
}
</script>
<style type="text/css">
.banner { display:none; }
</style>
</head>

<body>

<div id="link1"> ここにリンク&画像の普通のタグ1 </div>
<div id...続きを読む

QButtonを押すと画像が表示されるには?

Buttonを押すと画像が表示されるGUIを作ろうと思っています。ただ画像を表示させるとき、私が知りうる限りでは、ウィンドウのサイズを変えたり、他のウィンドウで覆ったりすると、その画像が消えてしまうのです。ですから、画像が消えないようにするにはどうすればいいのでしょうか?

上記に書いたことを、Applet上でよく見かけるのですが、今回アプリケーションで実現したいのです。

ぜひ宜しくお願いします。

Aベストアンサー

コードを三箇所追加しました。
コード追加1
何を描画するかの判定、変数。

コード追加2
判定変数の条件文で、何を描画するか、
0で、何も描画しない。
他の数値では、線を描画する。

コード追加3
ボタンのイベント処理で、
変数に1を、入れて、再描画、直線を描く

package pane1;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class p extends JFrame {

private JPanel jp1, jp2;
private JComboBox jcb;
private JButton jb;

//コードの追加1
int gc =0;

public p() {
setSize(500, 500);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

getContentPane().setLayout(new BorderLayout());
jp1 = new JPanel();
getContentPane().add(jp1, "North");
jp1.setLayout(new FlowLayout());

String[] str = {"a", "b", "c"};
DefaultComboBoxModel combomodel = new DefaultComboBoxModel(str);
jcb = new JComboBox(combomodel);
jcb.setPreferredSize(new Dimension(75, 21));
jp1.add(jcb);

jb = new JButton("ボタン");
jp1.add(jb);
jb.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
jbevent(e);
}
});

jp2 = new JPanel() {
public void paintComponent(Graphics g) {
super.paintComponent(g);
//コードの追加2
if (gc == 0){

}else {
g.drawLine(150, 150, 250, 250);
}
}
};
getContentPane().add(jp2, "Center");
}

private void jbevent(ActionEvent e) {
//コードの追加3
gc =1;
repaint();
//(1)
}

public static void main(String args[]) {
p s3 = new p();
s3.setVisible(true);
}
}

コードを三箇所追加しました。
コード追加1
何を描画するかの判定、変数。

コード追加2
判定変数の条件文で、何を描画するか、
0で、何も描画しない。
他の数値では、線を描画する。

コード追加3
ボタンのイベント処理で、
変数に1を、入れて、再描画、直線を描く

package pane1;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class p extends JFrame {

private JPanel jp1, jp2;
private JComboBox jcb;
private JButton jb;

//コードの追加1
in...続きを読む

QHTMLの画像の位置の指定

HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、CSSやジャバスクリプトで使用している、


position:absolute; 絶対配置
position:relative; 相対配置
position:static; 通常配置(指定しない場合はこれ)
position:fixed;
上のようなポジションタグを使う事は可能ですか?

できれば、そのサンプルのようなものを書いてもらえると 助かります。

Aベストアンサー

こんばんは。
私は画像については良く位置指定をします。
インラインCSSで書きますと、

<div style="position:relative; top:100px; left: 20px;"><img src="ここに画像1へのパスを書きます/gazou1.jpg" width="330" height="200" border="0" alt="画像1"></div>

絶対指定なら;
<div style="position:absolute; top:100px; left: 20px;"><img src="ここに画像1へのパスを書きます/gazou1.jpg" width="330" height="200" border="0" alt="画像1"></div>

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qスライドショーを自動開始する方法を教えて下さい。

ホームページビルダでHPを作っています。
HP(top)が開いたときに自動(勝手に)的にスライドショウが開始されるようにする方法を教えて下さい。

Aベストアンサー

スライドショーの作成過程において、写真を選択した次くらいの画面で、「効果の選択」画面があり、「位置」「スライドの動き」「効果」を設定する過程があります。

この中の「スライドの動き」で「手動」と「自動」を選択できます。「自動」を選べば勝手ショーが開始されます。

なお、次のサイトの右側メニューの中の「GIFアニメ(動画)」で写真を送れば、スライドショーと同じアニメが出来ます。

http://www.bannerkoubou.com/

できたアニメをダウンロードしてパソコンに保存し、ビルダーの「画像の挿入」でホームページへ掲載出来ます。

Q横スクロールのWebページを作りたい

http://tympanus.net/Tutorials/WebsiteScrolling/

こちらのような、横にスライドするWebページを作ろうと思っています。
超横長な1ページを作って、スクロールで見える範囲を設定するという想像は出来ます。
このように、超横長な1ページはどのように作ればいいのでしょうか?
普通でしたら、Photoshop等でモックアップを作り、スライスしていくのが一般的ですが
仮にこのサイトの大きさが8000pxだとすると、とんでもなくデザインしにくそうです…

それと、仮にこのようなページを作る場合、慣れた人ならどのような手順で作っていきますか?


回答よろしくお願いします。
※スクロールのアニメーション自体はjQueryでできることは知っているので大丈夫です。

Aベストアンサー

floatを使う場合は
それを囲む外側の要素に、内包するfloatさせたい要素全部が横並びするだけのwidthを指定しておかないと、ウインドウの端で折り返されます。

body{width:12000px;}

Qフレーム上のコンポーネントの削除について

フレーム上の表示内容を切り替えるために、
それまでフレーム上にあったチョイス(choice)を
remove(choice1)メソッドで削除して、その場所に(その上に)画像(image)を表示したいと思うのですが、
チョイスは消えて表示されなくなるのですが、
チョイスのあったところだけ画像が表示されません。
チョイスの影響を消して、普通に画像を表示するにはどうしたらよいでしょうか。よろしくお願いします。

choice1.setLayout(null);
choice1.setBounds(500,300,100,20);
のように、nullレイアウトにしてあります。

Aベストアンサー

>remove(choice1)メソッドで削除
>チョイスは消えて表示されなくなる
>チョイスのあったところだけ画像が表示されません


「『チョイス』以外にそこにまだ
不要なごみコンポーネントが追加されてるから
(つまり削除してない「何か」があるから)」。

どのコンポーネントになにをどれだけ追加(add)したのか、
自分のソースコードを
再点検しましょう。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい


人気Q&Aランキング

おすすめ情報