Hittade ett menyexempel på en sida, men jag undrar om det går att modifiera detta lite? http://w1.510.telia.com/~u51010287/meny.html
1. Går det att få en underline på menyalternativen när man för musen över textraderna?
2. Går det att byta ut textraderna till bilder istället. Lägga bild med onmouseover-funktion på 1:a menyalternativen (avdelning 1, 2 o.s.v)
Funkar det med detta scriptet?
Tänk er menyn på denna sidan,
http://home.swipnet.se/folkesson/priser.htm fast med textbaserade undermenyer med "underline on hover"....en sån meny vill jag ha. :)
Jättetacksam om ni skulle vilja hjälpa mej med detta.
Peter SMedlem sedan dec. 20025 483 inlägg Hej och välkommen till webForum!
Exempel:
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#menu{
font: small verdana;
}
#menu ul{
display: none;
list-style: none;
margin: 0;
padding: 0 0 0 20px;
}
#menu ul li a{
text-decoration: none;
}
#menu ul li a:hover{
text-decoration: underline;
}
</style>
<script type="text/javascript">
var imgArr = [
"mo_r.gif",
"ha_r.gif",
"ny_r.gif",
"pr_r.gif",
"ro_r.gif",
"mo.gif",
"ha.gif",
"ny.gif",
"ro.gif"
], aLen = imgArr.length;
while ( aLen-->0 ) ( new Image() ).src = imgArr[aLen];
function fnShowHide(obj) {
if ( typeof obj.nextSibling == "undefined" || typeof obj.nodeName == "undefined" )
location.href = obj.href;
var elm = null;
while ( (elm = obj.nextSibling).nodeName != "UL" )
obj = obj.nextSibling;
elm.style.display = ( elm.style.display == "block" ) ? "none" : "block";
return false;
}
function fnMouseEffect(obj, img) {
if ( typeof obj.childNodes != "object" ) return;
var elm = null, iLen = obj.childNodes.length;
while ( (elm = obj.childNodes[ --iLen ]).nodeName != "IMG" );
if ( !elm ) return;
elm.src = img;
}
</script>
</head>
<div id="menu">
<a href="avdelning1.html" onmouseover="fnMouseEffect( this, 'mo_r.gif' )" onmouseout="fnMouseEffect( this, 'mo.gif' )" onclick="return fnShowHide( this )"><img src="mo.gif" height="15" width="104" border="0" alt="Avdelning 1"></a><br>
<ul>
<li><a href="">Länk 1</a></li>
<li><a href="">Länk 2</a></li>
<li><a href="">Länk 3</a></li>
</ul>
<a href="avdelning2.html" onmouseover="fnMouseEffect( this, 'ha_r.gif' )" onmouseout="fnMouseEffect( this, 'ha.gif' )" onclick="return fnShowHide( this )"><img src="ha.gif" height="15" width="104" border="0" alt="Avdelning 2"></a><br>
<ul>
<li><a href="">Länk 1</a></li>
<li><a href="">Länk 2</a></li>
<li><a href="">Länk 3</a></li>
</ul>
<a href="avdelning3.html" onmouseover="fnMouseEffect( this, 'ny_r.gif' )" onmouseout="fnMouseEffect( this, 'ny.gif' )" onclick="return fnShowHide( this )"><img src="ny.gif" height="15" width="104" border="0" alt="Avdelning 3"></a><br>
<ul>
<li><a href="">Länk 1</a></li>
<li><a href="">Länk 2</a></li>
<li><a href="">Länk 3</a></li>
</ul>
<a href="avdelning4.html"><img src="pr_r.gif" height="15" width="104" border="0" alt="Avdelning 4"></a><br>
<a href="avdelning5.html" onmouseover="fnMouseEffect( this, 'ro_r.gif' )" onmouseout="fnMouseEffect( this, 'ro.gif' )" onclick="return fnShowHide( this )"><img src="ro.gif" height="15" width="104" border="0" alt="Avdelning 5"></a><br>
<ul>
<li><a href="">Länk 1</a></li>
<li><a href="">Länk 2</a></li>
<li><a href="">Länk 3</a></li>
</ul>
</div>
<div>-------------------------------------------------------</div>
:)
Du är ju helt underbar.... TACK !!! :)
Jag säger också välkommen. Som ny medlem på wF kan jag tipsa om funktionen "acceptera som slutgiltigt svar" som finns bredvid varje svar och gör det lätt för andra att se om frågan har fått en lösning. Och ha en bra dag! ;)
dectgapMedlem sedan sep. 20021 655 inlägg Ett litet tips, dahlgren79:
Det är Peter S' svar som innehåller lösningen och som därför ska markeras som accepterat svar ;)
