ここから本文です

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11118209171の続き

web********さん

2013/12/2113:48:23

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1111820917...の続き

何度も質問大変恐縮です。


>下記二つが難しくてわかりません。

・キラキラ画像も画像リンクに
そのままです。
上に重ねている画像も下の写真画像と同じようにリンクにして、キラキラ画像の場所もクリックできるようにする。
写真からはみ出した部分もリンク状態なのがアレですが。

・さらにリンクを重ねる。
positionで要素(画像)を重ねる方法は分かりますよね。
その二つの画像の上に、もうひとつリンクにしている要素を重ねるのです。
そうすればキラキラ画像の部分もリンクできるように見えます。
まあこちらの場合、hoverとの兼ね合いもあるので面倒かもしれません。
そのままです。
上に重ねている画像も下の写真画像と同じようにリンクにして、キラキラ画像の場所もクリックできるようにする。
写真からはみ出した部分もリンク状態なのがアレですが。



キラキラ画像も画像リンクにのほうを実践してみました。
確かにクリックできました。ありがとうございます。

ただライトボックスの習性上仕方が無いと思いますが、画像をアップしてから他のグループの画像に変えるときに同じ画像が二回繰り返されてしまいます。
これはおそらくこちらでは解決できないですよね。
またキラキラをホバーするときらきらしかホバーできないのも仕方が無いですね。


また・さらにリンクを重ねる。の件ですが、
<dd>
<a href="img/base/street.jpg" data-lightbox="aboutyufu"><img class="brilliantimg" src="img/base/brilliant.png" alt="由布の全体の写真" width="508" height="290" /></a>
<a href="img/base/street.jpg" data-lightbox="aboutyufu"><img class="contimg" src="img/base/street.jpg" alt="由布の全体の写真" width="550" height="290" /></a>
</dd>

このように一つのボックスに入れてしまうということですか?
それともキラキラを完全にぴったり自然の写真に乗っけてしまうということでしょうか?

何度も本当に恐縮です。
とても勉強になり、お人柄も含めて尊敬しています。

補足お付き合い頂き大変ありがとうございました。

brilliant.pngと町の写真のサイズを同じにしてbrilliant.pngを上にぴったり乗せてしまって、二つを同じボックスに入れればよいのですね。
そうすれば拡大したときにも二重になってしまうことを防げるのですね。

閲覧数:
138
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

sit********さん

2013/12/2300:30:07

>webpege12345さん

>さらにリンクを重ねる。の件ですが

すみません。jsが良く分からなかったので、普通に透明画像での画像リンクを重ねる、だけではだめでしたね。
(写真のほうがさわれないためhoverできない)

で、ごめんなさいだけでは難なので、適当にいじってみました。
こんなので参考になるといいのですが…

前提として、brilliant.pngとstreet.jpg、透明画像のリンクを同じddに入れ(移動し)て重ねます。
js/hover.jsを少しいじります。

<dd class="twoline">
<div class="imgaround">

<div class="abc" style="position: relative; margin:1em auto 2em;">

<img src="~street.jpg" alt="由布の全体の写真" width="550" height="290"
style="border: solid 5px #FFFFFF;" />

<a href="~street.jpg"
style="position: absolute; top:0; left:0; z-index:3;"><img
src="spe.gif" alt="由布の全体の写真" width="550" height="290" /></a>

<img style="position: absolute; top: -45px; right:-25px; z-index:2;"
src="~brilliant.png" alt="" width="508" height="290" />

</div><!-- /abc -->

<p class="newline">
【由布の全体の写真】~

<div class="abc"></div>に画像を入れます。
abcの中に入れた画像をz-indexで順序良く重ねていってtop:;left:;などで位置調整。
hover.js の「,img.contimg, img.brilliantimg」とあるところに「,abc」も追加。
これで、class="abc"が指定された要素に触れると、その要素の内容(画像3枚)が半透過するようになります。

質問した人からのコメント

2013/12/24 15:23:43

お付き合い頂き大変ありがとうございました。
教えていただいて恐縮ですが、管理が大変になりかねないので最終的には画像を修正して対応しました。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる