Log in

View Full Version : help with dynamic menu


kimberlyhello
06-25-2008, 01:21 AM
Hi Everyone,

I'm hoping someone can help me with this problem. What I am trying to do is have 2 different images appear before and after the text that appears via a javascript function.

Here is my code:




<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#mail
{
display: block;
float: left;
display: inline;
width: 50px;
height: 50px;
background: url("../images/menu/blackrolloverbutton.gif") no-repeat 0 0;

}

#mail:hover
{
background-position: 0 -50px;
}

#mail span
{
display: none;

}

#blog
{
display: block;
float: left;
display: inline;
width: 50px;
height: 50px;
background: url("../images/menu/bluerolloverbutton.gif") no-repeat 0 0;

}

#blog:hover
{
background-position: 0 -50px;
}

#blog span
{
display: none;

}

#tabledescription{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #990033;
text-decoration: underline;

}


</style>
<script type="text/javascript">

var baseopacity=0

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
</head>

<body>


<table width="252" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="252" height="55" valign="top">
<a href="http://www.a.com" id="mail" onMouseover="showtext('JavaScript tutorials and scripts!')" onMouseout="hidetext()"></a>
<a href="http://www.b.com" id="blog" onMouseover="showtext('300+ free JavaScripts')" onMouseout="hidetext()"></a>
<a href="http://www.c.com" id="mail" onMouseover="showtext('Comprehensive JavaScript Reference')" onMouseout="hidetext()"></a>
<a href="http://www.d.com" id="blog" onMouseover="showtext('Web coding and development forums!')" onMouseout="hidetext()"></a>
<a href="http://www.e" id="mail" onMouseover="showtext('Award winning DHTML and JavaScripts')" onMouseout="hidetext()"></a>
</td>
</tr>
<tr>
<td height="19" align="center" valign="top"><div id="tabledescription">Click buttons above!</div></td>
</tr>
</table>
</body>
</html>




So basically I have 5 buttons and when the mouse hovers over a button, text appears below the button.

For example, when someone hovers over the first button, the following text appears:
JavaScript tutorials and scripts!

I just want to have a little icon before and after the above text.

I've been trying to figure this out for hours! I've tried using the css before and after psuedo styles and also the icon style.

Nothing works.

Please help.

Thanks.
Nile
06-25-2008, 03:36 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.
jscheuer1
06-25-2008, 01:19 PM
I'm not wild about your coding, but if it works for you that's fine with me for the time being. Given that, if the icon(s) you want to show will be the same regardless of the text displayed:


function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML='<img src="icon.gif"> ' + thetext + ' <img src="icon.gif">';
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

The src attributes for the image tags in the above may be whatever you like.

Now, if the images you will be using will vary depending upon the text displayed, you can probably just use your function as is, but do this in the markup area where it is called:


<a href="http://www.a.com" id="mail"
onmouseover="showtext('<img src=\'icon.gif\'> JavaScript tutorials and scripts! <img src=\'icon.gif\'>')"
onmouseout="hidetext()"></a>

Once again, the src attributes for the image tags may be whatever you like.
kimberlyhello
06-28-2008, 07:05 AM
Thanks John.

I will try your solution and see if it works.
kimberlyhello
07-06-2008, 11:02 PM
So I tried the above solution and it works great in Firefox! so thank you so much.

However, it does not work in internet explorer. I don't know why it is not working. The text does not show up when you hover over the buttons. This has nothing to do with adding the icons on each side of the text...because it didn't work before I added the icons.

Does anyone know?
jscheuer1
07-07-2008, 09:31 AM
This syntax isn't correct:


textcontainerobj.filters.alpha.opacity=degree

Even if it were, there is no filter on the textcontainerobj.

It gets worse though because if you use the right syntax and have the alpha filter already on the textcontainerobj it will look bad in IE 7. IE 7 doesn't do filters on text very well.

With that said, here's a version that works:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#mail
{
display: block;
float: left;
display: inline;
width: 50px;
height: 50px;
background: url("../images/menu/blackrolloverbutton.gif") no-repeat 0 0;

}

#mail:hover
{
background-position: 0 -50px;
}

#mail span
{
display: none;

}

#blog
{
display: block;
float: left;
display: inline;
width: 50px;
height: 50px;
background: url("../images/menu/bluerolloverbutton.gif") no-repeat 0 0;

}

#blog:hover
{
background-position: 0 -50px;
}

#blog span
{
display: none;

}

#tabledescription{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #990033;
text-decoration: underline;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
zoom:100%;
}


</style>
<script type="text/javascript">

var baseopacity=0

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters[0].opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters[0].opacity<100)
cur2.filters[0].opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
</head>

<body>


<table width="252" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="252" height="55" valign="top">
<a href="http://www.a.com" id="mail" onMouseover="showtext('JavaScript tutorials and scripts!')" onMouseout="hidetext()"></a>
<a href="http://www.b.com" id="blog" onMouseover="showtext('300+ free JavaScripts')" onMouseout="hidetext()"></a>
<a href="http://www.c.com" id="mail" onMouseover="showtext('Comprehensive JavaScript Reference')" onMouseout="hidetext()"></a>
<a href="http://www.d.com" id="blog" onMouseover="showtext('Web coding and development forums!')" onMouseout="hidetext()"></a>
<a href="http://www.e" id="mail" onMouseover="showtext('Award winning DHTML and JavaScripts')" onMouseout="hidetext()"></a>
</td>
</tr>
<tr>
<td height="19" align="center" valign="top"><div id="tabledescription">Click buttons above!</div></td>
</tr>
</table>
</body>
</html>

What I would suggest though is, instead of fading the text in and out, place an image or a division with a solid background over the text and fade it out and in.