<p>I'm using <a href="http://www.c6software.com/Products/PopBox/" rel="nofollow noreferrer">PopBox</a> for magnifying thumbnails on my page. 
But I want my website to work even for users which turned javascript off.</p>

<p>I tried to use the following HTML code:</p>

<pre><code>&lt;a href="image.jpg"&gt;
     &lt;img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/&gt;
&lt;/a&gt;
</code></pre>

<p>Now i need to disable the a-Tag using javascript, otherwise my PopBox won't work.</p>

<p>How do I do that?</p>

[{'answer_id': 63612, 'author': 'Daniel Papasian', 'author_id': 7548, 'author_profile': 'https://Stackoverflow.com/users/7548', 'pm_score': 2, 'selected': False, 'text': "<p>Put the onclick event onto the link itself, and return false from the handler if you don't want the default behavior to be executed (the link to be followed)</p>\n"}, {'answer_id': 63626, 'author': 'Chris Shaffer', 'author_id': 6744, 'author_profile': 'https://Stackoverflow.com/users/6744', 'pm_score': 3, 'selected': True, 'text': '<p>Just put the onclick on the a-tag:</p>\n\n<pre><code>&lt;a href="image.jpg onclick="Pop()"; return false;"&gt;&lt;img ...&gt;&lt;/a&gt;\n</code></pre>\n\n<p>Make sure to return <code>false</code> either at the end of the function (here <code>Pop</code>) or inline like in the above example. This prevents the user from being redirected to the link by the <code>&lt;a&gt;</code>\'s default behaviour.</p>\n'}, {'answer_id': 63638, 'author': 'Paul Dixon', 'author_id': 6521, 'author_profile': 'https://Stackoverflow.com/users/6521', 'pm_score': 1, 'selected': False, 'text': '<p>You could give all your fallback anchor tags a particular classname, like "simple"</p>\n\n<p>Using <a href="http://www.prototypejs.org/api/utility/dollar-dollar" rel="nofollow noreferrer">prototype</a>, you can get an array of all tags using that class using a CSS selector, e.g.</p>\n\n<pre><code>var anchors=$$(\'a.simple\')\n</code></pre>\n\n<p>Now you can iterate over that array and clear the href attributes, or install an onclick handler to override the normal behaviour, etc...</p>\n\n<p>(Edited to add that the other methods listed above are much simpler, this just came from a background of doing lots of unobtrusive javascript, where your JS kicks in and goes and augments a functioning HTML page with extra stuff!)</p>\n'}, {'answer_id': 538993, 'author': 'system PAUSE', 'author_id': 52963, 'author_profile': 'https://Stackoverflow.com/users/52963', 'pm_score': 0, 'selected': False, 'text': '<p>The <code>href</code> attribute is not required for anchors (<code>&lt;a&gt;</code> tags), so get rid of it...</p>\n\n<pre><code>   &lt;a id="apic001" href="pic001.png">&lt;img src="tn_pic001.png">&lt;/a>\n\n   &lt;script type="text/javascript">\n      document.getElementById("apic001").removeAttribute("href");\n   &lt;/script>\n</code></pre>\n\n<p>This method will avoid library contention for <code>onclick</code>.</p>\n\n<p>Tested in IE6/FF3/Chrome. Side benefit: You can link directly to the portion of the page containing that thumbnail, using the id as a URI fragment: <code><a href="http://whatever/gallery.html" rel="nofollow noreferrer">http://whatever/gallery.html</a><strong>#apic001</strong></code>.</p>\n\n<p>For maximum browser compatibility, add a <code>name="apic001"</code> attribute to the anchor tag in your markup (\'name\' and \'id\' values must be identical).</p>\n\n<p>Using jQuery, dojo, Prototype, etc. you should be able to do the removeAttribute on multiple, similar anchors without needing the id.</p>\n'}, {'answer_id': 814735, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>You should be able to mix and match the return false from Chris\'s idea with your own code:</p>\n\n<pre><code>&lt;a href="image.jpg" onclick="return false;"&gt;\n    &lt;img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"&gt;\n&lt;/a&gt;\n</code></pre>\n\n<p>If someone has Javascript disabled, then their browser ignores the onclick statement in both elements and follows the link; if they have Javascript enabled, then their browser follows both OnClick statements -- the first one tells them not to follow the <code>&lt;a&gt;</code> link. ^_^</p>\n'}, {'answer_id': 2995911, 'author': "Igor Zinov'yev", 'author_id': 123564, 'author_profile': 'https://Stackoverflow.com/users/123564', 'pm_score': 1, 'selected': False, 'text': '<p>May I suggest, in my opinion, the best solution? This is using jQuery 1.4+.</p>\n\n<p>Here you have a container with all your photos. Notice the added classes.</p>\n\n<pre><code>&lt;div id="photo-container"&gt;\n    &lt;a href="image1.jpg"&gt;\n        &lt;img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" /&gt;\n    &lt;/a&gt;\n    &lt;a href="image2.jpg"&gt;\n        &lt;img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" /&gt;\n    &lt;/a&gt;\n    &lt;a href="image3.jpg"&gt;\n        &lt;img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/&gt;\n    &lt;/a&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>An then you make a single event handler this way:</p>\n\n<pre><code>&lt;script type="text/javascript"&gt;\n$(document).ready(function(){\n    var container = $(\'#photo-container\');\n\n    // let\'s bind our event handler\n    container.bind(\'click\', function(event){\n        // thus we find (if any) the image the user has clicked on\n        var target = $(event.target).closest(\'img.popup-image\');\n\n        // If the user has not hit any image, we do not handle the click\n        if (!target.length) return;\n\n        event.preventDefault(); // instead of return false;\n\n        // And here you can do what you want to your image\n        // which you can get from target\n        Pop(target.get(0));\n    });\n});\n&lt;/script&gt;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/63581', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4186/']