HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - images/button auf die links?!

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

images/button auf die links?!

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   JavaScript
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
Bilox
Forumsteilnehmer


Anmeldungsdatum: 13.01.2007
Beiträge: 6

BeitragVerfasst am: 22.01.2007 18:33:14    Titel: images/button auf die links?! Antworten mit Zitat

hi...

wie bekomme ich in dem menü images(button) auf die einzelnen links..?

Code:

<html>
<head>
<title>Cascade Menu</title>

<style type="text/css">
<!--
.menu
{
   background-color: #ffcc11;
   border: 1px solid #008;
   font-family: Verdana;
   position: absolute;
   font-weight: bold;
   padding-top: 3px;
   font-size: 10px;
   cursor: pointer;
   width: 150px;
   color: #0;
}

.item_panel
{
   border-left: 1px solid #008;
   border-right: 1px solid #008;
   clip: rect(0, 150, 0, 0);
   position: absolute;
   width: 150px;
}

.item_panel a
{
   text-decoration: none;
   cursor: pointer;
   color: #000;
}

.item
{
   background-color: #e9f0f8;
   font-family: Verdana;
   font-size: 10px;
   width: 148px;
}
//-->
</style>

<script language="JavaScript" type="text/javascript">
<!--


// Link[nr] = 'position [0 is menu/1 is item] | Link name | url | target (blank|top|frame_name)'
var Link = new Array();

Link[0]  = '0|Gesch&auml;ftsstelle';
Link[1]  = '1|&Uuml;ber uns|http://|';
Link[2]  = '1|Veranstaltungen|http://|';
Link[3]  = '1|F&ouml;rderer|http://|';
Link[4]  = '0|Sportarten';
Link[5]  = '1|Aerobic Taebo|http://|';
Link[6]  = '1|Badminton|http://|';
Link[7]  = '1|Behindertensport|http://|'
Link[8]  = '1|Callanetics|http://|';
Link[9]  = '1|Eltern Kind sport|http://|';
Link[10] = '1|Fitness|http://|';
Link[11] = '1|Ger&auml;tturnen|http://|';
Link[12] = '1|Gesundheitssport|http://|';
Link[13] = '1|Fu&szlig;ball|http://|';
Link[14] = '1|Orienttanz|http://|';
Link[15] = '1|Laufen|http://|';
Link[16] = '1|Nippon Kempon|http://|';
Link[17] = '1|Seniorengymnastik|http://|';
Link[18] = '1|Sportakrobatik|http://|';
Link[19] = '1|Tanzen|http://|';
Link[20] = '1|Tischtennis|http://|';
Link[21] = '1|Volleyball|http://|';
Link[22] = '1|Vorschulsport|http://|';
Link[23] = '0|Impressum';
 

var height    = 20; // Hoehe der Menuekoepfe
var iheight   = 15; // Hoehe der Menueelemente
var bgc       = '#e9f0f8' // background color of the item
var over_bgc  = '#fff';
var tc        = '#000' // text color of the item
var over_tc   = '#004891';
var speed     = 0;
var timerID   = 0;
var width     = 152;
var N         = (document.all) ? 0 : 1;
var self_menu = new Array();

