リンク前後で画像を変えたい
- リンク前後で画像を切り替える方法を教えてください。
- a1_off.pngからa1_on.pngに画像を変更する方法を教えていただきましたが、複数の画像を切り替えることはできますか？
- HTMLのソースから複数の画像を個別に切り替える方法について教えてください。
- ベストアンサー
リンク前後で画像を変えたい
こんにちわ。 少し質問させていただきます。 タイトルそのままですが、 リンク前とリンク後で画像を変えたいのですが、 どうすればよろしいでしょうか？ 以前にこちらでロールオーバーの質問をした時に a1_off.pngをa1_on.pngに名前で変えるやり方を教えて 頂きました。（質問自体は少し違いますが・・・） 切り替える画像の種類が多いので同様にリンク後に a1_linkbefore.pngからa1_linkafter.png a2_linkbefore.pngからa2_linkafter.png のように名前で変えたいと考えたいのですが そのような事ができるのでしょうか？ できるのであれば、ご教授お願いしたいです。 ちなみにソースはこのような形です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <html lang="ja"> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('a.link').each ( function() { var imgObj = $(this).find('img'); var imgSrc = imgObj.attr('src'); $(this).mouseover ( function() { imgObj.attr ( 'src', imgSrc.replace ( /off.png/, 'on.png' ) ); }).mouseout ( function() { imgObj.attr ( 'src', imgSrc ); }) }); }); </script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p class="クラス１"> <a href="a1.html" class="クラスA-1"> <span class="クラスＡ-1">A1</span> <img src="a1.png" border="0"> </a></p> <p class="クラス2"> <a href="a2.html" class="クラスＡ-2"> <span class="クラスＡ-2">A2</span> <img src="a2.png" border="0"> </a></p> </body> </html> よろしくお願いします。
- trip-trip-trip
- お礼率100% (16/16)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 >また違うページで同じメニューを表示しても、そのページ単位での訪問記憶になるため、思った動作になりません。 ちょっと間違えました。これ自体は工夫次第でなんとかなります。 一応下のようなサンプルで組み込めば訪問済みの場合は訪問済みの画像が表示されます。 (あくまでサンプルですので実際の運用に耐えるかまで検証していません) 動作原理としては 1.クッキーより訪問済みのリンク先を取得し、a.linkクラス内にそのリンク先があった場合はoff.pngをvisited.pngに置換し、マウスアウト時に変更する画像もvisited.pngにする 2.リンククリック時にリンク先を取得してクッキーに書き込むことにより1.での判別を可能とする <!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"> <head> <title>リンク前後で画像を変えたい</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript" src="./jquery.cookie.js"></script> <script type="text/javascript"> $().ready ( function() { var visited = $.cookie('visited') != null ? $.cookie('visited') : ''; $('button').click ( function() { $.cookie('visited', null ); }); $('a.link').each ( function() { var imgObj = $(this).find('img'); var imgSrc = imgObj.attr('src'); var backImg = visited.match($(this).attr('href')) ? imgSrc.replace(/off.png/,'visited.png') : imgSrc; imgObj.attr ( 'src', backImg ); $(this).mouseover ( function() { imgObj.attr ( 'src', imgSrc.replace ( /off.png/, 'on.png' ) ); }).mouseout ( function() { imgObj.attr ( 'src', backImg ); }); }).click ( function() { if ( !visited.match($(this).attr('href')) ) { visited += $(this).attr('href') + ','; $.cookie ( 'visited', visited ); } }); }); </script> <style type="text/css"> img { border:0 } .link { position:relative; } .link > .link { position:absolute;top:-40px;left:20px; } </style> </head> <body> <button type="button">visitedクリア</button> <br /> <a href="./q7284721_2.html" class="link"> <span class="link">_2.htmlへ</span> <img src="./img2/0_off.png" /> </a> <br /> <a href="link2.html" class="link"> <span class="link">_link2.html</span> <img src="./img2/1_off.png" /> </a> <br /> </body> </html>
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 訪問済みのリンクを変えたいとのことですが、セキュリティの観点からa:visitedに対して背景画像等変えられなくなってしまいました。 (JavaScriptで訪問済みかどうかも取得できません) なので小細工しないと対応できません。 小細工といってもクッキーという機能を利用して、そのユーザがリンク先へ訪問したかを保存しておいてそれを参照して判断する方法です。 なのでクッキーを使わないようにしていれば思った動作にはなりません。 また違うページで同じメニューを表示しても、そのページ単位での訪問記憶になるため、思った動作になりません。 それでもよければ参考サンプルを載せます。
お礼
そうなんですね。 セキュリティの観点から無理となると 厳しいですね。 初期設定でcookieは無効なんですよね？？ それでも、一応教えていただきたいです。 よろしくお願いします。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 確かこれ作ったの私ですが、リンク前とリンク後とはどのような動きでしょうか。 リンク先を訪れたか訪れていないかということでしょうか。
お礼
こんにちわ。 前はありがとうございました。 ＞リンク前とリンク後とはどのような動きでしょうか。 特に設定しない場合、リンク先を訪れると、文字が青色から薄紫色に 変わりますよね。 それと同じでリンク先を訪れると、画像（枠）を変えて既にリンク先を 訪れていることを、わかりやすく表現したいのです。 この説明でご理解できますでしょうか？
関連するQ&A
- jqueryの表示非表示に関する質問
jqueryの初心者です。 調べてもわからなかったので質問します。 display:noneで要素を非表示にし、クリックしたときに要素をcssで表示するようにしたのですが別のボタンを押したときにまた非表示にすると2回押さないと表示してくれなくなります。 具体的には下記のような感じのサンプルを作ってみました。 表示・非表示ボタンをクリックしたら交互に表示・非表示が切り替わるのですがクリアボタンを押した後に表示・非表示ボタンを押すとなぜか2回クリックしないと表示しません。 どなたかご教授いただけませんか？ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jq表示/非表示test</title> </head> <style type="text/css"> .text_h{ display:none; } .text_v{ display:inline; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#a01").toggle(function(){ $(this).parent().next().children("span").attr("class","text_v"); },function(){ $(this).parent().next().children("span").attr("class","text_h"); }); $("#clear").click(function(){ $(this).parent().next().children("span").attr("class","text_h"); }); }); </script> <body><p> <input type="button" value="表示・非表示" id="a01" /> <input type="button" value="クリア" id="clear" /> </p> <p><span class="text_h">ボタンを表示します</span></p> </body> </html>
- ベストアンサー
- JavaScript
- $(this)を変数に入れないと動作しない理由
「WebデザイナーのためのjQuery入門」という書籍でjQueryの勉強をしています。 リンク先 http://gihyo.jp/book/2012/978-4-7741-4856-4 この書籍の中のロールオーバーボタンのスクリプトで質問があります。 以下のスクリプトは書籍に載っているスクリプトですが、これにより画像ボタンにポインタがのる・のらないでボタン画像が切り替わります。 --------------- $(function(){ $('.rollover').each(function(){ var a = $(this); var img = a.find('img'); var src_off = img.attr('src'); var src_on = src_off.replace('_off','_on'); $('<img />').attr('src','src_on'); a.hover(function(){ img.attr('src',src_on); },function(){ img.attr('src',src_off); }); }); }); --------------- htmlは以下になります。※<body>内のみ抜粋 --------------- <body> <div class="header"> <ul class="menu"> <li><a href="index.html" class="rollover"><img src="menu01_off.png" alt="Home"></a></li> <li><a href="index.html" class="rollover"><img src="menu02_off.png" alt="Products"></a></li> <li><a href="index.html" class="rollover"><img src="menu03_off.png" alt="Company"></a></li> </ul> </div> </body> --------------- 質問したいのは、スクリプトの上から3行目の「var a = $(this);」です。 var a = $(this); var img = a.find('img'); 上記を、 var img = $(this).find('img'); とした場合、なぜか画像が切り替わりません。 どちらも同じような気がするのですが、不具合の原因が分かりません。 お分かりの方がいっらしゃいましたら、お手数ですがご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像スライダーについて
<script type="text/javascript"> <!-- $(function(){ setInterval(function(){ $("#s3 p").attr("img"$("src")); },3000); }); --> </script> このやり方だと、時間で画像が変化しませんかね？
- 締切済み
- JavaScript
- jQueryでの画像切り替え処理について
前回の質問の続きになります。 一列に配置したボタンを、マウスオーバー時、クリック時にそれぞれ別の画像に切り替えたいと思っています。 （元画像A_offを、マウスオーバー時はA_on、クリック時はA_off_s3へと変更する。 A_off_s3の状態でマウスオーバーされた場合、A_offにはならず、A_off_s3のままとする。 A_off_s3が表示されている時に他のボタンB_offがクリックされたら、B_offはB_off_s3を、A_off_s3はA_offを表示する。） 色々なページを参考に、以下のようなスクリプトを書きました。 ---------- <head> <script type="text/javascript" src="script/jquery-1.11.0.min.js"></script> <script> $(function(){ var handler = $('ul#nav li a'); var url = document.URL; var urlId = url.substr(url.lastIndexOf('#')); var urlIdJudgment = urlId.lastIndexOf('#'); $('ul#nav').each(function(){ $('#tab-box > div:first').show(); var imgSrc = $('ul#nav li:first img').attr('src'); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on'); }); handler.click(function() { var imgSrc = $(this).children('img').attr('src').replace(/_s3/g, ""); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $(this).children('img').attr('src',onSrc); var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_s3/g, ""); $('ul#nav li img.tab-on').attr('src',imgOff); $('ul#nav li img').removeClass('tab-on'); $(this).children('img').addClass('tab-on'); var imgSrc = $(this).children('img').attr('src').replace(/_s3/g, ""); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $(this).children('img').attr('src',onSrc); return false; }) }); $(function(){ $('a img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } }); }); </script> </head> <body onload="MM_preloadImages('img/A_off.jpg','img/A_on.jpg','img/A_off_s3.jpg','img/B_off.jpg','img/B_on.jpg','img/B_off_s3.jpg','img/C_off.jpg','img/C_on.jpg','img/C_off_s3.jpg')"> <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="xxx"><img src="img/A_off.jpg" width="134" height="36" alt="" id="A" /></a></li> <li><a href="yyy"><img src="img/B_off.jpg" width="134" height="36" alt="" id="B" /></a></li> <li><a href="zzz"><img src="img/C_off.jpg" width="134" height="36" alt="" id="C" /></a></li> </ul> </div> ---------- 上記のスクリプトで実行をすると、クリック時に？マークが表示され、カーソルが離れると○_off_s3の画像が表示されます。 また、○_off_s3の画像が表示されている時に、○_off_s3にカーソルを合わせると、？マークが表示され、カーソルが離れると○_off_s3が表示されます。 また、○_off_s3の名称をわかりやすいものにしようと思い、○_off_cに変更し、スクリプトの"_s3"を”_c”に変更したところ、スクリプトが正常に実行されなかったのも気になっています。 原因がわかる方がいらっしゃれば、アドバイスをお願いいたします。
- 締切済み
- JavaScript
- jQueryでの記述をjavascriptに
下記のjQueryの記述をライブラリ無しのjavascriptでの記述にしていただきたいです。 imgタグのsrc属性とaタグのhref属性を相対パスから絶対パスに動的に変換させる必要があるのですが、ある事情でjQueryを使えないとの事で困っています。 どうかよろしくお願い致します。 <script type="text/javascript"> $(function(){ $('#hoge').children('img:not([src^=http])').each(function (){ var imgSrc = $(this).attr('src'); $(this).attr('src','http://xxxxxxxxxxxx' + imgSrc); }); $('#hoge').children('a[href^=○○○]').each(function (){ var aHref = $(this).attr('href'); $(this).attr('href','http://xxxxxxxxxxxx' + aHref); }); }); </script>
- 締切済み
- JavaScript
- バナーループについて
flash使用なしのxmlファイルを使用して、ループするローテーションバナーかバナーループをやりたいと思っております。 海外サイトでjsを見つけて、テストをしようと思ってくんでみたのですがうまくいきません。 色々しらべたのですが手詰まり感で質問しました。 宜しくお願いします js <script> function change_banner(){ data=xmldata[sample]; //get current banner XML object img=$(data).attr("src"); //retrieve variables href=$(data).attr("href"); target=$(data).attr("target"); $(".banner_img_href").attr("href",href); //change variables on HTML $(".banner_img_href").attr("target",target); $("#banner_image").attr("src",img); } </script> </head> html <body> <div class="banner"> <div class="banner_text"> <a class="banner_img_href" href="http://someurl.com"> <img src="images/xF0mp.gif"> </a> </div> <div class="banner_img"> <a class="banner_img_href" href="http://someurl.com"> <img border='0' src="images/tO9x.gif" id='banner_image' alt='Banner Image' /> </a> </div> </div> xml <?xml version="1.0" encoding="utf-8"?> <list_database> <row> <src>/images/p2B12.gif</src> <url>http://autoway.jp/</url> <target></target> </row> <row> <src>/images/xF0mp.gif</src> <url>p2B12.gif</url> <link>http://www.yahoo.co.jp/</link> </row> </list_database>
- 締切済み
- JavaScript
- 画像にリンクをつけたら、実線でかこまれた
バナーをつくり、それにリンクの指定をしたら、実線でかこまれてしまいました。 こんなことは初めてです。 <div class="top_left"><a href="index0.html"><img src="xx.png" width="558" height="119" ></a> </div> 単純な指定だとおもうのですが・・・。 お手数ですが、よろしくお願いします。 なお、 .link a { color: #111; } .link a:hover { color: #aaa; } .link a { text-decoration: none; } ほかの箇所で、文字のリンクの下線を消すために、cssで上のような 記述をしています。（関係あるかはわかりませんが・・・） 画像の箇所には、上記のスタイルは指定していません。
- ベストアンサー
- CSS
- 【jQuery】複数の画像の読み込み完了感知方法
やりたいこと。 すでに表示しているHTML画面上にさらにHTMLタグ（画像を含む）を表示したい。 そのタグにて表示されるべきものがすべて表示されたら、新たに別の関数を実行したい。 ■画像がひとつの場合はこんな感じ？ $("#hoge").click( function(){ var jqObj = $("<div />"); var imgObj = $("<img />"); imgObj.attr({ "src":"./g.bmp"}); imgObj.load(function(){ jqObj.prepend(imgObj); $("body").prepend(jqObj); //このへんに描画は終わった状態での処理 }); } ); ■画像が複数ある場合はどう書けばよいでしょうか？ 以下のような書き方であってるのでしょうか？ $("#hoge").click( function(){ var jqObj = $("<div />"); var imgObj = $("<img />"); var imgObj2 = $("<img />"); imgObj.attr({ "src":"./g.bmp"}); imgObj2.attr({ "src":"./f.bmp"}); imgObj.load(function(){ imgObj2.load(function(){ jqObj.prepend(imgObj); jqObj.prepend(imgObj2); $("body").prepend(jqObj); //このへんに描画は終わった状態での処理 }); }); } ); PS そもそもどの時点でブラウザは画像をWEBサーバに要求するのでしょうか？ imgObj.attr({ "src":"./g.bmp"}); の時点でgetの要求出すのでしょうか？
- ベストアンサー
- JavaScript
- リンクのカラー
教えてください。 リンク部の文字の色を変えようとすると、擬似クラスをつかって、次のようなコードで実現できるところまでは、わかります。 -----html----- <p class="sample"><a href="a.html">リンク</a></p> -----css----- .sample a:link { color: #FF0000; } ここで、<p>タグを使うと改行されてしまうため、<span>等の改行が入らないタグでリンク文字の色指定をしたいのですが、上手くいきません。 <span>じゃなくても良いのですが、改行が入らない、リンク文字の色指定の方法があれば、教えてください。
- ベストアンサー
- HTML
- 画像をフェードアウト＆フェードインで切り替えたい
jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){ $("#cat-list a").click(function(){ $("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); $("p#cat-name").text($(this).text()); return false; }); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list"> <li><a href="images/cat01.jpg">ネコ1</a></li> <li><a href="images/cat02.jpg">ネコ2</a></li> <li><a href="images/cat03.jpg">ネコ3</a></li> <li><a href="images/cat04.jpg">ネコ4</a></li> <li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 なんとか無事にできました。 LancerVIIさん、今回も ありがとうございました。