Mouseover

[Mirko]

Hi,

kann mit jemand sagen wie ich erreiche das beim überfahren einer tabele eine andere bgfarbe und borderfarbe erscheint.

Die Table soll einen link enthalten, also es soll ein Menü werde

 

[Shamane]

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<tr onmouseover="lineover(<?echo"$id";?>)" onmouseout="lineout(<?echo"$id";?>)" id="<?echo"$id";?>">

<td align="center"><a href="?jump=visitgate&id=<?echo"$id";?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image<?echo"$id";?>','','<?echo"$grafikpfad";?>icons/visit_over.gif',1)"><img src="<?echo"$grafikpfad";?>icons/visit.gif" name="image<?echo"$id";?>" width="59" height="17" border="0"></a></td>

</tr>

 

[derMIKA]

@Shamane,

ist das nicht vielleicht ein bissl kompliziert?

HTML-Code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Startseite</a></li>
<li><a href="#">Seite2</a></li>
<li><a href="#">Seite3</a></li>
<li><a href="#">Seite4</a></li>
<li><a href="#">Seite5</a></li>
</ul>
</div>

CSS-Definitionen

#navlist li {
display: inline;
}

#navlist {
width: 7em;
font-family: sans-serif;
margin: 0 0 0 3em;
padding: 0;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}

#navlist a {
width: 99.99%;
display: block;
background-color: #fff;
border-bottom: 1px #000 solid;
text-align: center;
text-decoration: none;
color: #000;
}

#navlist a:hover { background-color: orange; }
#navlist a:visited { color: #000; }

Fertig ist eine einfache Navigation

Gruß Mika

 

[Force]

vielen Dank für diesen wirklich herrlichen praktischen Vergleich zwischen Javascript und CSS :]