What is the process of turning a picture from a menu file into a clickable link?

I have created a menu with some images included, and I want them to be clickable links. However, currently only the text on top of the images acts as a link when hovered over. I would like the entire image to be clickable, not just the text. I believe I may have placed the href tag incorrectly in the code below:

<link rel="stylesheet" href="mbcsmbur9s.css" type="text/css" />


<ul id="mbur9sebul_table" class="mbur9sebul_menulist css_menu" style="width: 931px; height:  165px;">
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_1"><a href="https://www.facebook.com/RealMadrid?fref=ts">Facebook</a></div></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_2"><a>Twitter</a></div></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_3"><a>Google +</a></div></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_4"><a>Youtube</a></div></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_5"><a>Android</a></div></div></li>
  <li class="topitem"><div class="buttonbg gradient_button gradient165" style="width: 184px;"> <div class="icon_6"><a>iOS</a></div></div></li>
</ul>
<!-- Menus will work without this javascript file. It is used only for extra
     effects, improved usability and compatibility with very old web browsers. -->
<script type="text/javascript" src="mbjsmbur9s.js"></script>
javascripthtmlcss

Answer №1

To properly include the image, make sure to place it within an a-tag and add the href attribute like this: 

<a href='#'><img src='your-image.png' />Twitter</a>

UPDATE: Following the discussion below, ensure your CSS includes the following for the anchor tag with the class 'icon_3': 

<a href='#' class='icon_3'>Twitter</a
> and in your CSS it should be styled as shown below: 

.icon_3 {
  display: block;
  background-image: url('ebab_mbur9s_ico_2.png'); 
  background-repeat: no-repeat; 
  background-position: center 28px; 
  height: 100%; 
}

For proper display, remember to use display: block; since anchors are inline elements by default. Apply this to all your icon classes and adjust the background position if needed.

Answer №2

Give it a shot:

<li class="featured-item spaced_li"><div class="button-bg blue-gradient-button gradient325"><a href="https://www.instagram.com/RealMadrid?fref=ig"><div class="icon-2"></div></a></div></li>

Answer №3

Did you know that you can assign a background-image to an <a> tag?

For example, take a look at this JSFiddle:

View Js Fiddle Example

a {
    display:block;
    background:url('xxx.png') no-repeat;
    background-size: 25px 25px;
    padding:10px 10px 10px 35px;
    background-position: center left;
    text-decoration: none;
}

Answer №4

To implement the img as a link, you would need to place it within an anchor tag.

<ul style='list-style:none'>
  <li><a href='#'><img style='position:relative; top:-15px; left:50px;' height='50px' width='50px' src="https://cdn4.iconfinder.com/data/icons/free-large-twitter-icons/512/Twitter_button.png"/>Twitter</a></li>
</ul>

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

Adjust website content depending on user's authentication status

My goal is to display a logout button when the user is logged in and a login button if they are not. I am using JSON tokens to determine if a user is logged in or not, by checking if the token is null. However, this approach does not seem to be working. Ca ...

javascriptangulartypescriptionic4

How to Animate the Deletion of an Angular Component in Motion?

This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...

javascriptcssangulartypescriptangular-animations

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

jqueryhtmlcss

Tips for converting PDF files to images or reducing PDF file size using JavaScript

In my web application built with Next.js, I have a requirement where users can upload PDF files. However, I need to compress these files to a smaller size (e.g. 1MB). Despite searching extensively, I haven't found a satisfactory solution that meets my ...

javascriptnode.jsnext.js

When using React.js with Leaflet, ensure that the useEffect hook is only run on Mount when in the

I have encountered an issue where I need to ensure that the useEffect Hook in React runs only once. This is mainly because I am initializing a leaflet.js map that should not be initialized more than once. However, anytime I make changes to the component&a ...

javascriptreactjsleafletuse-effect

The function within the React component is failing to produce the expected output

After importing two types of images (IMG and IMG2), I wanted to display IMG when the viewport width is less than 600px, and IMG2 when it's equal to or greater than 600px. I created a function to determine the viewport width and return the respective i ...

javascripthtmlcssreactjs

Using Ng-options in AngularJS to populate a select dropdown with an array of arrays

