CODEWITHSUNDEEP
javascriptjqueryhtml
alsabsab
alsabsab

Reputation: 1311

Image as an html button

I have an image that I want it to act like a button to preform an java-script onclick on it, everything is working fine except when I click over the image it returns to the top of the page, I want it the page to stay on the same place that I am scrolling (middle of the page for example) when I click over the link image. This is my code 

<a id="dell" href="#"><img src="images/logo80.png" width="80" height="80" alt="Dell" /></a>

Upvotes: 0

Views: 90

Answers (4)

Mataniko
Mataniko

Reputation: 2232

You don't need to surround it with an 

<a>

tag, this is what taking you to the top of the document (href="#").

If you want to set the cursor to be a hand icon do it through css:

img { cursor: hand; cursor: pointer; }

Upvotes: 0

phuang07
phuang07

Reputation: 981

Here is an example using inline javascript.

<a id="dell" href="#" onclick="alert('hello world!'); return false;"><img src="http://static.adzerk.net/Advertisers/37332fa8c2654aef804e417e3788e977.png" width="80" height="80" alt="Dell" /></a>

Upvotes: 0

Lorenzo Verri
Lorenzo Verri

Reputation: 153

Well the problem is just about your tag. You've set an href='#' which means "reloading", that is why the browser brings you up to the page.

In order to set a javascript event on click try the following:

Otherwise there are other methods like the property onclick='nameOfYourFunction()' or jQuery events.

Upvotes: -3

technicallyjosh
technicallyjosh

Reputation: 3531

You have to prevent the default action for the a tag or it will use the href.

Try this in your event handler.

$(document).ready(function() {
    $("#dell").click(function(e) {
        e.preventDefault();
        $("#boarder").toggle(500);
    });
});

Another thought is that you actually don't need an a tag if you aren't using it to navigate somewhere.

Upvotes: 5

Related Questions