ilch Forum » Ilch Clan 1.1 » Design und Templates » Aufleuchtende Menüpunkte

Geschlossen
  1. Di. 16.11.2010 16:31 Uhr #1
    User Pic
    Zekors Mitglied
    Registriert seit
    11.09.2010
    Beiträge
    43
    Beitragswertungen
    1 Beitragspunkte
    das wurde bestimmt schon einmal gefragt, aber ich weiß nicht, unter was für begriffen ich das suchen muss.

    ich möchte menüs einbauen, bei denen das feld über dem die maus ist, automatisch aufleuchtet.
    so was wie auch bei dem menü da oben auf dieser seite hier.

    hier mal meine bisherige index.htm von dem design, falls das weiterhilft 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <html>
<head>
<title>{TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="include/designs/dark_temple2/style.css">
</head>
<body>


<div id="all">
  <div id="header"></div>

 <div id="col1">

    {_list_menunr1@
    <table cellpadding="0" cellspacing="0" border="0" width="180">

          <tr>
                  <td style="height: 29px; background: url(include/designs/dark_temple2/img/col-right-top.png) top left no-repeat;"><b class="menu_heading">%1</b></td>
        </tr>
      <tr>
        <td style="background: url(include/designs/dark_temple2/img/col-right.jpg) top left repeat-y; padding: 5px; align="left">%2</td>
      </tr>
          <tr>
                  <td style="height: 24px; background: url(include/designs/dark_temple2/img/col-right-down.png) top left no-repeat;"></td>
        </tr>
    </table>
    <br />
    }

  </div>

  <div id="col2">
        {_list_menunr2@
        <table width="180" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td style="height: 29px; background: url(include/designs/dark_temple2/img/col-right-top.png) no-repeat"><b class="menu_heading">%1</b></td>
          </tr><tr>
            <td style="background: url(include/designs/dark_temple2/img/col-left.jpg) top right repeat-y; padding: 5px; align="left">%2</td>
          </tr><tr>
            <td style="height: 24px; background: url(include/designs/dark_temple2/img/col-right-down.png) no-repeat top left;" align="center"></td>
          </tr>
        </table>
        <br />
        }
  </div>


  <div id="col3">
        {_list_menunr3@
        <table width="180" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td style="height: 29px; background: url(include/designs/dark_temple/img/) no-repeat"><b class="menu_heading">%1</b></td>
          </tr><tr>
            <td style="background: url(include/designs/dark_temple/img/) top left repeat-y; padding: 5px; align="left">%2</td>
          </tr><tr>
            <td style="height: 24px; background: url(include/designs/dark_temple/img/) no-repeat bottom left;" align="center"></td>
          </tr>
        </table>
        <br />
        }
  </div>



      <div id="main_col">

            <table width="600" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td style="width: 600px; height: 19px; bottom left;" align="left">&nbsp;<b> » </b>{HMENU}</td>
          </tr><tr>
            <td style="min-height:100px;padding: 10px;">{EXPLODE}</td>
          </tr>

    </div>

 </div>
</body>
</html>

{_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
{_list_hmenubegi@<ul>}
{_list_hmenuende@</ul>}
{_list_vmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br /><ul>|</ul></li>}
{_list_vmenubegi@<ul>}

          {_list_vmenuende@</ul>}


    mfg Zekors


    verwendete ilchClan Version: 1.1

    betroffene Homepage: abitur2012.bplaced.de
    0 Mitglieder finden den Beitrag gut.
  2. Di. 16.11.2010 16:49 Uhr #2
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    für HTML4: 

    <srcipt language="javascript" type="text/javascript">
    function glow() {
         if (document.getElementbyID.('over1').style.backgroundColor = '#FF0000') {
             document.getElementbyID.('over1').style.backgroundColor = ''
         } else {
             document.getElementbyID.('over1').style.backgroundColor = '#FF0000'
         }
    }
</script>



      <tr>
      <td style="background: url(include/designs/dark_temple2/img/col-right.jpg) top left repeat-y; padding: 5px; align="left" onmouseover="glow()" onmouseout="glow()" id="over1">%2</td>
  </tr>



    Hoffe ich hab da ketzt kein Fehler eingebaut, habs selber auf dei Schnelle nicht testen können. Ich würde es einfach mit ner JavaScript-Methode lösen..

    lG
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  3. Di. 16.11.2010 17:20 Uhr #3
    User Pic
    Zekors Mitglied
    Registriert seit
    11.09.2010
    Beiträge
    43
    Beitragswertungen
    1 Beitragspunkte
    danke schonmal
    das umfärben an sich funktieniert mit nen paar rechtschreibkorrekturen.
    allerdings wird der gesamte hintergrund des menüs umgefärbt und nicht der einzelne menüpunkt, wie ich es eigentlich wollte.

    kann natürlich jetzt für jeden der punkte einen eigenen menüpunkt aufstellen, aber soweit ich weiß gibt der script nur 5 menüs her.
    oder kann man das irgendwie erhöhen?
    0 Mitglieder finden den Beitrag gut.
  4. Di. 16.11.2010 17:23 Uhr #4
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    ZitatZitat geschrieben von Zekors

    danke schonmal
    das umfärben an sich funktieniert mit nen paar rechtschreibkorrekturen.
    allerdings wird der gesamte hintergrund des menüs umgefärbt und nicht der einzelne menüpunkt, wie ich es eigentlich wollte.


    Sry stimmt ja, Ilch erstellt dir mit diesem Quellcode jeden Menüpunkt mit der "ID" "hover1". Bei einer statischen programmierung könntets du da differenzieren. Ich mache mir mal eben ein paar gedanken zur dynamischen Umsetzung...

    mfg
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  5. Di. 16.11.2010 17:28 Uhr #5
    User Pic
    Awaina Mitglied
    Registriert seit
    08.03.2009
    Beiträge
    130
    Beitragswertungen
    5 Beitragspunkte
    Einfacher: 

      <tr>
      <td style="background: url(include/designs/dark_temple2/img/col-right.jpg) top left repeat-y; padding: 5px; align="left" onmouseover="this.style.backgroundColor = '#FF0000'" onmouseout="this.style.backgroundColor = ''" id="over1">%2</td>
  </tr>


    Das sollte nun funktionieren wie du es dir gedacht hast.

    lG
    mit freundlichem Gruß,
    Kevin "Awaina" K.
    CEO @ A|W Webhosting
    0 Mitglieder finden den Beitrag gut.
  6. Di. 16.11.2010 17:37 Uhr #6
    User Pic
    Zekors Mitglied
    Registriert seit
    11.09.2010
    Beiträge
    43
    Beitragswertungen
    1 Beitragspunkte
    ok, das funktioniert schonmal wie gedacht.
    ich werd erstmal damit weiterarbeiten.
    wenn noch probleme entstehen meld ich mich einfach noch mal.
    1 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten