mit Mosue over button Bilder silder steuern

  • Hallo ich möchte mein Silder auch mit mouse over steuern können, das heißt wenn man auf dem Button drüber fliegt das auch das Bild geändert wird zum Button ....aber wie stelle ich mir das an....


    Mein Code sieht der zeit so aus



  • Was meinst du mit mouse over steuern ? Wenn du mit der Maus over die Pfeile fährst dann soll das ein Bild weiter gehen oder wie meinst du das genau ?


    EDIT . Eine Lösung ohne Javascript fällt mir gerade nicht ein. Aber nee kleine Zeile Jquery tut es aber .


    https://codepen.io/basti1012/pen/Kegywp?editors=1010


    Ist aber noch ausbaufähig. Bei den dots geht es Prima und bei vor zurück reagiert er zu schnell und wechselt zu schnell die Bilder. Da mußt du dann irgendwie timeout einbauen oder so .

    Doppelt EDIT: Gut mit Timeout geht.Den mußt du mal kucken ob du dir das so vorgestellt hast.

    Ich versuche mal was zu finden ohne Javascript.

  • Eine Lösung ohne Javascript fällt mir gerade nicht ein. Aber nee kleine Zeile Jquery tut es aber .

    Code
    1. $('.prev >span,.next > span,.dots').hover(function(){
    2. d=this;
    3. setTimeout(function(i){
    4. $(d).click();
    5. },100);
    6. })

    VS

    Code
    1. _elements = document.querySelectorAll( '.prev > span, .next > span, .dots' );
    2. _elements.forEach( (i) => {
    3. i.addEventListener('mouseover', (e) => {
    4. setTimeout( () => { i.click(); }, 100 )
    5. });
    6. });

    Ist natürlich auch JavaScript, aber ohne Framework/Libraries, die extra geladen werden müssen.

    Das ist aber ein gutes Beispiel dafür, dass man jQuery in den meisten Fällen gar nicht benötigt. Man sieht sehr schön, dass die click()-Methode auch nur ein Wrapper ist, denn click() kennt JavaScript nativ auch. Und was die Selektionsfähigkeit angeht, steht querySelectorAll dem jQuery Pendant $() in nichts nach. Ist halt nur etwas kürzer, sonst aber auch nichts.

  • denn click() kennt JavaScript nativ auch

    Da hatte ich heute morgen noch rüber nach gedacht wie und ob das geht.Dann kam mir Jquery im sinn weil ich da wußte das es geht und habe mir über nativen Javascript keine gedanken mehr gemacht.

    Ist natürlich auch JavaScript, aber ohne Framework/Libraries, die extra geladen werden müssen.

    Da hast du natürlich recht .Auch im Zeitalter von dsl 400.000 sollte man trotdem alles unnötige Laden vermeiden.

    Fals er auf seiner Seite schon Jquery eingebunden hat dann ist ja Ok.

    Für den kleinen Codeschnipsel extra noch ein Framework einzubinden wäre auch unnötig.


    Der Nachteil bei mir ist es ja,seid dem ich mich mit Jquery vertraut gemacht habe ,nutze ich das fast nur noch.

    Das muß ich mir mal wieder abgewöhnen ,weil man sieht es ja bei diesen Beispiel das sich da kaum was tut.

    Bei einen Script was 1000 Zeilen hat ,würde man wohl einen großen Unterschied/Vorteil sehen.


    Ich vergesse aber auch immer das man mit querySelectorAll auch sowas machen kann

    Code
    1. document.querySelectorAll( '.prev > span, .next > span, .dots' );

    Weil gerade diese funktion finde ich gut ,weil damals hatte ich das immer so machen müßen

    Code
    1. var table=document.getElementsByTagName('table')[0];
    2. var table1=table.getElementsByTagName('tr')[0];
    3. var table2=table1.getElementsByTagName('td')[0];
    4. var table3=table2.innerHTML;

    und bei Jquery reicht ja das

    Code
    1. $('table > tr > td ').html();

    Das geht mit querySelectorAll doch genau so ,richtig ?



    Aber zurück zum Thema.Ich frage mich ob es hier vieleicht noch eine andere möglichkeit gibt ? Die klick Methode kam mir hier als erstes in sinn,aber die macht auch Probleme.

    Ohne den setTimeout klickt er unkontroliert mal schnell und langsam die Bilder durch.


    Aber muß der TE mal was zu sagen ob ihn das so reicht

  • Code
    1. $('table > tr > td ').html();

    Das geht mit querySelectorAll doch genau so ,richtig ?

    Etwas länger, aber ja:

    Code
    1. document.querySelector('table > tr > td').innerHTML;
    2. // oder:
    3. document.querySelectorAll('table > tr > td')[0].innerHTML;

    Allerdings musst Du bedenken, dass diese Selektion auch mehrere Elemente matchen könnte/würde.

    Daher musst Du eh die Selektion verschärfen oder über die Elemente iterieren, bevor Du .html() oder nativ auch .innerHTML anwenden kannst.

    Der Nachteil bei mir ist es ja,seid dem ich mich mit Jquery vertraut gemacht habe ,nutze ich das fast nur noch.

    Es geht mir auch gar nicht um Dich, nicht dass Du das falsch verstehst!

    Ich erwähne die nativen Dinge nur, weil ich finde, dass gerade Leute, wie der TE, die die Materie gerade lernen mit den Basics anfangen sollten.

    Wer jQuery nutzt, sollte in meinen Augen zuerst JavaScript grundlegend beherrschen.


    Naja und dann finde ich so Methoden, wie .html() auch irgendwie überflüssig, weil das nichts anderes macht, wie die Eigenschaft .innerHTML.

    Wenn man gerne mit Methoden arbeitet, kann man sich ja selbst schnell eine definieren.


    Aber der TE sollte erstmal sagen, was genau sein Ziel und Wissenstand ist, um BTT zu kommen.

  • Hallo erstmal Vielen Vielen Dank :).....


    Ich meine die Bilder sollten in einem Button(der Button sollen auch Links enthalten) Praktisch zugewiesen werden.


    Das heißt das Button "Click Me" soll zu Bild 1 und das Button "Click Me 2" zu Bild 2 und so weiter...und die Bilder sollen sich gesteuert werden über mouse over mit dem Button, das heißt wenn ich über das Button "Click Me 2" darüber mit der Maus Fahre soll sich Bild 2 Angezeigt werden.


    Ich hoffe ich könnte das euch verständlich schreiben.

  • Neee... das ist leider alles andere als verständlich!

    Was willst du denn erreichen? Soll nur das Bild erscheinen, wenn du über den Button hoverst? Warum soll der Button dann 'Click me' heißen?

    Wo soll das Bild erscheinen?

    Was bedeutet... 'der Button soll auch Links enthalten'? Buttons können im übrigen nur einen Link enthalten - und wenn du die originären HTML Buttons meinst, dann brauchst du zur Funktion 'Link enthalten' auch noch ein <form..><form> Element.

    Für das Erscheinen eines Bildes beim 'hover' brauchst du kein JavaScript, dafür reicht HTML und CSS.

    Also bitte... beschreibe was du willst etwas genauer und zeige uns das, was du bisher an Code produziert hast! Vielleicht kann man daran erkennen, was du vor hast.

  • Die bilder sollen in ein button? Wie gross soll der button den sein ?

    Oder meinst du das du da zb 4 buttons hast und wenn man dann über den button fährt das das bild dann unter den button angezeigt wird?

    Der Button wird so groß wie die Beschreibungs des Bild sein.

    Ja Genau so soll es sein.....aber der Silder soll trotzdem erhalten bleiben wenn man nicht über den Button hovert.

    Das "Click me" war einfach eine Beschreibung, das hat doch einiges an Verwirrung erwirkt :( tut mir leid, aber hinter dem Button soll es auf Links verweisen.

    Ja versuche ich :O....fällt mir leider nicht so leicht :(

    Ja Sailor da hast du recht .Mit der erklärung komme ich nicht weit ,höchstens so vieleicht ,was ich daraus verstehe

    https://codepen.io/basti1012/pen/Kegywp

    Ja so ungefähr nur der Silder sollte erhalten bleiben.

  • Sag mir mal ob das so sein soll?

    https://codepen.io/basti1012/pen/pKeEeE?editors=1010

    Fals ja mache ich mir mal gedanken wie man das mit wennig Code in Css machen kann,Aber vieleicht hat Sailor da lust das in Css zu machen weil er da besser ist als ich .


    Aber sag uns erstmal ob das Endergebniss so stimmt jetzt, und

    was meinst du den mit

    Der Button wird so groß wie die Beschreibungs des Bild sein.

  • Wenn Du einen Slider im Einsatz hast, muss es dazu eine Doku geben.

    Darin sind idealerweise Methoden erklärt, auf die Du zugreifen kannst, bspw. zu einem bestimmten Slide wechseln.


    Das Prinzip bleibt, wie basti1012 es gezeigt hat, man muss es nur auf den Slider anpassen, das wäre dann Deine Aufgabe, da wir Deinen Slider nicht kennen.


    Der Vollständigkeit halber, hier nochmal nativ:

    https://codepen.io/anon/pen/MXoGXa?editors=1010

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Arne Drews () aus folgendem Grund: Beispiel auf codepen überarbeitet, lt. #13

  • @basti1012

    Ja so soll es sein :) so ungefähr ...die Button sollten natürlich außerhalb der Bild Fläche sein ...Aber Ansonst ist Perfekt ...


    ist das aber gewollt das am Anfang kein Standard Bild geladen wird ? Hier bei sollte irgend ein Bild geladen werden.


    Js das muss ich noch wirklich an schauen.


    @Arne Drews


    Sieht gut aus :)


    Leider ist zum Slider keine doku vorhanden :(

  • type="text/javascript" brauch man Heut zu Tage nicht mehr da mit rein schreiben.

    Hast du die Aktuelle Version von Jquery auch eingebunden ?

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    Ansonsten setzt Das Script mal unter den Slider,weil das Script kann ja nur auf das zu greifen was auch da ist.

    Du könntest auch den Code von Arne Drews versuchen ,der läuft ohne Jquery.

    Wenn immer noch nicht geht schick mal Link oder Kompletten Code.

  • Ok es Funktioniert src von neuen jquery hat geholfen :)


    Code
    1. <input type="button" data-bild="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg" class="but" id="go1" value="Bild1" href="www.google.de" >

    Aber wenn ich ein Link einfüge und auf dem Button Bild eins 'Clicke passiert nichts ?

    Oder muss ich den Lick in Js einfügen ?

    Code
    1. Ich habe die Click }).click(function(){
    2. alert('Hier könnte man den Link "'+j+'" verlinken ,oder das Bild und den Button direkt verlinken');