現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。
画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。
下記は、現在のソースです。(あまり関係ないと思う部分は省いてます)
回答の方、宜しくお願い致します。
<!-- InstanceBeginEditable name="head" -->
<script type="text/javascript" src="../js/layer.js"></script>
<script type='text/javascript'>
<!--
//--すべてを隠す
function hideALL(){
hideLAYER('img0')
hideLAYER('img1')
hideLAYER('img2')
hideLAYER('img3')
}
//-->
</script>
<!-- InstanceEndEditable -->
<link href="../css/original.css" rel="stylesheet" type="text/css" media="all">
</head>
<!-- InstanceBeginEditable name="main-images" -->
<div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div>
<div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div>
<div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div>
<div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div>
<div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div>
<!-- InstanceEndEditable -->
</div>
<!--work-left -->
<div class="work-bottom">
<!-- InstanceBeginEditable name="sumnail" -->
<a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a>
<!-- InstanceEndEditable -->
</div>
<!--work-bottom -->
</div><!--work-shosai -->
</div><!--main終了 -->
</div><!--contents終了 -->
No.2ベストアンサー
- 回答日時:
ひまだったのでつくってみました。
ご参考に。<html>
<head>
<title>test</title>
<style type="text/css"><!--
div.images-layer {position: absolute;left: 20px;top: 10px;}
--></style>
<script language="JavaScript">
<!--
function fadein( xno ) {
document.images['img' + xno].filters['alpha'].opacity = duty ;
if ( duty == 100 ) return ;
duty += 20 ;
if ( duty >= 100 ) duty = 100 ;
setTimeout("fadein("+xno+")",100);
}
function allclear() {
for(i=0;i<3;i++)
document.images['img'+i].filters['alpha'].opacity = 0;
duty = 0 ;
}
//-->
</script>
</head>
<body>
<div class="images-layer"><img src=00.jpg name=img0 style="filter:alpha(opacity=0);" width=100 height=100></div>
<div class="images-layer"><img src=01.jpg name=img1 style="filter:alpha(opacity=0);" width=100 height=100></div>
<div class="images-layer"><img src=02.jpg name=img2 style="filter:alpha(opacity=0);" width=100 height=100></div>
<br><br><br><!-- 適当な調整 --><br><br><br><br>
<a href=# onmouseover="allclear();fadein(0)"><img src=00.jpg width=30 height=30></a>
<a href=# onmouseover="allclear();fadein(1)"><img src=01.jpg width=30 height=30></a>
<a href=# onmouseover="allclear();fadein(2)"><img src=02.jpg width=30 height=30></a>
<br>
</body>
</html>
回答ありがとうございます。
回答いただいたソースを現在私のソースに書き換えればいいのでしょうか?
また、どこからどこを書き換えればいいのでしょうか?
素人なもので、初歩的なことでしょうが宜しくお願いします。
No.1
- 回答日時:
下のファイルがあったほうが答えられる人の数がふえると思います。
../js/layer.js
../css/original.css
この回答への補足
遅くなって申し訳ありません!
../js/layer.js が下記です。
//--表示属性set(表示)
function showLAYER(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.visibility='visible'
else if(document.all) //e4用
document.all(layName).style.visibility='visible'
else if(document.layers) //n4用
document.layers[layName].visibility='show'
}
//--表示属性set(非表示)
function hideLAYER(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.visibility='hidden'
else if(document.all) //e4用
document.all(layName).style.visibility='hidden'
else if(document.layers) //n4用
document.layers[layName].visibility='hide'
}
../css/original.cssが下記です。
div.top {
height: 285px;
width: 100%;
margin: 0em auto;
background: #000000;
padding-top: 70px;
padding-bottom: 70px;
}
div.infomation {
text-align: right;
width: 980px;
margin: 0.5em auto 0em;
}
div.infomation div {
font-size: 92%;
}
div.infomation div.title {
color: #333333;
font-weight: bold;
font-family: Helvetica, Arial, sans-serif;
}
div.process {
border: 1px solid #737373;
}
div.process-title {
background: #737373;
font-weight: normal;
color: #FFFFFF;
text-indent: 1em;
width: 50%;
}
div.process p {
width: 65%;
margin-left: 34%;
margin-right: 1%;
}
div.arrow {
text-align: right;
padding-right: 10px;
}
div.work-list {
margin: 5em auto 0px;
width: 600px;
height: 160px;
}
div.work-list div {
float: left;
width: 200px;
}
div.work-list span {
display: block;
padding-top: 3px;
}
div.work-shosai {
width: 820px;
margin: 3em auto 0em;
position: relative;
}
div.work-right {
float: right;
width: 200px;
text-align: right;
border: 1px solid #CCCCCC;
height: 400px;
margin-bottom: 1em;
display: inline;
margin-right: 5px;
}
div.work-right div {
margin: 5px;
border-bottom: 1px dotted #CCCCCC;
padding-bottom: 3px;
}
div.work-right div.title {
border-bottom: 1px solid #CCCCCC;
font-size: 114%;
color: #A10200;
}
div.work-left {
float: left;
}
div.images-layer {
position: absolute;
left: 0px;
top: 0px;
visibility: hidden;
}
div.work-bottom {
margin: 0em auto 2em;
width: 820px;
text-align: left;
clear: both;
}
div.work-bottom img {
margin: 0px 10px 5px 0px;
}
div.work-bottom img.r-margin-none {
margin-right: 0px;
}
宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript 画像の表示位置 3 2022/12/23 08:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のフェードイン・フェード...
-
デフォルト非表示にしたい。【t...
-
IMGタグごとにCSSを設定する方法
-
bxsliderで最初に縦に複数表示...
-
画像マウスオーバーで、checkb...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
-
リンク色を動的に変更したい。i...
-
離れた場所にマウスオーバーで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
デフォルト非表示にしたい。【t...
-
スクリプト
-
jQueryで4枚の画像がフェードア...
-
交互に入れ替わる画像を複数配置
-
クリッカブルマップをロールオ...
-
bxsliderで最初に縦に複数表示...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
「画像クリックで音声再生」を ...
-
画像切り替え
-
ボタンを押すたびに交互に切り...
-
jQuery 親要素の大きさに合わせ...
-
画像のフェードインについて・...
-
ボタンを画像に変更したい
-
画像のフェードイン・フェード...
-
アップロードファイルの種類に...
-
クリックでクリッカブルマップ...
-
Jquery cheeckbox(複数)とsli...
-
画像の切り替えについて
おすすめ情報
