
お世話になっています。
ウェブサイトに画像が切り替わるスライドを設置しています。
この画像にリンクを貼ることは可能でしょうか…?
<script type='text/javascript'>
$('#imageSlideContainer').crossSlide({
sleep: 5.0,
fade: 1.8
}, [
{ src: 'img/topimage01.jpg' },
{ src: 'img/topimage02.jpg' },
{ src: 'img/topimage03.jpg' },
{ src: 'img/topimage04.jpg' },
{ src: 'img/topimage05.jpg' },
]);
</script>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんにちは
>この画像にリンクを貼る
画像をクリックすると指定場所へ遷移するという意味と解釈しました。
スクリプトだけ(それもごく一部)しか提示されていないので、仕組みが全くわかりませんが、基本的にはHTMLを
<a href="~~"><img src="~~" /></a>
という構造にしておけばよろしいでしょう。
これをあらかじめ複数用意しておいて「表示/非表示」を切り替えるとか、HTML要素はひとつのままでsrc属性等の値を書き換える等で、スライドの切り替え等が可能になります。
質問者様がどのような方法で設置しているのか不明ですが、ご提示のスクリプトの内容から推察すると、何らかのライブラリをご利用なさっているのではないかと思いますので、そのライブラリがご質問のような利用を想定(対応)しているかによると思います。
想定している場合は、その仕組みに従えば良いですし、想定していなければ何らかの形で改変するなどでも実現することは可能と推測します。
ご利用のライブラリが、画像のクリックイベントに対応するメソッドを用意してくれていれば、そちらを利用するという方法もありそうです。
とは言っても、ライブラリの改変が必要となるような場合には、それなりに面倒なことになると思いますので、そのライブラリに特に思い入れがあるのでなければ、「リンク付きのスライド」に対応しているようなライブラリをご利用なさる方が遥かに簡単だと思います。
例えば
https://teratail.com/questions/101769
No.1
- 回答日時:
JavaScriptで複数画像をスライド表示させているのですから「この画像へのリンクを貼る」のではなく「このページへのリンクを貼る」ということになります。
ページ全体を参照またはそのページへ遷移するのがイヤなのであれば・・・
(1) 同じスクリプトをリンクを貼りたい側のページに用意し、そこではスクリプト内のsrc:の画像ファイル指定ところを各ファイルのURLにする。
(2) 元ページを改造してこのスライドの部分だけを持ったページを作成し、元ページでは新設したフレームにこのページを表示。
このスライドを参照したい側ではスライドの部分だけを持ったページへのリンクを貼る。
といったあたりが簡単でしょう。
参考まで。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascript imageオブジェクト...
-
ターゲットを_blankにするには。
-
画像をフォルダに入れれば表示...
-
jQuery FlexSliderのカルーセ...
-
HTMLで条件分岐はできますか?
-
今日の日付のみ表示して1つの画...
-
画像に透明度をかけて、変数に...
-
p5jsについて
-
Ajax LightBoxを使用したサムネ...
-
画像の重なりの順序を代える方...
-
JavaScriptで画像からリンクプ...
-
cookieによる画像切り替えについて
-
Javascript で共通の処理をどこ...
-
2つの別ウインドウの表示
-
ホームページ製作について、オ...
-
thickbox 次の画像への移動の...
-
ランダム画像を2枚一組で並べたい
-
【java】背景画像を一定時間で...
-
背景画像をランダムにスライド...
-
一定時間で変わる画像・・・
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
画像の重なりの順序を代える方...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
1枚の画像をクリックして複数の...
-
ステータスバーについて
-
JavaScript スライドの画像にリ...
-
マウス追従スクリプトについて
-
画面の表示位置を指定させて表...
-
Javascriptで指定した日付と時...
-
プルダウンの位置がwin/macでず...
-
jQueryで特定のURLの時のみ表示
-
オンマウスで、画像切り替え+...
-
バナー広告のように表示させた...
-
ランダム表示に加えwidthをブラ...
-
JavaScriptとチェックボックス...
-
ホォルダの読む込み
-
jQuery bxSlider 画像に変更
-
画像にロールオーバーするとメ...
おすすめ情報