Menüpunkt mit Bildervorschau bei mouseover

[tilda]

GUten Morgen,

gibt es die Möglichkeit, bei mouse over über einen Menüpunkt
ein Vorschaubild zu erzeugen, wie in diesem Beispiel hier?

Beispielseite

Beste Grüße
Tilda

[pustefix]

Der Link funktioniert aktuell leider nicht. Vlt. hast du ja noch ein anderes Beispiel.

[tilda]

Doch, wenn man links über die Menüpunkte geht, dann erscheinen die Vorschaubilder -
warum oben die Fehlermeldung kommt weiss ich nicht.
Vielleicht geht es mit dem Link jetzt ohne Fehlermeldung:
http://brittathie.tv/

[pustefix]

Denke, da wirst du fündig:
1: https://community.contao.org/de/showthread.php?64386-Einfacher-Bilderwechsel-%C3%BCber-CSS&highlight=bild+link+hover
2. https://community.contao.org/de/showthread.php?61287-Bildwechsel-bei-mouse-over&highlight=bild+link+hover

[tilda]

Das sieht aber so aus, als wenn man dann immer in der CSS Datei ein Hintergrundbild eingeben muss.
Oder verstehe ich das falsch?
Ich möchte ja zu jedem Menüpunkt ein anderes Teaserbild, am liebsten so, dass der Kunde es auch selbsständig einbinden oder ändern kann.

Beim Klick auf den Menüpunkt kommt man dann zu den eigentlichen Inhalten der Seite.

Beste Grüße
Tilda

[dazzle89]

Mit Javascript wäre das möglich, wenn du dich da etwas einliest.

Ansonsten:

Dir ist ja wichtig, dass der Kunde die Bilder selbst pflegen kann, oder?

Dann kannst du es z.B. mit Rocksolid Custom Elements realisieren. Im Template kannst du die Variable des Bildes, das der Redakteur ausgewählt hat, als CSS background ausgeben.

[tilda]

Ich habe nun den Tipp bekommen, es mit der Erweiterung pageimage zu versuchen.
Wichtig ist, dass das Bild nur bei mouse over erscheinen soll, nicht als Hintergrundbild.

Ich bin nur etwas ratlos, was ich tun muss um das Bild platzieren zu können.
Unter der jeweiligen Seite kann man das Bild zuweisen, aber weiter passiert nichts.

Hat jemand eine Idee?

Beste Grüße
tilda

[Andreas]

Das Bild über eine Anpassung von nav_hover ins Menü bringen, dass es in etwa so aussieht.

<nav class="mod_navigation block" id="mainnav">
  <a href="#skipNavigation1" class="invisible">Navigation überspringen</a>
  <ul class="level_1">
    <li class="active first">
      <span class="active first">Start</span>

      <!-- Hier kommt das Bild -->
      <figure class="image_container">
        <img src="files/images/start.jpg" alt="Seitenbild" title="Start" width="600" height="400">
      </figure>

    </li>
    <li class="sibling last">
      <a href="kontakt.html" title="Kontakt" class="sibling last">Kontakt</a>

      <!-- Hier kommt das Bild -->
      <figure class="image_container">
        <img src="files/images/kontakt.jpg" alt="Seitenbild" title="Kontakt" width="600" height="400">
      </figure>

    </li>
  </ul>
  <a id="skipNavigation1" class="invisible">&nbsp;</a>
</nav>

Dann mit CSS anpassen. Ganz grob:

#mainnav .image_container {
  display: none;
}
#mainnav li:hover > .image_container {
  display: block;
}

[Andreas]

Den Pfad des Bildes kannst du dir im nav-Template mit dem FilesModel holen.

...
<?php foreach ($this->items as $item): ?>
<?php
  if($item['pageImage'])
  {
    $imgPath = \FilesModel::findByUuid(deserialize($item['pageImage'])[0])->path;
    $imgHtml = '<img src="'.$imgPath.'" alt="">';
    dump($imgPath, htmlspecialchars($imgHtml));
  }
?>
...

[tilda]

mhm - ich komme nicht so recht weiter
Hier mal der Link zu der Seite. In der Navi ( Level2) sind die Seitenbilder hinterlegt.
Wenn man also über Projekt 1, Projekt2 , ... mit mouse over geht, sollte das Seitenbild erscheinen
(Zum Test habe ich überall das gleiche Seitenbild angelegt)

