Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
6 different pics for css Li menu 2
- Thread starter Yogi39
- Start date
Yeah, CSS would be good. You can find numerous examples by searching for "css rollovers" or "css menus" on google. For example, here's a good link:
And this link even uses a list for the menu, which is a good way to do it. This link however has text on each menu button, so you'll need to make some modifications if your text is part of the image. For example, you'd need to set the size of the link to be the size of your image. If you need help on this, get started using the above link and come back with any more questions you have.
And this link even uses a list for the menu, which is a good way to do it. This link however has text on each menu button, so you'll need to make some modifications if your text is part of the image. For example, you'd need to set the size of the link to be the size of your image. If you need help on this, get started using the above link and come back with any more questions you have.
-
1
- #3
BillyRayPreachersSon
Programmer
he following will work in compliant browsers, like Netscape and Mozilla.
However, IE lacks the basic ability to use the HOVER selector on any elements other than A tags
(Here's the code anyway:
Code:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#listItem1 { list-style-image: url(listitem1image.gif); }
#listItem2 { list-style-image: url(listitem2image.gif); }
#listItem3 { list-style-image: url(listitem3image.gif); }
#listItem4 { list-style-image: url(listitem4image.gif); }
#listItem5 { list-style-image: url(listitem5image.gif); }
#listItem6 { list-style-image: url(listitem6image.gif); }
#listItem1:hover { list-style-image: url(listitem1hoverimage.gif); }
#listItem2:hover { list-style-image: url(listitem2hoverimage.gif); }
#listItem3:hover { list-style-image: url(listitem3hoverimage.gif); }
#listItem4:hover { list-style-image: url(listitem4hoverimage.gif); }
#listItem5:hover { list-style-image: url(listitem5hoverimage.gif); }
#listItem6:hover { list-style-image: url(listitem6hoverimage.gif); }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI ID="listItem1">Item 1</LI>
<LI ID="listItem2">Item 2</LI>
<LI ID="listItem3">Item 3</LI>
<LI ID="listItem4">Item 4</LI>
<LI ID="listItem5">Item 5</LI>
<LI ID="listItem6">Item 6</LI>
</UL>
</BODY>
</HTML>Hope this helps!
Dan
BillyRayPreachersSon
Programmer
And the following works fine in IE:
Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function mouseOver(element)
{
switch (element.id)
{
case 'listItem1': element.style.listStyleImage = 'url(listitem1hoverimage.gif)'; break;
case 'listItem2': element.style.listStyleImage = 'url(listitem2hoverimage.gif)'; break;
case 'listItem3': element.style.listStyleImage = 'url(listitem3hoverimage.gif)'; break;
case 'listItem4': element.style.listStyleImage = 'url(listitem4hoverimage.gif)'; break;
case 'listItem5': element.style.listStyleImage = 'url(listitem5hoverimage.gif)'; break;
case 'listItem6': element.style.listStyleImage = 'url(listitem6hoverimage.gif)'; break;
}
}
function mouseOut(element)
{
switch (element.id)
{
case 'listItem1': element.style.listStyleImage = 'url(listitem1image.gif)'; break;
case 'listItem2': element.style.listStyleImage = 'url(listitem2image.gif)'; break;
case 'listItem3': element.style.listStyleImage = 'url(listitem3image.gif)'; break;
case 'listItem4': element.style.listStyleImage = 'url(listitem4image.gif)'; break;
case 'listItem5': element.style.listStyleImage = 'url(listitem5image.gif)'; break;
case 'listItem6': element.style.listStyleImage = 'url(listitem6image.gif)'; break;
}
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
#listItem1 { list-style-image: url(listitem1image.gif); }
#listItem2 { list-style-image: url(listitem2image.gif); }
#listItem3 { list-style-image: url(listitem3image.gif); }
#listItem4 { list-style-image: url(listitem4image.gif); }
#listItem5 { list-style-image: url(listitem5image.gif); }
#listItem6 { list-style-image: url(listitem6image.gif); }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI ID="listItem1" onMouseOver="mouseOver(this);" onMouseOut="mouseOut(this);">Item 1</LI>
<LI ID="listItem2" onMouseOver="mouseOver(this);" onMouseOut="mouseOut(this);">Item 2</LI>
<LI ID="listItem3" onMouseOver="mouseOver(this);" onMouseOut="mouseOut(this);">Item 3</LI>
<LI ID="listItem4" onMouseOver="mouseOver(this);" onMouseOut="mouseOut(this);">Item 4</LI>
<LI ID="listItem5" onMouseOver="mouseOver(this);" onMouseOut="mouseOut(this);">Item 5</LI>
<LI ID="listItem6" onMouseOver="mouseOver(this);" onMouseOut="mouseOut(this);">Item 6</LI>
</UL>
</BODY>
</HTML>But for some reason, not so well in NN, Mozilla, or Opera ;o(
Hope this helps anyway!
Dan
- Thread starter
- #5
Thanks!
best I could do ...any sugestions ?
best I could do ...any sugestions ?
Code:
#navlist {
position: absolute;
left: 36px;
top: 86px;
width: 186px;
}
#navlist ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navlist li {
margin: 0 0 3px 0;
}
#navlist a {
/*/*/display: block;
border: 1px solid #333;
width: 160px;
background-color: ;
/* */padding-left:24px; padding-right:2px; padding-top:2px; padding-bottom:2px
}
#navlist a:link, #navlist a:visited {
color: #000;
/*/*/color: #EEE;
text-decoration: none; /* */
}
#navlist a:hover {
border: 1px solid #333;
background-color: ;
color: #333
}
#uberlink a:link, #uberlink a:visited, #uberlink a:hover {
/*/*/border: 1px solid #333;
background-color: ;
color: #333
}
.1{
background-image: url('images/men1.gif')
}
.2{
background-image: url('images/men2.gif')
}
.3{
background-image: url('images/men3.gif')
}
.4{
background-image: url('images/men4.gif')
}
.5{
background-image: url('images/men5.gif')
}
.6{
background-image: url('images/men6.gif')
}
<div id="navlist" style="width: 159; height: 150">
<ul>
<li id="uberlink" class= "1"><a href="#">Home</a></li>
<li class= "2"><a href="#">Page One</a></li>
<li class= "3"><a href="#">Page Two</a></li>
<li class= "4"><a href="#">Page Three</a></li>
<li class= "5"><a href="#">Page Four</a></li>
<li class= "6"><a href="#">Page Five</a></li>
</ul></div>- Thread starter
- #6
-
1
- #7
At this point I need to ask myself why on earth do you need a list for this. This is how I would do it (you can easily apply any further rollovers though):
Tested and aced in IE6, Mozilla 1.5 and Opera 7.22. Mozilla gave me some trouble this time and then I noticed you initially had classes named 1,2,3,4,5,6 which is illegal. Changed to n1,n2,n3,n4,n5,n6 and it worked fine. Hope it helps.
Code:
<style>
<style>
.navlink {
display: block;
width: 100px;
padding-left: 25px; /* as much as you need so it does not overlap the picture */
text-decoration: none;
border: 1px dashed #333333;
margin-top: 2px;
}
a.n1:link, a.n1:visited { background: url('images/men1.gif') no-repeat; }
a.n2:link, a.n2:visited { background: url('images/men2.gif') no-repeat; }
a.n3:link, a.n3:visited { background: url('images/men3.gif') no-repeat; }
a.n4:link, a.n4:visited { background: url('images/men4.gif') no-repeat; }
a.n5:link, a.n5:visited { background: url('images/men5.gif') no-repeat; }
a.n6:link, a.n6:visited { background: url('images/men6.gif') no-repeat; }
a.n1:hover { background: url('images/men1hover.gif') no-repeat; }
a.n2:hover { background: url('images/men2over.gif') no-repeat; }
a.n3:hover { background: url('images/men3over.gif') no-repeat; }
a.n4:hover { background: url('images/men4over.gif') no-repeat; }
a.n5:hover { background: url('images/men5over.gif') no-repeat; }
a.n6:hover { background: url('images/men6over.gif') no-repeat; }
</style>
<a href="#" class="navlink n1">1st choice</a>
<a href="#" class="navlink n2">2nd choice</a>
<a href="#" class="navlink n3">3rd choice</a>
<a href="#" class="navlink n4">4th choice</a>
<a href="#" class="navlink n5">5th choice</a>
<a href="#" class="navlink n6">6th choice</a>- Status