javascriptで画像の切替えとCSSの指定

2023/08/15 18:27

このQ&Aのポイント

javascriptを使用して画像の切り替えとCSSの指定を行いたいです。
画像の切り替えについて、最初の画像の切り替わり時間を5秒に変更したいです。
また、CSSで指定した画像を表示させる方法が分かりません。

ベストアンサー

javascriptで画像の切替えとCSSの指定

2011/11/30 12:57

javascriptで画像の切替えとCSSの指定でわかりません以前、以下のhtmlを雑誌を見ながらやってみたのですが、わからないことが２点あります。回答を頂ければ大変助かります。１つ目の質問です。最初の画像が切り替わるのに１０秒かかってしまうのですが、これを最初の画像とともにすべての画像の切替を５秒にしたいのですがわかりません。２つ目の質問です。CSSで指定してある画像にあてはめたいのですが、書き方がわかりません。以下のimgs[0] = "http://www.●.com/●1.jpg"; この部分に <div id="▲img"></div> を付けていいものなのか、別な書き方があるのかがわかりません。ＣＳＳ側→ #▲img { background-image: url(..●1.jpg); } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <script type="text/javascript"> var imgs = new Array(); var links= new Array(); imgs[0] = "http://www.●.com/●1.jpg"; imgs[1] = "http://www.●.com/●2.jpg"; links[0]="http://www.■.co.jp" links[1]="http://www.■.co.jp" i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); document.getElementById("link").href=links[i]; if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,5*1000)} </script> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE></TITLE> </HEAD> <BODY> <a href="http://www.■.co.jp" id=link> <img src="http://www.●.com/●1.jpg" id="imgframe" style="filter:blendTrans(duration=2);"></img> </a> </BODY> </HTML> 以上です。何卒よろしくお願い致します。

austrict2010
お礼率15% (7/45)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

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

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2011/11/30 20:17 回答No.1

>１つめいきなり応用を始めようとせずに、基礎からやり直す事をお勧めします。 http://www.tohoho-web.com/js/index.htm >２つめいきなり応用を（以下略） http://www.tohoho-web.com/css/basic.htm http://www.tohoho-web.com/html/index.htm

関連するQ&A