Beispielseite

Beste Grüße
Tilda

[Andreas]

Da sind keine Bilder zu sehen. Poste mal den Code aus deinem Template.

ps Eine ID darf auf einer Seite nur einmal vorkommen. Behebe das mal bitte für id="mod_navigation" und id="article-8", die sind jeweils doppelt vorhanden.

Mach im Layout mal alle Häkchen von jQuery und MooTools weg, außer die reine Bibliothek von jQuery (ohne Templates). Lade diese lokal. Hake die Templates nur dann an, wenn du sie benötigst.

[tilda]

Die ID's müssten nun behoben sein. Ich habe die ID 8 nur einmal gefunden.

Ich bin mir nicht sicher, ob ich es mit dem Template richtig verstanden habe -
habe mir die o.g. Zeilen in das nav template hineinkopiert, danach war Kraut und Rüben, daher war es wohl so nicht gedacht....

Beispielseite

Welches Template soll ich denn posten?
Eigentlich habe ich nun keine Änderungen vorgenommen.

[Andreas]

Evtl. war das doch so gedacht, es fehlt dann abschließend nur noch das CSS um es so umzusetzen, wie du es möchtest.

Ich meinte das nav-Template, also das, wo du die Bilder reinbringst. Zeige also bitte mal dieses Template und du kannst auch gerne schonmal dieses "Kraut und Rüben" zeigen.

Du hast jetzt 3mal die ID projekte. Um sowas zu verhindern, gewöhn dir am besten an, das Feld ID nie auszufüllen, benutze das Feld für die CSS-Klasse anstatt dessen.

[tilda]

Okay: Hier ist das Nav Template

<ul class="<?= $this->level ?>" role="<?= ($this->level == 'level_1') ? 'menubar' : 'menu' ?>">
  <?php foreach ($this->items as $item): ?>
  <?php
  if($item['pageImage'])
  {
    $imgPath = \FilesModel::findByUuid(deserialize($item['pageImage'])[0])->path;
    $imgHtml = '<img src="'.$imgPath.'" alt="">';
    dump($imgPath, htmlspecialchars($imgHtml));
  }
?> 
    <?php if ($item['isActive']): ?>
      <li class="<?= $item['class'] ?>"><span class="<?= $item['class'] ?>" role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></span><?= $item['subitems'] ?></li>
    <?php else: ?>
      <li<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?= $item['accesskey'] ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?= $item['tabindex'] ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?= $item['target'] ?> role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></a><?= $item['subitems'] ?></li>
    <?php endif; ?>
  <?php endforeach; ?>
</ul>

und so sieht es jetzt aus:Homepage


warum "projects" jetzt dreimal vorkommt verstehe ich nicht, da ich gar keine ID vergeben habe

...???

[Andreas]

Mein Code war ja nur ein erster Schritt, auf den du aufbauen solltest. dump() ist nur ne Ausgabe mit der du die neu erstellten Variablen testen kannst. Jetzt könnte es so weitergehen

<ul class="<?= $this->level ?>" role="<?= ($this->level == 'level_1') ? 'menubar' : 'menu' ?>">
  <?php foreach ($this->items as $item): ?>
  <?php
  $imgHtml = '';
  if($item['pageImage'])
  {
    $imgPath = \FilesModel::findByUuid(deserialize($item['pageImage'])[0])->path;
    $imgHtml = '<img src="'.$imgPath.'" alt="">';
    #dump($imgPath, htmlspecialchars($imgHtml));
  }
?>
    <?php if ($item['isActive']): ?>
      <li class="<?= $item['class'] ?>"><span class="<?= $item['class'] ?>" role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></span><?= $imgHtml ?><?= $item['subitems'] ?></li>
    <?php else: ?>
      <li<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?= $item['accesskey'] ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?= $item['tabindex'] ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?= $item['target'] ?> role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></a><?= $imgHtml ?><?= $item['subitems'] ?></li>
    <?php endif; ?>
  <?php endforeach; ?>
</ul>

Edit: Ich habe im unteren Original-Code nur zweimal die Variable $imgHtml eingefügt.