0

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
  • 29
  • 1
  • 8
  • well, you get 404 if you go to the link `http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg` from your browser directly. – Anthony C Dec 27 '17 at 19:47

1 Answers1

0
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
  • 19,681
  • 15
  • 61
  • 128
  • Hi Qwertiy, thanks for your quick response. However, when I input your code into the Javascript section of my wordpress theme and hit update, I get an error message that says `Error 404: The page your are looking for cannot be found.` Could you please help me out? – firefirehelphelp Dec 27 '17 at 17:39