Member Avatar for Hira khan

how can i put this text on image so that this dropdown one and dropdown two appears on image and so on its drop down menu?:S

here is the code starts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Dropdown Menu Demo</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>

<title>New Page 1</title>
</head>

<body>
<img border="0" src="../../All%20Users/Documents/My%20Pictures/Sample%20Pictures/Blue%20hills.jpg" width="272" height="166">

<dl class="dropdown">


  <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">
    Dropdown One</dt>
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
    <ul>
      <li><a href="#" class="underline">Navigation Item 1</a></li>
      <li><a href="#" class="underline">Navigation Item 2</a></li>
      <li><a href="#" class="underline">Navigation Item 3</a></li>
      <li><a href="#" class="underline">Navigation Item 4</a></li>
      <li><a href="#">Navigation Item 5</a></li>
    </ul>
  </dd>
</dl>

<dl class="dropdown">
  <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">
    Dropdown Two</dt>
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
    <ul>
      <li><a href="#" class="underline">Navigation Item 1</a></li>
      <li><a href="#" class="underline">Navigation Item 2</a></li>
      <li><a href="#" class="underline">Navigation Item 3</a></li>
      <li><a href="#" class="underline">Navigation Item 4</a></li>
      <li><a href="#">Navigation Item 5</a></li>
    </ul>
  </dd>
</dl>

<div style="clear:both" /><p>
</body>

end
plz help

Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 2 Replies
  • 118 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by suzzena

Dani AI

Generated

Short answer: wrap the image and the dropdown markup in a positioned container, then place the menu on top with absolute positioning. As suggested, using a CSS background for a decorative image is the simplest approach; if the image carries content or needs alt text, keep an <img> and absolutely position the menu element over it. 's point about searching is fair, but here are concrete, practical steps you can apply right away.

A minimal CSS layout (put this on a containing element that holds the image and the menu):

.container {
  position: relative;
  width: 272px;
  height: 166px;
  background-image: url('Blue_hills.jpg');
  background-size: cover;
  background-position: center;
}

.menu {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
}

.menu dd {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255,255,255,0.95); /* keeps text readable */
}

Make the menu keyboard-friendly and accessible: use real interactive controls (buttons or anchors), toggle aria-expanded when opening the dropdown, and support :focus as well as :hover. Ensure contrast between text and the image—use a semi-transparent background for the dropdown or a darker overlay across the image. For responsiveness, use background-size: cover and percentage-based positioning so overlays scale on small screens.

Troubleshooting: if the menu is hidden behind the image, check z-index and stacking contexts; ensure the container is position: relative; avoid brittle onmouseover/onmouseout logic (it can flicker)—prefer mouseenter/mouseleave or click toggles with focus handling. For reference on the CSS properties used, see MDN’s pages on background-image and position.

Recommended Answers

All 2 Replies

Member Avatar for suzzena

try in google u will better options and techniques to do this.

commented: Not helpful. -2
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.