Javascript画像切り替えIEでしか動かない
Javascriptで画像を切り替えています。 IEでは動くのですが他のブラウザだと動きません。 FirefoxやChromeは何か特殊なのでしょうか？わかる人いたら教えてください。 <script type="text/javascript"> var imgs = new Array(); imgs[0] = "img/top2.jpg"; imgs[1] = "img/top3.jpg"; imgs[2] = "img/top1.jpg"; 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,3*1000)} </script> <img src="img/top1.jpg" width="940" height="350" id="imgframe" style="filter:blendTrans(duration=1);">
- ベストアンサー
- JavaScript
JavaScript自動画像切替にリンクの貼り方
初めて質問させていただきます。宜しくお願いします。現在、楽天ショップページを製作しております。JavaScriptでゆっくりと画像を切り替える以下のソースをネットで調べました。さらに実用的にするため、各画像にそれぞれ異なるリンクを貼りたいのですが、どのように追記すれば良いのでしょうか？色々試したのですが全く解決せず困っています。宜しくお願いいたします。 [以下ソース] <script type="text/javascript"> var imgs = new Array(); imgs[0] = "画像URL1"; imgs[1] = "画像URL2"; imgs[2] = "画像URL3"; 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="画像URL１" style="filter:blendTrans(duration=2);">
- 締切済み
- JavaScript
複数のjavascriptを貼り付けると、1つしか動きません。
「5秒ごとに残像を残しながら自動で画像が変わるスクリプト」を以下の通り作成いたしました。これが1つだったら起動するのですが、2つ以上貼り付けると最後に貼り付けたスクリプトしか起動しません。画像、IDを変えるなどして試しているのですが、上手くいきません。解決策がわかる方ご教授をお願いいたします。 <script type="text/javascript"> var nimgs = new Array(); nimgs[0] = "syasin/1/1/k1.jpg"; nimgs[1] = "syasin/1/1/k2.jpg"; nimgs[2] = "syasin/1/1/k3.jpg"; nimgs[3] = "syasin/1/1/k4.jpg"; nimgs[4] = "syasin/1/1/k5.jpg"; nimgs[5] = "syasin/1/1/k6.jpg"; nimgs[6] = "syasin/1/1/k7.jpg"; nimgs[7] = "syasin/1/1/k8.jpg"; nimgs[8] = "syasin/1/1/k9.jpg"; nimgs[9] = "syasin/1/1/k0.jpg"; i = 0; function Blend(imgframe){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = nimgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=nimgs.length) i=0; }; onload = function(imgframe){setInterval(Blend,5*1000)} </script> <IMG src="syasin/1/1/k0.jpg" id="imgframe" style="filter:blendTrans(duration=2);" width="218" height="218">
- ベストアンサー
- JavaScript
IE10で画像切り替えがされません
いろんなサイトから情報を引っ張ってきて趣味程度でHPを作成しています。先日、IEを10にアップデートしました。おそらく、アップデートをきっかけに、今まで動作していた写真切り替えスクリプトが動作しなくなりました。他のPCではIE9を使用しており、今までどおり動作します。下記のようなスクリプトです。一定時間で画面が切り替わるようにし、各画像にリンクをはっていました。＜javascript部分＞ var href= new Array(); href[0]=""; href[1]="./aaa.html"; href[2]="./bbb.html"; href[3]="./ccc.html"; var BlendTrans_time=1; function go_BlendTrans(file_name) { BlendTrans_img.filters.BlendTrans.Apply(); BlendTrans_img.filters.BlendTrans.duration=BlendTrans_time; BlendTrans_img.src=file_name; BlendTrans_img.filters.BlendTrans.Play(); if(file_name == imgs[0]){lnk.href=href[0];} if(file_name == imgs[1]){lnk.href=href[1];} if(file_name == imgs[2]){lnk.href=href[2];} if(file_name == imgs[3]){lnk.href=href[3];} } var imgs = new Array(); imgs[0] = "00.JPG"; imgs[1] = "aa.jpg"; imgs[2] = "bb.jpg"; imgs[3] = "cc.jpg"; j = 0; function hyouji() { go_BlendTrans(imgs[j++]); if(j>=imgs.length) j=0; } function startfnc() { //関数hyouji()を5000ミリ秒間隔で呼び出す setInterval("hyouji()",5000); } ＜HTML部分＞ <a href="#" id="lnk"><img src="00.JPG" border="0" width="800" id="BlendTrans_img" style="filter:BlendTrans;"></a><br> いろいろ調べたのですが、IE10にアップデートしたことが原因という確証も得られませんでした。質問が複数で申し訳ないのですが、そもそも、IE10が上記のスクリプトをサポートしていないのでしょうか？また、IE10で動作しないのであれば、代替策はどのようにすればいいのでしょうか？
- ベストアンサー
- CSS
クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。
- ベストアンサー
- JavaScript
phpとjavascriptで画像を切り替える
こんにちは。phpで掲示板を作っているんですが、画像差し替えのためのjavascriptを入れると上手く動作しません。どなたかお手数ですがご教授いただけませんでしょうか？以下がスクリプトです。 <?php require_once("****.php"); $con = mysql_connect($DBSERVER, $DBUSER, $DBPASSWORD); $selectdb = mysql_select_db($DBNAME, $con); $sql = "select * from stock where no = '$no'"; $rst = mysql_query($sql,$con); $body =""; while($col = mysql_fetch_array($rst)) { $img = $col["imgfilename"]; $img1 = $col["imgfilename1"]; $body .= "<p style='text-align: center;'> <img src ='upload/$img' name='imgs' alt='*'><br> <a href ='#' onClick='roimg('upload/$img1'); return false;'>差し替え画像</a> </p>"; } $con= mysql_close($con); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript">  </script> </HEAD> <center> <?= $body ?> </center> </BODY> </HTML>
- ベストアンサー
- PHP
CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
画像のランダム表示
初心者です。。画像のランダム表示で、下のものを使っているのですが、画像の上にカーソルをもっていったときに手のマークにしたいのですが、どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？よろしくお願いします。 <script type="text/javascript">  </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>
- ベストアンサー
- JavaScript
css、javascriptの外部化について
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="lib/global.css" />  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); </script>  <style type="text/css"> #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参照：<a href='http://jonraasch.com/blog/a-simple-jquery-slideshow'>A Simple jQuery Slideshow</a></p> <p>▼画像がフェードしながら切り替わります。</p>  <div id="slideshow"> <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="" /> <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="" class="active" /> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="" /> </div>  </div> </body> </html> 上記のソースをｈｔｍｌ、ｃｓｓ、javascriptの三つのファイルに分けたいのですが、、、ちょっと分からなかったもので、、、お願いします単純に cssファイル #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } javascriptファイル function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); htmlファイル <script type="text/javascript" src="JSファイルのパス"></script> <link rel="stylesheet" type="text/css" href="cssファイルパス" /> -------------------------------------- 上記でいけると思ったのですが、、、単純すぎましたよろしくお願いいたします
- ベストアンサー
- JavaScript
JavaScriptにリンク設定は正しいですか
サイト作成中です。（アップはしていません） JavaScriptを使いギャラリーを設置しました。（下記記述）これにサムネイルクリックでジャンプ出来るよう最初の一枚を　<a href="index.html"></a>で囲んでみました。 <a href="index.html"><img src="gallery/cate/g (1)-s.jpg" title="eyes0271 梅" alt="梅" onmouseover="document.BigPhoto.src='gallery/cate/g (1).jpg';"></a> ジャンプは出来ましたが、この記述で問題ありませんか？アップ後に JavaScriptに悪影響は及ぼしたりはしませんか？ご教授ねがいます。 HTML ------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <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 rel="stylesheet" href="css/gallery.css" type="text/css"> </head> <body> <div align="center"> <div id="gallery"> <div id="thumbs"> <a href="index.html"><img src="gallery/cate/g (1)-s.jpg" title="eyes0271 梅" alt="梅" onmouseover="document.BigPhoto.src='gallery/cate/g (1).jpg';"></a> <img src="gallery/cate/g (2)-s.jpg" title="eyes0272 桜" alt="桜" onmouseover="document.BigPhoto.src='gallery/cate/g (2).jpg';"> <img src="gallery/cate/g (3)-s.jpg" title="eyes0273 山" alt="山" onmouseover="document.BigPhoto.src='gallery/cate/g (3).jpg';"> <img src="gallery/cate/g (4)-s.jpg" title="eyes0274 川" alt="川" onmouseover="document.BigPhoto.src='gallery/cate/g (4).jpg';"> </div> <p><img src="gallery/cate/gallery.jpg" alt="表紙（デフォルト画像）" class="waku" name="BigPhoto"></p> </div> </div> </body> </html> ------------- CSS ------------- #gallery { width: 900px; height:280px; padding: 10px; background-color: #888888; } img.waku { display: block; width: auto; margin: 5px auto; } #thumbs { float: left; width: 270px; margin: 0; padding:0; } #thumbs img { width: 80px; height:60px; float: left; margin: 0 0 5px 5px; } よろしくお願いします。
- ベストアンサー
- JavaScript