Using Javascript to change image to link

javascript jquery html

62 观看

1回复

24 作者的声誉

I would like to change an image on my website into a link using Javascript so that when users click the image they are redirected to a website. My html code and Javascript code are as follows. I tried mimicking what was mentioned in this thread but was unsuccessful (how to add a link to an image using jquery?).

The image I am trying to create a link for is http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg

Thank you for your help.

My Javascript code

jQuery('.profile-avatar.open-photo-swipe').wrap($('<a>',{
   href: link2;
}));

My HTML code

<div class="profile-header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div v-pre>
                    <a class="profile-avatar open-photo-swipe"
                           href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
                           style="background-image: url('http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-300x300.jpg')"
                           data-width="1024"
                           data-height="576"
                           >
                        </a>
                                        </div>
                <div class="profile-name" v-pre>
                    <h1 class="case27-primary-text">Offer 2</h1>
                                                <h2>blag</h2>
                                        </div>
                <div class="cover-details" v-pre>
                    <ul></ul>
                </div>
                <div class="profile-menu">
                    <ul role="tablist">
                        <li class="active">
                                <a href="#_tab_1" aria-controls="_tab_1" data-section-id="_tab_1"
                                   role="tab" class="tab-reveal-switch toggle-tab-type-main">
                                    Profile </a>
                            </li><li class="">
                                <a href="#_tab_2" aria-controls="_tab_2" data-section-id="_tab_2"
                                   role="tab" class="tab-reveal-switch toggle-tab-type-comments">
                                    Comments
                                      <span class="items-counter">0</span>

                                    </a>
                            </li> <div id="border-bottom"></div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
作者: firefirehelphelp 的来源 发布者: 2017 年 12 月 27 日

回应 1


0

8379 作者的声誉

jQuery('.profile-avatar.open-photo-swipe')

This element is a link, not image:

<a class="profile-avatar open-photo-swipe"
   href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"

So use

jQuery('.profile-avatar.open-photo-swipe').prop('href', link2)
作者: Qwertiy 发布者: 2017 年 12 月 27 日
32x32