Turn off the ability to click on images, but allow users to access the right

https://i.stack.imgur.com/jriaP.png

Example image sourced from reddit.com

Illustration represents the desired effect using CSS and possibly JS.

In essence:

I aim to make an image on a website unclickable to its imageURL
There should be a context menu that allows right-clicking to open the image URL in a new tab

How can this be achieved solely through CSS (using the Chrome Stylish plugin) and, if necessary, Javascript?

I tried using this method:

pointer-events: none; applied to the CSS class

However, this code also disables the ability to access the right-click context menu.

javascript jquery html css image

Answer №1

There might be limitations in achieving this task solely with CSS. If you'd like to tackle it using JS, consider the following code snippet:

<a href="#link" onclick="event.preventDefault();">
    <img src="img.jpg"/>
</a>

Answer №2

Try using:

<IMG border=0 src="..." oncontextmenu="return false;">

Check out a demonstration here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding the scope of an anonymous function after a successful jQuery ajax call

Is it possible to modify the returnHtml variable from within the success function without using its name as a parameter? function retrievePrice(productId, storeId) { var returnHtml = ''; jQuery.ajax({ url: "/includes/data.jsp?" ...

The error message "[Insecure URL]" was triggered at line 85 of angular.min.js in the AngularJS framework

Looking for some assistance with Angular as I have limited knowledge. It was working fine on localhost, but after upgrading from PHP5 to PHP7, I encountered this error: angular.min.js:85 Error: [$sce:insecurl] http://errors.angularjs.org/1.2.13/$sce/inse ...

javascript php angularjs

Issue with Ng-Messages not functioning properly due to a custom ng-Include directive lacking a child scope

I have created a custom directive called lobInclude, which is similar to ngInclude but with no isolated scope: .directive("lobInclude", ["$templateRequest", "$compile", function($templateRequest, $compile) { return { restrict: "A", ...

javascript angularjs angularjs-directive angular-directive ng-messages

Exploring the power of VueJs through chaining actions and promises

Within my component, I have two actions set to trigger upon mounting. These actions individually fetch data from the backend and require calling mutations. The issue arises when the second mutation is dependent on the result of the first call. It's cr ...

javascript vue.js vuex es6-promise

jQuery doesn't have the capability to convert this data into JSON format

I have some code that I want to convert into JSON format: var locationData = []; locationData['lat'] = position.coords.latitude; locationData['long'] = position.coords.longitude; locationData['address']['road'] = da ...

jquery arrays json

Tips for Retrieving Html Element Attributes Using AngularJS

Update: Even though the discussion veered off track, the main question still stands - how can I access an attribute of an HTML element within an Angular controller? Check out my attempt on Plnkr: http://plnkr.co/edit/0VMeFAMEnc0XeQWJiLHm?p=preview // ...

javascript html angularjs

Submitting a form with multiple actions using Ajax

Is it possible to submit data from multiple forms on the same page to different API tables using AJAX for each form? I have one form that needs to write to one table and another form that needs to write to a different table. How can I achieve this with o ...

jquery html ajax forms form-submit

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

I am looking to implement a feature where I can hide and show overflow content in a div. When I click on the expand button, it expands the content. However, I want this button to toggle and change text as well. Thank you! function descriptionHeightMo ...

javascript jquery html css

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Is there a way to customize the ui-autocomplete div by adding a custom class? I have several autocomplete widgets on my webpage, and I need to style their drop-downs differently. Since editing the ui-autocomplete class directly is not an option, I am wor ...

javascript jquery css jquery-ui autocomplete

The Ajax request encountered a failure exclusively when running on the localhost server

There seems to be an issue with my ajax login call: $.ajax({ url: url_to_ajax, success: function ( data ) { switch (data) { case "-2": input1.addClass("has-error"); break; cas ...

php jquery ajax get

Utilize Vue.js and express.js to distribute HTML files securely

Currently, my tech stack includes Vue.js for the frontend and Express.js for the backend. When I kick off the express.js server using npm start, my goal is to serve the Vue frontend component. By utilizing the Vue generator and Express generator, I attemp ...

javascript html node.js express vue.js

Is there a method to verify the consumability of an API without having to make a direct request to it?

I'm working on an idle timer feature where the API will be called to update data once the timer runs out. How can I check if the API is still usable without actually sending a request? ...

javascript ajax api

How can we stop the anchor jump caused by a third-party script?

I'm currently utilizing a third-party script (details provided below) to divide a form into multiple ajax'd pages. However, when I attempt to move on to the next page, it immediately jumps to an anchor at the top of the form. This behavior is unn ...

javascript jquery html drupal anchor

Guide for displaying and hiding an image using a button or link in Next.js

I'm a beginner with React and Next.js, and I have the following code snippet: import Link from 'next/link'; import Image from 'next/image'; async function getPokedex() { const response = await fetch(`http://localhost:3000/api/p ...

javascript reactjs node.js next.js

Animating background images using a single data attribute

I'm attempting to create a smooth animation between different background images stored in a single data attribute. The goal is for each image to load sequentially, with the first one appearing immediately and the rest following after a 5-second delay. ...

javascript jquery

Disabling a button does not automatically shift the focus to the next element in the tab order

Is there a way to limit the number of times a button can be clicked using jQuery? For example, I want a button that can only be clicked three times before disabling itself automatically. test.html <div class="main"> <input class="one" type="t ...

javascript jquery html

Is it possible to retrieve the controller path for an AJAX request from within a partial view?

Looking for a solution to fully decouple and reuse a partial view that allows users to select dates and filter results based on those dates. This widget can be used on multiple pages, so I wanted to add event listeners that would submit the form within the ...

javascript ajax asp.net-mvc partial-views

Is a component updating an unregulated text input to be controlled?

Whenever I attempt to input information into the form and save it in the state, I encounter the following issue: Warning: A component is converting an uncontrolled text input to a controlled one. Input elements should not transition between being contro ...

javascript reactjs

Development of a chart application involving frontend and backend components, utilizing chartjs for data visualization, mongodb for storage

As a beginner in generating charts using the ajax mechanism and chartjs, I've encountered an issue where the graphs are being plotted incorrectly. Any guidance on how to improve would be greatly appreciated. Thank you! Here is my JavaScript code for ...

javascript ajax mongodb chart.js

Why does my ajax request show the result in the php file rather than redirecting to the html page?

I've developed a series of AJAX functions that retrieve data from a PHP file. However, one of the functions redirects to the PHP file to fetch data but fails to return to the HTML page for data insertion. Here is the code used to fetch a table from a ...

CSSer Q&A