/ Shopsoftware / Support / Programmierung / Element NAVI / Beispiele

Grafische Links mit Mouseover

Ein Beispiel, um Links zu den Kategorien als Grafik statt der üblichen Textlinks festzulegen.
Dieses Beispiel ist mit Mouseover-Effekt( vgl. http://de.selfhtml.org/javascript/beispiele/buttons.htm).

Die Grafiken sind als Button zur jeweiligen Kategorie über Waren&Wirtschaft->Kategorien hochgeladen.
Die Dateien für die Standardansicht müssen _normal im Dateinamen haben.
Die Grafikdateien für den Mouseover-Effekt, die beim Überfahren der Grafik mit der Maus erscheinen sollen, müssen genau wie die hochgeladenen Buttons mit einem Zusatz _over heißen.

Beispiel:
Standardgrafik ohne Effekt home_normal.gif
Grafik für Mouseovereffekt home_over.gif
Den violetten Teil des Dateinamens können Sie frei wählen. Er muß bei bei beiden Dateien gleich sein.
Der grünliche Teil kennzeichnet, welches Bild für welchen Status verwendet wird.

Für das Beispieltemplate müßen die Kategorien auf oberster Ebene angelegt sein (ROOT=0). Nur diese Ebene wird angezeigt (MAXLEVEL=1).

<table cellpadding=0 cellspacing=0 border=0>
<NAVI NAME="All" ROOT=0 MAXLEVEL=1 NOSWITCH=0 MOVELEVEL=1 TYP="tpl" READBUTTON=1>
  <tr>
    <td>
      <a href="##navi_nnamec##.html" name="lnk##navi_nnamec##">
         <img src="##navi_nbuttonc##"
                  alt="##navi_nnamec##"
                  title="##navi_nnamec##"
                  border=0
                  onmouseout="this.src='##navi_nbuttonc##'"
                  onmouseover="this.src='##navi_nbuttonoverc##'"
                  name="but##navi_nnamec##"
                  hspace=2 vpsace=2>
        </a>  
    </td>
  </tr>
  </NAVI>
</table>

Hier sehen Sie den Effekt:
Ein Beispiel, bei dem dieses Template im Einsatz ist, finden Sie unter http://www.bockrock.de

Beispieltemplate herunterladen

Das Template gehört ins Verzeichnis /template und läßt sich über Kontrollzentrum->Teaserverwaltung hochladen.

Damit das Template dann auch verwendet wird geben Sie in Kontrollzentrum->Navigationsleisten an:
navi:navigrf1mm

Klicken Sie zum Vergrößern auf das Bild
Klicken auf nach links oder nach rechts und postionieren diese neue Navigationsoption nach Ihren Wünschen.
Damit die Änderungen übernommen werden, am Ende der Seite auf Ändern klicken.

zurück zur Artikelübersicht | Anfrage stellen | | | Deeplink

Empfehlung:

Einfache grafische Links