0

ここ ( http://css3.bradshawenterprises.com/cfimg/#cfimg7 ) にあるスクリプトを使用していますが、画像へのリンクを追加できるかどうか疑問に思っています。

画像の周りに html へのリンクを追加しても機能せず、オンラインで検索して JavaScript リンク コードを少し追加しようとしましたが、どちらも機能しませんでした (間違って使用したことは 99% 確信しています)。

とにかく、コードの一部はこれを言っています

$("#cf7 img").eq(newImage).addClass("opaque");

これはHow do I create a link using javascript?から追加しようとした部分です。、うまくいかなかったのも不思議ではありません。

$("#cf7 img").eq(newImage).setAttribute("href", testlink);
$("#cf7 img").eq(newImage).innerHTML = linktext;
document.body.appendChild($("#cf7 img").eq(newImage));

助けていただければ幸いです。合計 5 つの画像をそれぞれの URL にリンクしたいと思います (これらは大きな画像なので、クリックするとフル サイズになります)
乾杯 :)

4

5 に答える 5

1

残念ながら、CSS を使用して画像を切り替える方法が原因で、<a>個々の画像を作成したり、画像に追加したりするソリューションはどれも機能しません。onclick画像は透明になるだけで、隠れません。したがって、表示されているものではなく、一番上のものは常にすべてのイベントを受け取ります。

幸いなことに、私はうまくいく解決策を持っています:)

<a>次のように、画像の上に 1 つの共通タグを追加します。

<div id="cf7" class="shadow">
    <a href="#" onclick="return cf7clicked();">
        <img class='opaque' src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Turtle.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
    </a>
</div>

そして、次のように JavaScript を追加します。これにより、どの画像がクリックされたかが判断され、適切なアクションが実行されます。

function cf7clicked() {
    var sel_idx = $('#cf7_controls .selected').index();
    alert(sel_idx); // only for demo!
    var img_src = $('#cf7 img').eq(sel_idx).attr('src');
    var fullsize_src = img_src; // get path to fullsize version of the image
    window.location.href = fullsize_src; // or use lightbox, or ...
    return false;
}

それはJSfiddleにあります - http://jsfiddle.net/8UvUV

于 2013-10-19T11:09:58.440 に答える
0

できることは 1 つです。つまりonclick、画像のイベントを次のように定義します。

<img src="URL" onclick="location.href=this.src" style="zoom:0.25; cursor:pointer">

これにより、画像が小さいサイズ (つまり0.25x) で表示されますが、クリックすると元のサイズで開きます。

于 2013-10-19T11:21:06.323 に答える
0

画像にリンクを追加することはできません。リンクの動作をシミュレートすることしかできません。

これを行うには、画像のイベントクリックをインターセプトし、ユーザーがマウスをそれらの上に移動したときにカーソルプロパティをポインターに変更する必要があります。

その方法を示すサンプルを作成しました。

JavaScript

$('.imgLarge').click(function(){
  changeHeight(this);
});

CSS

.imgMini:hover{
  opacity:0.7;
  cursor:pointer;
}
于 2013-10-19T10:43:30.523 に答える