CODEWITHSUNDEEP
javascripthtmlimage
hello temp10
hello temp10

Reputation: 41

Redirect on click of an image

I am trying to have a redirect on click of an image, but nothing happens. Can anyone please guide me.

 <img src="img/facebook.png" style="border:0px;margin:2px;padding:2px;left;width:26px; height:20px;" onclick="window.location.href('https://www.facebook.com/pages/Gr81');"/>

Upvotes: 2

Views: 17486

Answers (4)

cnngraphics
cnngraphics

Reputation: 39

In the DOM (Document Object Model), the WINDOW object represents an open window in a browser. It has a "location" property that you can call and give it a value of your desired redirect URL like this:

<script>
    $('.fbicon').click(function() {
       window.location='https://www.facebook.com/blah';
    });

Yet another example without JQUERY:

<button onclick="myFunction()">Take me to CNN.com</button>
<script>
function myFunction() {
    location.href = "http://www.cnn.com";
}
</script>

See these URLs for DOM element properties and values: https://www.w3schools.com/jsref/prop_loc_href.asp https://www.w3schools.com/jsref/obj_location.asp

Upvotes: -1

Cutting Edge Hobbies
Cutting Edge Hobbies

Reputation: 99

if you can wrap the image with an anchor tag around then you can simply do

<a href="https://www.facebook.com/blah">
<img src="img/facebook.png" style="border:0px;margin:2px;padding:2px;left;width:26px; height:20px;" />
</a>

Or a cleaner way would be to use a class name and jquery.

Now you have:

  • in the <head> or a .css include

    <style>.fbicon{border:0px;margin:2px;padding:2px;width:26px;height:20px;}</style> </head>

your image in the body

<img src="img/facebook.png" class="fbicon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
$('.fbicon')(function() {
  //alert( "go to site" );
  window.location='https://www.facebook.com/blah';
});
</script>
</body>

Upvotes: 2

416E64726577
416E64726577

Reputation: 2214

For me, the following woked:

<img src="img/facebook.png" style="border:0px;margin:2px;padding:2px;left;width:26px; height:20px;" onclick="javascript:window.location='https://www.facebook.com/pages/Gr81';" />

What I put in the onclick was

onclick="window.location='https://www.facebook.com/pages/Gr81';"

The way to assign a DOMString to a window.location property is by

window.location = "some url";

instead of

window.location('some url'); //incorrect

You could also do window.location.href instead of window.location, which seems like what you wanted to do in your code.

Upvotes: 5

Target
Target

Reputation: 199

you can do it this way

<img src="img/facebook.png" style="border:0px;margin:2px;padding:2px;left;width:26px; height:20px;" onclick="window.location='https://www.facebook.com/pages/Gr81'"/>

Upvotes: 1

Related Questions