Display a dropdown menu upon hovering over an image

I'm experimenting with creating a dropdown menu that appears when someone hovers their mouse over an image.

    <div>
        <img id="whoimg" onmouseover="forImg(this)" src="/static/images/whoisitfor.png" height="70" style="cursor:pointer;">
    </div>

    <div style="position: absolute; right:30px; top: 23px;">
        <span style="font-weight: bold;font-size:30px; color: #C4066B;">FOR</span>
    </div>

</div>

I've managed to create the onmouseover function, but since I'm new to web development, I'm not sure what steps to take next. There are three images placed horizontally, including the one above.

function forImg()
{
alert("FOR");
}

I've tried using JavaScript, but I haven't made any progress. I'm stuck and don't know what to do. Can someone please help me?

javascriptjqueryhtmlcssweb-applications

Answer №1

If you're looking to display a dropdown menu when hovering over an image, here's what you can do:

Consider this as your menu structure: 

 <div id="nav_menu">
            <ul>
                <li id="l1">AAAAA</li>
                <li>BBBBB</li>
                <li>CCCCC</li>
                <li>DDDDD</li>
            </ul>
   </div>

Attach an event to your image like so :

$('#whoimg').mouseover( function(){
    $('#nav_menu').slideDown();
});

Check out the Demo Fiddle Here

Answer №2

If you're looking to improve your website's design, I recommend utilizing CSS. There are numerous online tutorials to guide you through the process, or for a quicker solution, you can check out websites like this one:

Answer №3

Witness the magic in action...I guarantee it will be of great help to you...and remember to give it a thumbs up.

Wishing you the best of luck!

<!DOCTYPE html>
<html>
<head>
<script>
function enlargeImg(x)
{
x.style.height="64px";
x.style.width="64px";
}

function shrinkImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>

<img onmouseover="enlargeImg(this)" onmouseout="shrinkImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function enlargeImg() is activated when the user hovers over the image with the mouse.</p>
<p>The function shrinkImg() is activated when the mouse moves away from the image.</p>

</body>
</html>

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

Transition effects are in full effect when the modal is being opened, however, they seem to be malfunctioning

Check out my sandbox here where I have demonstrated an issue. There is a button that triggers a modal to open on click. The problem is that the modal fades in slowly over 0.7 seconds, but when I try to close it by clicking the close button, it instantly di ...

javascripthtmlcss

Prevent the ReactJS submit button from being activated if the text area contains any missp

I've been working with ReactJS and recently designed a form. One of the requirements is to disable the send button if the text area in the form contains spelling errors. I attempted using a spell check feature, however, it only underlines the errors ...

htmlreactjsspell-checking

Explore the possibilities of combining rotation and translation in three.js for dynamic visual

I am currently working with Three.js, utilizing existing object methods to create animations without shaders. However, I have a simple question: is it possible to combine multiple animations on a shape? For example, rotating and translating a sphere. When ...

javascriptthree.js

Toggle the class of a div when clicked and then change the class of another div

