画像の中のテキストclickable

私はテキストを含む画像を持っていますが、画像内のこのテキストをクリック可能にしたいのですが、問題があります：画像は警告ボックスの中に表示されます。私はボタンをクリックすると私にこれらのイメージのアラートボックスが表示され、イメージが表示されたらその中のテキストをクリックしたい、どうすればいいのですか？画像の中のテキストclickable

<html> 
    <head> 
    <script src="dist/sweetalert.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="dist/sweetalert.css"> 
    </head> 
    <body> 
    <a onclick="Alert()">Button</a> 

    <script> 
     function Alert() { 
     swal({ 
      title: "Sweet!", 
      text: "Here's a custom image.", 
      imageUrl: "images/image.jpg" 
     }); 
     } 
    </script> 
    </body> 
</html>

出典

2017-06-28 MenjeHer

リンクのようにテキストをクリック可能にしたいですか？ – DDelgro

はい正確に..これらの画像には、ユーザーが画像上にマウスを置いたときにテキストがあります。 – MenjeHer

SweetAlert2はDOM要素を作成するだけです。あなたの開発者ツールを使ってそれを調べると、textがswal.getContent()で入手できる要素に包まれていることがすぐに分かります。

この要素にクリックリスナーを簡単にフックできます。簡単にするために、私はあなたがjQueryを使用すると仮定します：

<script> 
    function Alert() { 
    swal({ 
     title: "Sweet!", 
     text: "<i>Here's a custom image.</i>", 
     imageUrl: "images/image.jpg", 
     html: true 
    }); 

    $(swal.getContent()).on('click', function(ev) { 
     console.log('Do something when the text is clicked'); 
    }); 

    $(swal.getImage()).on('click', function(ev) { 
     console.log('Do something when the image is clicked'); 
    }); 
    } 
</script>

私は助けてくれることを望みます。

更新：編集してくれてありがとうlimonite（あなたはswal.getContent()あなたが探している要素と直接を提供します、セレクターを探す必要はありません）。

また、他の回答に見られるようにhtmlプロパティを例として追加しました。「実際」のリンクのようなものをご希望の場合は、<a>タグを使用します。

出典

2017-06-28 13:10:57 lexith

のようなテキストをクリックできます。たとえば、画像にテキストがあると仮定します。ここをクリックしてください。テキストを含む画像を画像：ここをクリックしてください。今私は彼がテキストをクリックして、それをクリックすることができますが、テキストが外部ではない画像内にある画像を参照してくださいときに、ユーザーが画像を参照してください – MenjeHer

は、もう一度リムンテを追加しました。イメージにリスナーを直接追加できます。画像内のテキストがクリックされた場合にのみ作業したい場合は...これは奇妙です。もしあなたが正確な措置を知っていれば、可能かもしれません。おそらく、ユーザーがクリックした画像のどこにテキストが表示されているのかを調べることができます。しかし、あなたがそこに置いたすべてのイメージに対して動的には機能しません。ちょうどイメージです。 – lexith

これは私のイメージであると想像してください：http://oi66.tinypic.com/15z5fvc。jpg – MenjeHer

はhtml : trueオプションをパスし、textオプション値でマークアップを置く：

swal({ 
    title: "Sweet!", 
    text: "<a href="/your/url">A custom image<a>", 
    html: true 
});

ので、ドキュメントは言う：https://t4t5.github.io/sweetalert/

出典

2017-06-28 13:12:23 David

-1

甘いアラートは、テキストにHTMLをサポートしています。だから、簡単にこのような何かを行うことができます。

<script> 
    function Alert() { 
    swal({ 
     title: "Sweet!", 
     text: "<a href='www.somelink.com'>Some Clickable Link</a>", 
     imageUrl: "images/image.jpg", 
     html :true 
    }); 
    } 
</script>

私は甘いのアラートサイトからこの情報を得ました！ http://t4t5.github.io/sweetalert/

乾杯！

出典

2017-06-28 13:13:33 DDelgro

SweetAlertとSweetAlert2の間に何の違いもないことで混乱を招いています –

Whoops、I didn他の人のHTMLをつかむことを意味しない。それに応じて回答を更新しました。 – DDelgro

警告ボックスのテキストにhtmlを使用できるようにするには、単にhtml: trueを使用します。ここで

swal({ 
    title: "Sweet!", 
    text: "<a href='some_url'>Here's a custom image<a>", 
    imageUrl: "images/image.jpg", 
    html: true 
});

は、あなたがそれをチェックするためにHTMLメッセージの一部にスクロールダウンできるリンクhttp://t4t5.github.io/sweetalert/

です。

出典

2017-06-28 13:18:19 Raj

画像の中のテキストclickable

答えて

関連する問題