473,586 Members | 2,754 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Image mouse-over with dropdown menu

1 New Member
I am trying to find if there is a way, using CSS/HTML, to code a simple single drop-down menu that is activated when you mouse-over an image. For example, in windows, you can right mouse click an icon on the desktop and get a drop down menu to appear. I would like to do the same thing on a website except without having to mouse click, so when you mouse over an image, the menu drops down.
Jul 23 '07 #1
3 5854
7,435 Recognized Expert Expert
There are some interesting css3 things that I've only touched on and am experimenting with when I find time. One uses :target to highlight another element and make other elements appear or not when hovering over another. I don't think it can make a drop down list appear but I haven't tried it either.

The downside to that is it only works in modern browsers and not IE. So the only alternative would be javascript.
Jul 23 '07 #2
11 New Member
Try the menu examples and tutorials at alistapart
Jul 24 '07 #3
58 New Member
I thought this looked interesting, so I tried to code something up quickly.

Here's what I got:

Test Image-Over Menu

If you open this in Firefox (the javascript is slightly different to work properly in IE6), you will see a picture of a guitar. If you mouse over the image, a menu will pop up - similar to the action of right clicking in windows...

The trick to this is something I picked up while learning about the Navigation Matrix approach to menu styling. We can essentially make an image act as a link by hiding the actual anchor <a> below it. This is done by making the height of the anchor 0, setting the anchor's background to a certain image, and then adjusting the anchor's upper padding.

Expand|Select|Wrap|Line Numbers
  1. a { 
  2. height: 0px;
  3. background-image: xx; 
  4. background-repeat:no-repeat;
  5. width: xx (where xx is width of picture);
  6. padding-top: xx (where xx is height of picture);
  7. overflow: hidden;
This will make the actual link invisible to the user, but will have created a box that acts as a link around the image.

From there, I used a short script to hide/show the menu when moused over.

Feel free to check out the code:



Although I have since modified the script, thanks to Raphaël GOETTER
at alsacreations.c om for the basic model...

Hope this helps, let me know if you have questions

Jul 24 '07 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Wonko | last post by:
Here's my problem if anyone could be so kind to help me out. I assume it's quite easy for an experienced programmer but I'm not one of them :) I have a JavaScript code that: - displays multiple images (+40) in a single image placeholder on ONE page - pre-loads multiple images - on a click of a mouse changes to the next image - on a click...
by: Csaba2000 | last post by:
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse doesn't matter, but in the case of an input image element, what happens is the submitted url has something like...
by: Roger Shrubber | last post by:
I have a page with images that the user can drag from one frame to another. I need them to see a "ghost image" of the image they are dragging, while the original stays put. I use the onmousemove event to keep the ghost image under the mouse pointer. There are three problems: (1) if the ghost image is dragged so it is partially off the...
by: Tony Gahlinger | last post by:
I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7) to do some client-side image processing. I want to capture the sequence of coordinates a user clicks on in xxx.jpg in the following html <a href="#"><IMG SRC="xxx.jpg" ISMAP></a> and save these to a file for later handling. The coordinates appear on the bottom left...
by: Jay | last post by:
Hi, How can I capture mouse position on Image? I found number of script capturing mouse position of the page. But I could not find anything based on image. What I want to find out is X Y coordinates of mouse position. based on left of the top of my image is 0 0 (X Y coordinates) otherwise, I need to find out position of my image so I...
by: Dustin Carroll | last post by:
Hello, I am trying to capture a right mouse button click on an image. So far I am getting the left click with <body onload="document.getElementById('image').onclick=eventclick;"> <image align=center image border=2 img src="data.jpg" id="image"> How can I detect the right mouse click on this image?
by: Daniel N | last post by:
Is it possible to determine if the image under a mouse changes in VB.net code? For example if I position the mouse using the command; Windows.Forms.Cursor.Position = New System.Drawing.Point(680, 595) Is there code that would help me determine if the image under it has changed?
by: peter.chase | last post by:
In my Web application, a have an image within a DIV. One of the allowed user gestures is to drag the image with the mouse. When dragging, parts of the image that would otherwise be displayed outside the DIV should be clipped. I had no trouble at all achieving this on FireFox and Safari. But I can't get Internet Explorer to do the clipping;...
by: David | last post by:
On Sun, May 4, 2008 at 5:28 PM, Valerio Valerio <vdv100@gmail.comwrote: I assume what you want to do is allow the user to drag the mouse across your desktop, and your program, running in the background, picks this up? As opposed to the user making a rectangular selection entirely within your app. I think the simplest way to do this is to...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.