Dropdownmenü mit Bildern

[hellermann]

Guten Abend,
ich habe vor mein derzeitiges Dorbdownmenü zu überarbeiten:
Und zwar wenn ich auf den Button gehe dann geht ganz normale "Schrift" nach unten, allerdings möchte ich Bilder.
Hier sieht man es -> Klick <-
Es kann auch ohne Bilder sein nur ich möchte jedem "Unterbutton" eine andere Farbe zuweisen können.

Mein derzeitiger Code (ich hoffe ich habe nichts vergessen herauszukopieren damit Ihr alles habt)

 <script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#dropmenudiv{
background-color:#efefef;
position:absolute;
border:1px solid white;
font:normal 12px Arial; color:#000;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
background-color:#000000;
width: 100%;
display: block;
text-indent: 3px;
}

a:link { color: ffffff; text-decoration:none; }
a:visited { color: ffffff; text-decoration:none; }
a:active { color: ffffff; text-decoration:none; }
a:hover { color: f6ff00; font-weight:bold; text-decoration:none; }



body,td,th {
	color: #ffffff;
}
body {
	background-color: #272727;
}
.Stil1 {color: #FFFFFF}
body,td,th {
	color: #FFFFFF;
	font-weight: bold;
}
-->
</style>
<script type="text/javascript">

function init() {
  if (!document.getElementById) return
  var imgOriginSrc;
  var imgTemp = new Array();
  var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) {
    if (imgarr[i].getAttribute('hsrc')) {
        imgTemp[i] = new Image();
        imgTemp[i].src = imgarr[i].getAttribute('hsrc');
        imgarr[i].onmouseover = function() {
            imgOriginSrc = this.getAttribute('src');
            this.setAttribute('src',this.getAttribute('hsrc'))
        }
        imgarr[i].onmouseout = function() {
            this.setAttribute('src',imgOriginSrc)
        }
    }
  }
}
onload=init;

</script>

<script type="text/javascript">

//Contents for menu 1                           //KANN MANN VERÄNDERN ODER ERWEITERN
var menu1=new Array()
menu1[0]='[url="http://web1.paris149.server4you.de/home/index.php?site=home"]Home[/url]'
menu1[1]='[url="http://web1.paris149.server4you.de/home/index.php?site=news"]News[/url]'
menu1[2]='[url="http://web1.paris149.server4you.de/home/index.php?site=news&action=archive"]News Archiv[/url]'
menu1[3]='[url="http://web1.paris149.server4you.de/home/index.php?site=contact"]Contact[/url]'
menu1[4]='[url="http://web1.paris149.server4you.de/home/index.php?site=impressum"]Impressum[/url]'

//Contents for menu 2                           //KANN MANN VERÄNDERN ODER ERWEITERN
var menu2=new Array()
menu2[0]='[url="http://web1.paris149.server4you.de/home/index.php?site=members"]Member[/url]'
menu2[1]='[url="http://web1.paris149.server4you.de/home/index.php?site=regeln_"]Regeln[/url]'
menu2[2]='[url="http://web1.paris149.server4you.de/home/index.php?site=join_us"]Join Us[/url]'
menu2[3]='[url="http://web1.paris149.server4you.de/home/index.php?site=history"]History[/url]'
menu2[4]='[url="http://web1.paris149.server4you.de/home/index.php?site=login_"]Login[/url]'

//Contents for menu 3                           //KANN MANN VERÄNDERN ODER ERWEITERN
var menu3=new Array()
menu3[0]='[url="http://web1.paris149.server4you.de/home/index.php?site=registered_users"]User[/url]'
menu3[1]='[url="http://web1.paris149.server4you.de/home/index.php?site=files"]Downloads[/url]'
menu3[2]='[url="http://web1.paris149.server4you.de/home/index.php?site=forum"]Forum[/url]'
menu3[3]='[url="http://web1.paris149.server4you.de/home/index.php?site=guestbook"]Gästebuch[/url]'
menu3[4]='[url="http://web1.paris149.server4you.de/home/index.php?site=sponsors"]Links[/url]'

//Contents for menu 4                           //KANN MANN VERÄNDERN ODER ERWEITERN
var menu4=new Array()
menu4[0]='[url="http://web1.paris149.server4you.de/home/index.php?site=server"]Server[/url]'
menu4[1]='[url="http://web1.paris149.server4you.de/home/index.php?site=css-viewer"]CS:S Viewer[/url]'
menu4[2]='[url="http://web1.paris149.server4you.de/home/index.php?site=ts-viewer"]Teamspeak2 Viewer[/url]'
menu4[3]='[url="http://web1.paris149.server4you.de/hlstats/web/hlstats.php"]HlStatsX[/url]'
menu4[4]='[url="http://web1.paris149.server4you.de/home/index.php?site=rootserver"]Rootserver[/url]'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

In den Body schreibe ich:

             <td width="70" height="34" align="left" valign="top">[img]images/protex_05.jpg[/img]</td>
            <td width="124" height="34" align="left" valign="top">[img]images/protex_06.jpg[/img]</td>
            <td width="126" height="24" align="left" valign="top">[img]images/protex_07.jpg[/img]</td>
            <td width="126" height="24" align="left" valign="top">[img]images/protex_08.jpg[/img]</td>
            <td width="123" height="24" align="left" valign="top">[img]images/protex_09.jpg[/img]</td>
            <td width="66" height="34" align="left" valign="top">[img]images/protex_10.jpg[/img]</td>
            <td width="118" height="34" align="center" valign="middle" background="images/protex_11.jpg"> <div align="center">

zu finen auf -> Klick <-

Wie gesagt ich hoffe Ihr könnt mir helfen jedem "Unterbutton" ne eigene Farbe zuzuweisen.
Es kann auch ein ganz anderes JavaScript sein.


Ich danke euch schonmal für eure Hilfe
Mit freundlichen Grüßen
hellermann

 

[Wildcard]

Java und JavaScript sind grundverschiedene Dinge von unterschiedlichen Herstellern.
Du bist im falschen Forum.

 

[Beni]

*veschoben*