In my website, I have a site overlay Div (#site-overlay) that is currently set as display:none. I am looking to change the class to block when I hover and click on the menu buttons. I can use both vanilla JavaScript and jQuery to achieve this. The menu it ...

javascriptjquery

Can we consider JavaScript callbacks to be atomic?

Ensuring synchronization of fields in two independent third-party databases hosted in different locations is crucial to me. Below is a snippet of my generic node / express js code: router.post ('url', function(req,res,next) { third_party_ap ...

javascriptnode.jsexpress

Steps for Filling a List Box (combo box) with Data from a Multi-Dimensional Array

As a student learning JavaScript, I have an assignment due tonight and am facing challenges with populating a List Box (combo box) from a Multi-Dimensional Array. After working on the code multiple times, I managed to create a multi-dimensional array that ...

javascriptarrays

How can you utilize z-index to arrange the stacking order of two divs that belong to different files or components in Angular/

Currently, I am working on Angular and facing an issue with two separate html files belonging to different components. I am using the selector to call code from the first html file, which contains a dropdown menu. However, the dropdown menu gets overlapped ...

javascripthtmlcssangular

What steps can I take to make sure that a sub component's props are refreshed properly?

I'm encountering an issue with RTK queries in my project. I have a parent component that contains a table component. When a refresh event occurs, such as deleting data, the parent component receives updated data and passes it down to the child compone ...

javascriptreactjsreact-reduxrtk-query

Ways to switch text on and off smoothly using transitions

I have created a webpage where text starts off hidden but has a visible heading. When you click on the heading, the text is revealed below. I am putting the final touches and aiming to make the text slide in smoothly. I am using Javascript for toggling ins ...

javascripthtmlcss

Performing an AJAX GET request to the API after a set time interval

The API is constantly updating with live values, so I am attempting to fetch the data every second and display it on the webpage. Although I used a GET request call every N seconds using set_interval(), the values only load once and do not update with eac ...

javascriptphpjqueryajaxapi

Codeception is unable to interact with an element that it recently encountered

Greetings to the wonderful users of Stackoverflow, Currently, I am in the process of creating acceptance tests using Codeception with Selenium as the WebDriver module. I have encountered an issue while trying to verify the existence and functionality of o ...

htmlseleniumcodeceptionacceptance-testing

Delete the content within the tag within 5 seconds

Once the data is retrieved and displayed in a tag, I want to clear this tag after 5 seconds. I attempted: $('#ajax_message').html(data).delay(5000).html(""); However, this approach didn't work. Any suggestions on how I can achieve this? ...

javascriptjquerydelay

In a JavaScript project, encountering an error when using FB.logout that states "The expression is undefined and not a function."

Seeking to integrate Login with FB into my react website. FB.init({ appId : app_id, cookie : true, xfbml : true, version : 'v5.0' }); Followed by FB.getLoginStatus(({status}) => { if (status === 'conn ...

javascriptreactjsfacebook-login

Switch the cursor to a loading symbol prior to submitting an Ajax request

I am encountering an issue with my JavaScript function that is triggered by a button click: function calculate(resource) { document.getElementById('loading-label').innerHTML = 'Calculating...'; $.ajax({ url: resource, ...

javascripthtmlajax

Visual Studio Error TS2705: In order for an async function or method in ES5/ES3 to work properly, it must have access to the 'Promise' constructor

Despite researching various posts, I still cannot resolve this error even after trying different solutions. Currently, I am working on a react application within VS 2017. The piece of code below is triggering the error for me. Additionally, I have includ ...

javascriptreactjstypescriptvisual-studio

Using Javascript, verify if a given URL is legitimate and commences with "http://" or "https://"

I need to validate the authenticity of my URLs, ensuring they begin with either http:// or https://. Here is the regular expression (RegExp) I have been using: private testIfValidURL(str) { const pattern = new RegExp('^(https?:\\/&bsol ...

javascriptregex

Ways to extract a value from an object with no properties using jQuery

In order to perform statistical calculations like Averages (Mean, Median, Mode) on data extracted from Datatables, I need the automatic calculation to remain accurate even when the table is filtered. While I have managed to obtain the desired values, extra ...

javascriptjqueryajaxdatatables

Using jQuery, send a post request to a page and then parse and handle

Recently, I attempted to make use of jQuery to post to a form and analyze the outcomes on the posted page. To demonstrate this process, I have put together a very basic example. $('#submit').click( function () { $.get('post.htm& ...

jquery

I'm encountering some issues with jQuery AJAX not functioning properly within my PHP MVC framework

I have developed a custom PHP MVC framework for my web application. However, I am facing an issue with AJAX requests using jQuery. Below are the relevant code snippets: View <input type="text" name="email" id="email"> <input type="password" name ...

phpjqueryajaxmodel-view-controller

Webpack - Make sure to use the correct loader for your specific needs

Whenever I dive back into working with JavaScript, I always find myself struggling with webpack and transpilers. I'm currently stuck and in need of some assistance. Even though I have specified the appropriate loader, webpack is still unable to find i ...

javascriptreactjswebpackbabel-loader