Image Swap on Drop Down Menu - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Image Swap on Drop Down Menu

Trying to switch out an image once Display changes.

raidriddle

11:12 pm on Jan 25, 2008 (gmt 0)

10+ Year Member

Understanding that dl, dt so on are not usually used for this purpose - I am trying to switch out the "expandgreen.gif" image for a expand red image once a dt has been clicked and the dd shows. This image must persist until a different dt has been clicked and then the first expandgreen image should return and the newly clicked dt should switch out.

Any help would be appreciated. Thanks,

<!--
body {
margin: 0;
padding: 0;
background: #666666;
font: 80% verdana, arial, sans-serif;
text-decoration:none;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type:none;
}

#menu {
position: absolute; /* Menu position that can be changed at will */
top: 60;
left: 0;
}
#menu {
width: 164px;
}
#menu dt{
font-size: 11px;
cursor: pointer;
margin: 2px 0;
height: 20px;
line-height: 20px;
text-align: left;
text-indent: 7px;
font-weight: bold;
border: 1px solid gray;
background-image: url('../images/expandgreen.gif');

}

#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
text-indent: 10px;
font-size: 12px;
background: #ffffff;
}
#menu li a, #menu dt a {
color: #000000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover, #menu a:click {
color: #ff0000;
background: #666666;

}

encyclo

7:19 pm on Jan 28, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome to WebmasterWorld raidriddle. Could you also post a short snippet of the relevant HTML? Unless I misundersand this, I don't believe you can do this with CSS alone, you may need Javascript.

raidriddle

3:32 am on Jan 29, 2008 (gmt 0)

10+ Year Member

Yes some of the code may help - Thanks. Below is exactly what I have - If you want you could copy and paste the code into files as labeled below and you will have exactly what I have.

Thank you.

*********************************File - menu.js

function runonce()
{
show();
showNav();
}

function show(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d)
{
d.style.display='block';
}

}

***************************FILE - index.html

<html>

<head>

<title>test</title>
<script type="text/javascript" src="Menu.js">
//<--

show('');

//-->

</script>

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

</head>

<body SCROLL="NO" bgcolor="#666666">

<img src="images/marinesega2.jpg" height=45" width="164";

<div style="position" absolute; z-index: 20">
<dl id="menu">

<dt onclick="javascript:show();"><a href="ide_info.html" target="content">CAST IDE Home</a></dt>

<dt onclick="javascript:show('smenu5');">Web Services</dt>
<dd id="smenu5">
<ul>
<li><a href="" target="content">Help Desk Request</a></li>
<li><a href="" target="content">Content Request</a></li>
<li><a href="" target="content">IDE Users Guide</a></li>
</ul>
</dd>

</dl>
</div>

<div style="position: absolute; left: 10; bottom: 10; z-index: 1;">
<a href="" target="content"><img src="" border="0" height="65" width="65"></a>
<a href=""><img src="" border="0" height="70" width="70"></a>
</div>

<script type="text/javascript">
runonce();
</script>

</body>
</html>

***************************Vertical MenuLayout

CSS exactly as pasted in the original Post.