MetaModels Workshop in Berlin
Ergebnis 1 bis 13 von 13

Thema: Bildwechsel bei MouseOver mit Contao möglich?

  1. #1
    Contao-Nutzer Avatar von dream_factory
    Registriert seit
    24.11.2010.
    Beiträge
    4

    Frage Bildwechsel bei MouseOver mit Contao möglich?

    Hallo!


    Ich möchte gerne eine Fun Seite aufsetzen in der man bei einem MouseOver eine kleine Vorschau bekommt.

    ähnlich wie bei myvideo.at

    siehe blauen Pfeil;



    Brauche ich da ein Script Template, oder wie gehe ich am besten vor?

    ich muss sagen das ich noch Conteo Anfänger bin, und gerade die ersten Schritte LERNE. Aber dennoch Begeistert vom Funktionsumfang


    Liebe Grüße
    Stefan

  2. #2
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    6.412
    Partner-ID
    152
    User beschenken
    Wunschliste

    Standard

    Aye, Stefan.

    all die Videoseiten machen solche Sachen in aller Regel mit speziellen Funktionen - myvideo.at hat dazu (wie andere auch) eine API veröffentlicht, die Dir als Anregung dienen könnte.

    'Out of the box' und mit dreieinhalb Zeilen zusammenkopiertem JavaScript wird eine solche Funktion m.E. nicht möglich sein. Grundsätzlich sehe ich da eher selbstgeschriebenes JS anstatt Contao-Funktionen. Machbar sollte das sein - beispielsweise indem Du den Catalog als Backend nutzt und dann die entsprechenden Funktionen in die Ausgabe-Templates integrierst. Oder indem Du die API eines Videodienstes integrierst.

    Carolina.

  3. #3
    Contao-Nutzer
    Registriert seit
    24.10.2010.
    Beiträge
    49

    Standard

    Als erster Schritt:
    im Tiny Editor-> Bild einfügen -> Registerkarte erweitert -> Bild austauschen

    Wenn Du es automatisieren willst, brauchst eigene Skripte.

    hth,
    Christian G.

  4. #4
    AG Core-Entwicklung Avatar von Psi
    Registriert seit
    19.06.2009.
    Ort
    Mittelfranken
    Beiträge
    930
    Partner-ID
    5583
    User beschenken
    Wunschliste

    Standard

    Ich habe mir hierzu ein moo_hoverimage.tpl geschrieben was ich ins Seitenlayout einbinde.

    Soll ein Bild ausgetauscht werde gebe ich im Inhaltselement (oder wo auch immer) die Klasse "hoverImg" an.
    Das Javascript versucht dann ein Bild aus dem selben Ordner zu laden mit dem zusatz "Over".

    Bsp:
    tl_files/bilder/normalesBild.jpg --> tl_files/bilder/normalesBildOver.jpg


    moo_hoverimage.tpl:
    PHP-Code:
    <script type="text/javascript">
    <!--
    //--><![CDATA[//><!--
    window.addEvent('domready',function(){
        $$(
    "div.hoverImg img, img.hoverImg").each(function(el){
            
    el.store('default',el.get('src'));
            
    el.addEvents({
                
    'mouseenter':function(e){
                    var 
    over el.retrieve('default').substr(0,el.retrieve('default').lastIndexOf('.')) 
                                + 
    'Over'
                                
    el.retrieve('default').substr(el.retrieve('default').lastIndexOf('.'));
                    
    el.set('src',over);
                },
                
    'mouseleave':function(e){
                    
    el.set('src',el.retrieve('default'));
                }
            });
        });
    });
    //--><!]]>
    </script> 

  5. #5
    Contao-Nutzer
    Registriert seit
    15.04.2010.
    Beiträge
    19

    Standard

    Hallo Psi,

    besten Dank für das Script. Funktioniert einwandfrei. Allerdings lässt sich das Bild dann nicht verlinken, oder?

    Gruß

    Alex

  6. #6
    Contao-Nutzer
    Registriert seit
    15.04.2010.
    Beiträge
    19

    Standard

    Okay. Funktioniert doch. Danke!

  7. #7
    Contao-Nutzer
    Registriert seit
    03.09.2013.
    Beiträge
    2

    Standard

    Hallo alle zusammen,

    ich bin grad auf diesen schon etwas älteren Post hier gestoßen und würde gerne das o.g. Script verwenden. Normalerweise mache ich aber nur die Datenpflege unserer Website und weiß daher nicht, wo ich ein derartiges Script einfüge! Hoffentlich kann mir das jemand kurz erklären.

    Mit freundlichen Grüßen
    Jan Dürcop

  8. #8
    AG Core-Entwicklung Avatar von Psi
    Registriert seit
    19.06.2009.
    Ort
    Mittelfranken
    Beiträge
    930
    Partner-ID
    5583
    User beschenken
    Wunschliste

    Standard

    Datei "moo_hoverimage.html5" in /templates anlegen und im Seitenlayout anhaken.
    Anerkennung motiviert: Amazon-Wunschliste && TANSTAAFL
    Kontakt: http://www.4wardmedia.de

  9. #9
    Contao-Nutzer
    Registriert seit
    03.09.2013.
    Beiträge
    2

    Standard

    Hallo Psi,

    danke für die schnelle Antwort. Dann war ich ja schon auf dem richtigen Weg, aber genau hier bin ich nicht weitergekommen. Wenn ich unter /templates auf "Neues Template" gehe, dann kann ich nur aus einer Liste "Originaltemplates" aussuchen und diese anpassen, aber irgendwie keine neuen Templates erstellen. Ich weiß nicht, wie ich da jetzt meine eigenen Templates reinbekomme. Ich bin absoluter Laie in dem gesamten Layout-Bereich und arbeite sonst nur im Inhalt-Bereich.

    Mfg
    Jan Dürcop

  10. #10
    AG Core-Entwicklung Avatar von Psi
    Registriert seit
    19.06.2009.
    Ort
    Mittelfranken
    Beiträge
    930
    Partner-ID
    5583
    User beschenken
    Wunschliste

    Standard

    FTP und hochladen und so
    Anerkennung motiviert: Amazon-Wunschliste && TANSTAAFL
    Kontakt: http://www.4wardmedia.de

  11. #11
    Contao-Fan
    Registriert seit
    02.03.2013.
    Beiträge
    436

    Standard

    geht auch ohne ftp, x-beliebiges template wählen, code reinkopieren, abspeichern und anschliessend umbenennen.

  12. #12
    Contao-Nutzer
    Registriert seit
    10.02.2012.
    Ort
    Basel
    Beiträge
    206
    Partner-ID
    8602

    Standard

    Zitat Zitat von Psi Beitrag anzeigen
    Ich habe mir hierzu ein moo_hoverimage.tpl geschrieben was ich ins Seitenlayout einbinde.

    Soll ein Bild ausgetauscht werde gebe ich im Inhaltselement (oder wo auch immer) die Klasse "hoverImg" an.
    Das Javascript versucht dann ein Bild aus dem selben Ordner zu laden mit dem zusatz "Over".

    Bsp:
    tl_files/bilder/normalesBild.jpg --> tl_files/bilder/normalesBildOver.jpg
    Das funktioniert leider nicht in Kombination mit Caching.
    Contao lädt das erste Bild aus dem assets-Ordner, das zweite verbleibt im Ursprungsordner, der Pfad wird nicht gefunden. Ideen wie man das lösen könnte?

  13. #13
    Contao-Nutzer
    Registriert seit
    24.10.2012.
    Beiträge
    5

    Standard

    Hallo,

    hat eventuell jemand eine Lösung für das Caching-Problem mit diesem Script?

    Momentan sucht das Script im assets-Ordner nach dem Over-Bild, welches dort nicht vorhanden ist.

    Des Weiteren erhält die Datei (1. Bild) auch einen neuen Namen. Somit müsste das 2. Bild (Over) diesen auch erhalten.

    Gruß

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. große büchersammlung/präsentation mit contao möglich?
    Von Nabonid im Forum Sonstiges zu Contao
    Antworten: 24
    Letzter Beitrag: 23.05.2011, 09:02
  2. Groups / Gruppen mit Contao möglich ?
    Von baraber im Forum Was kann Contao?
    Antworten: 0
    Letzter Beitrag: 28.11.2010, 12:40
  3. Contao hier möglich?
    Von dream_factory im Forum Erfahrungen mit Webhostern
    Antworten: 3
    Letzter Beitrag: 24.11.2010, 21:38
  4. Gavick Slideshow auch für Contao möglich?
    Von netnite im Forum Allgemeine Inhaltselemente
    Antworten: 2
    Letzter Beitrag: 09.11.2010, 11:34
  5. Antworten: 3
    Letzter Beitrag: 16.06.2010, 22:30

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •