Ankündigung

Einklappen
Keine Ankündigung bisher.

Jimdo Hover/Mouseover Farbwechsel

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Jimdo Hover/Mouseover Farbwechsel

    Hey Community

    Ich bin neu hier im Forum und auch leider absoluter HTML Nichtskönner.
    Versuche mich aber so langsam in das ein oder andere Thema einzulesen.

    Natürlich habe ich auch gleich eine Frage, bei der mir sicher jemand helfen kann.

    Ich habe eine Jimdo Homepage, bei der ich einen ausklappbaren Text einfügen möchte.
    Das hat soweit auch tatsächlich funktioniert.

    Jetzt möchte ich allerdings noch den Link/Button "mehr..." noch editieren.

    Und zwar dahingehend, dass er die Farbe von Schwarz auf Cyan wechselt, wenn man mit der Mouse darüber fährt.
    Also einfach einen klassischen Mouseover/Hover Effekt.

    Aktuell habe ich folgende Codeschnipsel auf meiner Jimdo-Seite eingefügt:

    im HEAD Bereich:


    <script type="text/javascript">
    //<![CDATA[
    var whichIsOpen = 0;
    function showText(index) {
    if(whichIsOpen != 0) {
    hideText(whichIsOpen);
    }
    document.getElementById('aufklappen' + index).style.display = 'none';
    document.getElementById('text' + index).style.display = 'block';
    document.getElementById('zuklappen' + index).style.display = 'block';
    whichIsOpen=index;
    }
    function hideText(index) {
    document.getElementById('aufklappen' + index).style.display = 'block';
    document.getElementById('text' + index).style.display = 'none';
    document.getElementById('zuklappen' + index).style.display = 'none';
    whichIsOpen=0;
    }
    //]]>

    </script>





    im HTML Widget auf der entsprechenden Text-Seite:


    <p>

    eingeblendeter Text

    </p>

    <p id="aufklappen1">
    <a href="javascript:showText(1);"><strong><font color="black">mehr...</font></strong></a>
    </p>

    <p id="text1" style="display: none;">

    dieser Text wird bei klicken auf mehr... zusätzlich angezeigt/aufgeklappt

    </p>

    <p id="zuklappen1" style="display: none;">
    <a href="javascript:hideText(1);"><strong><font color="black">weniger...</font></strong></a>
    </p>



    Kann mir jemand sagen, wo ich welchen Code einfügen muss, damit ich die Farbe beim Mouseover bestimmen kann?

    Vielen Dank schonmal im Voraus.

    VG
    Basti




  • #2
    Üblicherweise werden die Farben im CSS geändert.
    https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

    VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €37

    Kommentar


    • #3
      Da kann ich arnego2 nur zustimmen. Ein Farbwechsel ist am besten und leichtesten mit CSS realisierbar. Das was du gerade oben machst hat sowieso nichts mit einem Farbwechsler am Hut. Ich würde dir raten nicht mithilfe von Javascript ein Farbwechsler zu erstellen.

      Gruss Localfu
      PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

      Kommentar


      • #4
        Zitat von Localfu Beitrag anzeigen
        Ich würde dir raten nicht mithilfe von Javascript ein Farbwechsler zu erstellen.
        Ich würde ganz auf Javascript verzichten und alles mit Css machen

        https://codepen.io/basti1012/pen/WNxvXgL
        Zuletzt geändert von basti1012; 11.10.2020, 20:13.
        Mein (Basti1012) Forum und Chat

        Kommentar


        • #5
          Hallo zusammen, vielen Dank für die schnellen Antworten!

          @basti1012: Ich habe mir auch schon mal deinen Link angeschaut.

          Ich habe deinen CSS und HTML Code einfach mal 1:1 auf meine Seite kopiert, weil ich damit dann einfach mal rumspielen wollte.
          Allerdings kann ich den CSS Code irgendwie nicht in meinem Head Bereich oder im HTML Bereich auf meiner Seite abspeichern.

          Den HTML Part kann ich problemlos einfügen, sieht aber dann natürlich anders aus, da ja der CSS Part fehlt.

          Klapptext.jpg

          Wo muss denn der CSS Code hin?

          Vielen Dank!


          VG an alle.
          Basti

          Zuletzt geändert von Basti; 12.10.2020, 09:02.

          Kommentar


          • #6
            Die css kannst du auch in einer vorhandener Css Datei reinkopieren, an besten immer am Ende der datei.
            Wenn du noch keine Css Datei hast und nur inline Css hast dann muss die css in <head>
            HTML-Code:
            <!doctype html>
            <html lang="de">
                <head>
                    <title>bla</title>
                    <style>
                        hier der css Code
                    </style>
                </head>
                <body>
                    html code
                </body>
            </html>
            oder in einer Extra Css Datei speichern
            Fatei erstellen mit den namen style.css
            Dann meinen Css Code darein kopieren
            und dann in den Html einbinden
            HTML-Code:
            <!doctype html>
            <html lang="de">
                <head>
                    <title>bla</title>
                     <link rel="stylesheet" href="style.css">
                </head>
                <body>
                    html code
                </body>
            </html>
            Mein (Basti1012) Forum und Chat

            Kommentar


            • #7
              Allerdings kann ich den CSS Code irgendwie nicht in meinem Head Bereich oder im HTML Bereich auf meiner Seite abspeichern.
              Hilft hier der 3. Unterpunkt vielleicht weiter?
              https://help.jimdo.com/hc/de/article...enen-Code-ein-
              Oder hast Du es so schon versucht und er nimmt das CSS nicht an?

              Kommentar


              • #8
                Ich habe mal gerade meine alte jimdo Seite rausgesucht, da hatte ich immer solche sachen getestet.
                Ich muß sagen das es für mich einfach nur Mist ist.
                Für Leute die sowas in Baukasten System erstellen wollen und vieleicht auch nicht anders können ist es vieleicht ganz gut.
                Habe da jetzt eine halbe Stunde rumgespielt und kriege meinen Code da auch nicht rein.
                Auch nicht mit der Anleitung die Sempervivum gepostet hat.

                Mein Tipp:
                wechsel nach bplaced.net , da kannst du alles selber erstellen und mußt nicht den Baukasten kram nehmen.
                Vorraussetzung ist aber das du die Grundlagen kennst.
                Mein (Basti1012) Forum und Chat

                Kommentar


                • #9
                  bplaced.net
                  ist ein Hoster
                  Generell sind Baukästen so ausgelegt das der Kunde sich an den Hoster kettet.
                  Eine Horrorstory: Ich hatte unser Domain über den Hoster gekauft und der erst günstige Preis wurde nach 2 jahren angehoben von 11$ zu 27$. Das hat dann bei mir genug Energie freigesetzt und das Domain ging zu einem Domain Hoster.

                  Kein Jahr nach dem Domain Umzug wurde der Reseller Hosting Vertrag von 95$ auf 585$ angehoben. Den Rest könnt ihr euch denken.
                  Ich nehme nicht an das solche Praktiken einzigartig sind.
                  https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

                  VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €37

                  Kommentar


                  • #10
                    Habs hinbekommen! Danke euch!

                    Kommentar


                    • #11
                      Verrätst Du uns auch, wie Du es jetzt gelöst hast?

                      Kommentar

                      homepage-forum.de - Hilfe für Webmaster! Statistiken

                      Einklappen

                      Themen: 56.714   Beiträge: 429.211   Mitglieder: 28.475   Aktive Mitglieder: 45
                      Willkommen an unser neuestes Mitglied, sw2.

                      Online-Benutzer

                      Einklappen

                      201 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 200.

                      Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                      Die neuesten Themen

                      Einklappen

                      Die neuesten Beiträge

                      Einklappen

                      Lädt...
                      X