Slide Effekt bei Mouseover

  • Hallo alle zusammen,


    ich habe folgendes anliegen. Ich möchte auf meiner Home-Seite einen Mouseovereffekt einfügen. Der Effekt sieht wie folgt aus (The Official Crooks and Castles Website). Auf dieser Website wird unten, wenn man mit der Maus über ein Bild fährt ein schwarzer Hintergrund eingeflogen. Sieht sehr elegant aus. Ich möchte genau diesen Effekt, eins zu eins, für meine Website haben.


    Im Internet habe ich folgenden Code gefunden (Hover Slide Effect with jQuery | Codrops). Ich bin leider noch relativ neu im ganzen Programmieren und kenne mich daher nicht sehr gut aus. Wo was im HEAD zu stehen hat und wie man den HTML bzw. CSS Code eingiebt, kriege ich gerade noch so hin, aber ich habe keine Ahnung ob man ein javascript einfügen kann und wenn ja, wo das hin muss?


    Es wäre echt super nett, wenn mir weitergeholfen werden könnte. Am besten mit einer Anleitung oder so :)


    Vielen Dank. Gruß

  • Wie schon mal geschrieben...es fehlt ein Link ZU DEINER SEITE....wenn du eine Anleitung willst...dein zweiter Link hat doch alles was du brauchst...wenn du dich aber gar nicht auskennst musst du auch schon mithelfen um eine Antwort zu erhalten....


    Also im Source Download siehst du die index.html da steht doch alles drin... du musst es halt nur anpassen an das was du willst....


    HEAD BEREICH - also hier


    17-01-2013 20-21-50.png


    kommt z.b. das rein



    Dann ins HTML Objekt dein "Bildercode" - das ist das was auf der Seite angezeigt wird...



    und dann kommt vorm ende des body tags noch das hier



    17-01-2013 20-30-14.png


    das ist die Steuerung...
    Da man schlecht in V8 direkt vors Ende des body Tags kommt kann man das auch mit ins HTML Objekt schreiben.... bzw. sich eins am Ende der Seite erstellen...und die Höhe reduzieren...


    Deine Pfade zu den Dateien müssen stimmen (die im Head).


    Da ich davon ausgehe das dein Wissensstand sehr gering ist - wirst du damit nicht viel anfangen können.


    ______________________________________________________________________________________________


    Aber das was du eigentlich suchst ist das hier...


    Mosaic - Sliding Boxes and Captions jQuery Plugin


    oder liege ich da falsch?

  • Super. Vielen Dank für deine Antwort. Ich werde das jetzt alles mal probieren.


    Du hast übrigens absolut recht. Ich brauch das zweite plugin, welches du gepostet hast.


    Das Problem, das ich halt habe, ist, dass ich nicht genau weiß was wo reinkommt. also wenn du z.b. sagst "vor den body text kommt was rein", dann weiß ich net genau wo das ist.


    Ich werd das jetzt mal versuchen und dann geb ich bescheid, ob es geklappt hat. Nochmals vielen vielen Dank für die schnelle Antwort!

  • HEAD





    HTML Objekt




    Mal als groben Überblick...


    vergiß das einfach mit vor den body ende....das ist einfach im Seiteninhalt - mehr nicht...also am Ende der Seite.....vor dem </body> tag damit es erst später mit geladen wird beim Seitenaufruf und den Seitenaufruf nicht so lange in die länge zieht. Aber das ist beim zweiten nicht nötig....

  • hi, nochmals danke.


    ich hab jetzt alles eingefügt so wie du es gesagt hast. ich hab auch auf dieser seite das plugin runtergeladen.


    wenn ich nun die seite teste erscheinen alle bilder untereinander. kann ich deine angegebenen codes einfach blind einfügen oder muss ich die noch anpassen?
    also ich weiß, dass ich die für meine bilder anpassen muss, aber wenn man jetzt von den beispielbildern ausgeht.


    gruß

  • ok. sry das ich weiterhin dich mit fragen bombadiere aber ich bin echt sehr sehr neu in diesem ganzen programmieren und ich brauch echt nur diesen einen effekt. also das hab ich gemacht:


    1) Jquery aus der von dir gezeigten seite hier (Mosaic - Sliding Boxes and Captions jQuery Plugin) runtergeladen.
    2) auf dem desktop abgespeichert
    3) in website x5 den von dir oben gezeigten code 1-1 in head und in der html datei auf meine home seite eingegeben
    4) wenn ich jetzt auf test drücke erschienen zwar die bilder und paar links, aber die sind alle untereinander und wenn ich mit der maus drüber gebe ist auch kein effekt


    was muss ich jetzt genau machen. meine bilder sind im Dokumente\bilder\sample ordner


    was meinst du mit "vorschau ordner"? ich kenn mich echt nicht aus, sry das ich so doof fragen muss.



    Vielen Dank.


    Gruß

  • Hi !


    .. dokumente / Incomedia / "dein Projekt" / Preview ist der Pfad.



    Ist die CSS-Datei mosaic.css schon eingebunden ?

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von andy67 ()

  • Super, jetzt fuktioniert alles.


    Nur noch eine Frage bleibt offen, wie kann ich die Größe des Codes ändern. Meine Bilddatei ist 450x300 und eine andere 600x300. Wo pass ich das im code an?
    Vielen Dank.


    Gruß

  • und wie kann ich die schriftart ändern? Ich benutze jetzt den "cover" effekt und brauch dafür ne eigene schriftart eingeblendet beim mouseover.

  • Ich hab jetzt die Größe anpassen können. Jetzt hab ich aber das Problem, dass wenn ich mehrere HMTL Dokumente beim "Erstellen der Seite" nebeneinander platziere und dann auf Test drücke sind ein paar Bilder verschoben oder gar nicht zu sehen. Was muss ich machen?

  • So siehts dann aus bei Website X5. Wenn ich das rot umkreise HTML Dokument rausnehme dann sind das Bild Dokument und das zweite HTML Dokument genau nebeneinander, aber wenn ich ein weiteres drunter einfüge, ist das auch verschoben oder nicht vorhanden.


    Muss ich die mosaic.css datei nochmals anpassen und wenn ja wo oder wie?


    Brauche dringend Hilfe, da ich meine Seite sehr bald online stellen muss.


    Vielen Dank.

  • und was soll


    <a href="c:\user...... da sein?


    Soll der User dann lokal auf deinen Rechner zugreifen wenn die Seite online ist?


    ich kann mir schon so ungefähr vorstellen wie das zur Zeit bei dir aussieht ;D


    google > irgendwas probieren > könnte gehen.... ;D


    ---- schick mir dein Projekt mit den Bildern und ich werd das mal machen....

  • So hab das mal gemacht.


    du kannst doch nicht alles lokal verlinken. Wer soll online auf deinen Rechner zugreifen... du musst dich erstmal mit den Grundlagen von HTML auseinandersetzen bevor du so etwas versuchst.
    Und dann auch eins nach dem anderen...du baust dir ständig neue Fehler ein. Tags die geöffnet werden müssen wieder geschlossen werden. Inline Style muss nicht sein - wozu gibt es den CSS Bereich den man nutzen kann.


    Im Anhang das Projekt... und hier die Testseite ONLINE

  • So hab das mal gemacht.


    du kannst doch nicht alles lokal verlinken. Wer soll online auf deinen Rechner zugreifen... du musst dich erstmal mit den Grundlagen von HTML auseinandersetzen bevor du so etwas versuchst.

    meine Seite war noch offline deswegen hab ich das so verlinkt gehabt. kann ich die auch online stellen also quasi auf so eine testseite wo nur ich zugriff darauf habe?

  • Das hat mit online und offline nix zu tun - willst du erst alles so schreiben und dann wieder umschreiben?


    bei Version 8 kann man auch alles ans HTML Objekt hängen aber die Dateien liegen immer dann im files Ordner - da muss man dann alle Pfade ändern aber es geht auch.


    Aber DU musst dich erstmal mit den Grundlagen beschäftigen bevor du weiter so was versuchst...und dann noch mit Version 8....


    zum testen


    index.php?page=LinkListCategory&categoryID=5