I'm encountering an issue with displaying options from an array of arrays in a select dropdown. Can someone point out what I might be doing wrong? Check out my code here: https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview Here's the HTML snipp ...

javascriptarraysangularjsangularjs-ng-optionsangularjs-select

The vanishing act: Semantic UI menu disappears when you click

My objective is to create a persistent left-side menu using Semantic-UI. I want to implement two different states for the menu - one with text for each item and another with an image for each item. However, I am facing some challenges that have me complete ...

javascriptjqueryhtmlcsssemantic-ui

Sometimes Google Maps API doesn't load properly on my page until I hit the refresh button

Occasionally, I encounter a problem where my Google Map fails to load when the webpage is first opened, resulting in a blank map. However, upon refreshing the page, the map loads correctly. The error message appearing in the Chrome console reads as follow ...

javascripthtmlgoogle-mapsgoogle-maps-api-3google-api

utilizing javascript function in Icefaces applications

I'm facing an issue. Here's the situation: I'm working on a quiz game where I need to implement a timer using JavaScript (jquery.timer.js). I have created a JavaScript file (question.js) with a method called startTimer, which utilizes the jq ...

javascripticefaces

What causes a ReferenceError when attempting to retrieve the class name of a React component?

Take a look at my React component located in index.js: import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render() { return ( <div className="App"> <h1>Hello, ...

javascriptreactjsecmascript-6scopelifetime

What is the best approach for writing an asynchronous function while utilizing $rootScope.broadcast within a continuous loop?

At least 10 times a second, I have a function that is called. Each time, there are approximately 100 records with variations in LastSeenTime and ReadCount. In this simulation scenario, I understand the behavior; however, in real-time, the number of records ...

javascriptangularjssignalr

The Chart.js graph fails to appear when placed within an ngIf directive

I have encountered an issue with my simple scatter line chart created using Chart.js within a bootstrap panel. It works perfectly fine until I place it inside an ngIf div. Has anyone faced this problem before? Is there a solution to make the chart display ...

htmlangularjstwitter-bootstrapangularchart.js

What occurs if the user navigates away from the page before the AJAX call has finished?

In my app, I use an asynchronous AJAX call for each page that loads in order to track a user's flow through the application. Usually, the server request to record the visit happens quickly. However, there are instances where I seem to be missing some ...

javascriptajax

Utilize Vue.js to easily upload images alongside form input fields

I have recently started a small project with Vue Js. I am trying to incorporate an upload file option in my contact form. Due to the numerous input text fields, I am using serialize for the form. However, I am facing issues with the append function. How ca ...

javascriptjqueryhtmlvue.jsnuxt.js

What exactly happens behind the scenes when utilizing the React hook useEffect()? Is an effect set up with useEffect able to halt the main thread

According to the documentation for the useEffect() hook in React, it states that: "Effects scheduled with useEffect don’t prevent the browser from updating the screen." Insight Unlike componentDidMount or componentDidUpdate, effects set with ...

javascriptreactjsreact-hooksuse-effect

Ways to implement CSS in my JQuery Plugin

In the process of creating a unique JQuery component plugin that relies on some essential default CSS for its layout, I am faced with a dilemma. Should I: Create a separate .css file and load it dynamically within my plugin code (How would this be accomp ...

jquerycssjquery-plugins

Launching a Nuxt.js Cloud Function

Is there a possibility to deploy a cloud function that allows for server-side rendering with Nuxt on Firebase? The issue lies in the fact that the Node version used on Firebase is 6.11.1 while the minimum required Node version for Nuxt versions 1 and above ...

javascriptfirebasevue.jsvuejs2nuxt.js

javascript the debate between inline and traditional registration

Hey there, I'm a JavaScript beginner and currently learning about inline vs. traditional registration. I've managed to get code block 1 (inline) working perfectly fine, but unfortunately, code block 2 (traditional) isn't cooperating. Can som ...

javascriptinlineregistration

Angular Automatically Generated Identifier for Event Detection

By using jQuery, I can easily target an ID that starts with "conditionValue" $(document).on('focus', "[id^=conditionValue]", function (event) { // code }); But how can I achieve the same in Angular when looking for an ID starting with somet ...

javascriptjqueryangularjsangularjs-scope