SavantKing Orange
SavantKing Orange

Reputation: 145

image as link with javascript

I have two images and two radio buttons.

and if you click on a image the readio button will be selected.

But now I want to have the image as a link. So that you can see the hand - by normal link.

this is the html:

 @if (Html.GebruikerContext().Klant.LogoIDSpecified)
                {
                    <div class="property wide extra-margin">
                        <br />
                        <label>
                            Kies header logo
                        </label>
                        <div class="email-logo">
                            <label>
                                <span class="email-logo-image">
                                     <img src='/Beheer/Images/mainlogo_274x122.png' />
                                </span>
                                <span class="email-logo-button">
                                    @Html.RadioButton("logo-selectie", "standaard", !Model.GebruikKlantLogo, new { @name = "logoKeuze" })
                                    <span>standaard logo</span>
                                </span>
                            </label>
                        </div>                        <div class="email-logo">
                            <label>
                                <span class="email-logo-image">
                                    <img src='/Beheer/Document/Download?documentID=@(Html.GebruikerContext().Klant.LogoID)' />
                                </span>
                                <span class="email-logo-button">
                                    @Html.RadioButton("logo-selectie", "klant", Model.GebruikKlantLogo, new { @name = "logoKeuze" })
                                    <span>eigen logo</span>
                                </span>
                            </label>
                        </div>
                    </div>
                }

and this is the javascript:

$('#logo-selectie[value=standaard]').change(function () {
    $('#GebruikKlantLogo').val(false);
});

$('#logo-selectie[value=klant]').change(function () {
    $('#GebruikKlantLogo').val(true);
});

Upvotes: 0

Views: 72

Answers (2)

Shubham Pokhriyal
Shubham Pokhriyal

Reputation: 512

Put your image in <a> tag if you want to your image to act like a link. If you just want to see "the hand" then you have to write a css

.classname {
  cursor: pointer;
}

<img class="classname" src='/Beheer/Images/mainlogo_274x122.png' />

Upvotes: 4

DBS
DBS

Reputation: 9959

Unless I'm misunderstanding, I think you're overthinking the problem. To display a pointer when hovering over the image, all you need to do is add a small amount of CSS to style the image.

.showPointer {
  cursor: pointer;
}
<img class="showPointer" src="http://via.placeholder.com/300x300">

Upvotes: 0

Related Questions