function write_menu()
{
   smc   = 0;
   mn    = 0;
   mni   = 1;
   start = -1;

   document.write('<div style="position: absolute;">');

   for (var i = 0; i < Link.length; i++)
   {
      la = Link[i].split('|');

      if (la[0] == 0)
      {
         if (start == 0)
         {
            document.write('</div>');

            h = csmc * iheight;
            tmn = mn; // - h;
            self_menu[smc] = new Array(tmn, h, 0, -2);

            smc++;
            mn--;
         }

         csmc = 0;

         document.write('<div id="down' + smc + '" class="menu" '
                      + 'style="top: ' + mn + 'px; height: ' + height + 'px;" '
                      + 'onclick="pull_down(' + smc + ', ' + mni + ');">'
                      + '  ' + la[1] + '</div>');

         self_menu[smc] = new Array(mn, height, 0, mni);

         smc++;
         mni++;
         mn += height;
         start = 1;
      }
      else
      {
         if (start == 1)
         {
            if (N)
               mn += 2;

            document.write('<div id="down' + smc + '" class="item_panel" '
                         + 'style="top: '+ mn + 'px;">');

            start = 0;
         }

         document.write('<a href="' + la[2] + '"'
                      + ((la[3] != '') ? ' target="' + la[3] + '"' : '')
                      + '><div id="d' + i + '" class="item" '
                      + 'style="height: ' + iheight + 'px;'
                      + ((N) ? ' width:150px;' : '')
                      + '" onmouseover="color(this.id);" '
                      + 'onmouseout="uncolor(this.id);">'
                      + ' ' + la[1] + '</div></a>');

         csmc++;
      }
   }

   if (start == 0)
   {
      document.write('</div>');

      h =  csmc * iheight;
      tmn = mn + 5; // - h;
      self_menu[smc] = new Array(tmn, h, 0);
      name = 'down' + (self_menu.length - 1);

      obj = document.getElementById(name);
      obj.style.borderBottomColor = '#008';
      obj.style.borderBottomWidth = '1px';
      obj.style.borderBottomStyle = 'solid';
   }

   document.write('</div>');
}

function color(obj)
{
   document.getElementById(obj).style.backgroundColor = over_bgc;
   document.getElementById(obj).style.color = over_tc;
}

function uncolor(obj)
{
   document.getElementById(obj).style.backgroundColor = bgc;
   document.getElementById(obj).style.color = tc;
}

function pull_down(nr, c)
{
   if (timerID == '')
   {
      to = self_menu[nr + 1][1]
      begin = nr + 2;

      if (timerID != '')
         clearTimeout(timerID);

      if (self_menu[nr + 1][2] == 0)
      {
         self_menu[nr + 1][2] = 1;

         if (nr == (self_menu.length - 2))
            to++;

         epull_down(begin, to, 0);
      }
      else
      {
         to = 0;
         self_menu[nr + 1][2] = 0;
         name = 'down' + (nr + 2);
         open_item = 0;

         for (var i = 0; i < nr; i++)
            if (self_menu[i][2] == 1)
               open_item += self_menu[i][1];

         if (N == false)
            open_item -= (c * 1);

         if (nr == (self_menu.length - 2))
         {
            val = self_menu[self_menu.length - 1][1];
            to = -1;
         }
         else
            val = parseInt(document.getElementById(name).style.top) - (open_item) - (c * height);

         epull_up(begin, to, val);
      }
   }
}

function epull_down(nr, to, nowv)
{
   name = 'down' + (nr - 1);
   obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + (nowv + 1) + ', 0)';

   for (var i = nr; i < self_menu.length; i++)
   {
      name = 'down' + i;
      obj = document.getElementById(name);
      obj.style.top = parseInt(obj.style.top) + 1;
   }

   nowv++;

   if (nowv < to)
      timerID = setTimeout('epull_down(' + nr + ', ' + to + ', ' + nowv + ');', speed);
   else
      timerID = 0;
}

function epull_up(nr, to, nowv)
{
   name = 'down' + (nr - 1);
   obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + nowv + ', 0)';

   for (var i = nr; i < self_menu.length; i++)
   {
      name = 'down' + i;
      obj = document.getElementById(name);
      obj.style.top = parseInt(obj.style.top) - 1;
   }

   nowv--;

   if(nowv > to)
      timerID = setTimeout('epull_up(' + nr + ', ' + to + ', ' + nowv + ');', speed);
   else
      timerID = 0;
}

function startup(nr)
{
   write_menu();

   if (nr != 0)
   {
      for (var i = 0; i < self_menu.length; i++)
      {
         if (self_menu[i][3] == nr)
            pull_down(i, nr);

         i == self_menu.length;
      }
   }
}
//-->
</script>

</head>
<body>

<script language="JavaScript" type="text/javascript">
<!--
startup(1);
//-->
</script>

</body>


cool ist natürlich auch ein mouseovereffekt bei den einzelnen button...
wehre nett wenn mir da jemand schnell mal weiterhelfen kann Smile

danke schonmal vorab
mfg Bilox
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   JavaScript
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.