onmouseover, on click

    hallo


    kurze frage: ich habe mein seitenmenü mit grafiken erstellt. beim mausover wird der button, welcher aus einer grafik besteht, durch eine andere ersetzt und beim mausout erscheint wieder die ausgangsgrafik. wie kann ich nun machen, dass beim klick auf den entsprechenden button das bild welches bei mausover erscheint, auch bestehen bleibt? (und erst wieder ändert wenn ein anderer button angeklickt wird...)


    vielen dank :-)

    na das geht...


    Schau mal rein bei meiner Seite, da ist es auch so.
    Bi, leider nur am Handy da, darum such den Code selber raus.
    Den anpassen.
    Gibt ein Thema hier im Forum dazu.

    Bernie


    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."


    :thumbsup:

    danke hab ich gemacht, hat aber bisher noch nicht funktioniert. beim onclick findet er keine datei obwohl diese ja dieselbe ist wie diejenige bei mouseover. irgendwo klemmts wohl mit der onklick funktion:


    HTML
    1. <a href="ihre-kontaktaufnahme.html">
    2. <img name="Grafik06" src="files/image-0002.jpg"
    3. onClick="src='files/image-0002-mo.jpg'"
    4. onMouseOver="src='files/image-0002-mo.jpg'"
    5. onMouseOut="src='files/image-0002.jpg'"


    ich frage mich gerade noch wie dann auch sichergestellt ist, dass der geklickte button wieder in die ausgangslage zurückgeht wenn ein anderer button geklickt wird?

    Einmal editiert, zuletzt von zwoemti () aus folgendem Grund: Der Code kann nicht funktionieren...

    Wir müssten einmal wissen wie du das Seitenmenü jetzt gemacht hast ?
    Hast du es mit WSX5 gemacht und Bilder als Hintergrund eingefügt oder
    ein Bild-Objekt verwendet mit Mouseover Effekt ?
    Oder gleich ein HTML Menü extra erstellt ?


    Am besten wäre ein Testlink um zu sehen was du gemacht hast denn was du machst ist zu komliziert denn das geht sicher einfacher !


    per CSS wäre es der Selektor "#selektorname:active"

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

    habs schlussendlich im header gemacht mit html code, da ich oberhalb der buttons im header auch noch text und linie haben wollte. wenn ich text direkt einfüge im header wurde die schrift jeweils sehr verpixelt dargestellt (keine ahnung woran das lag), darum hab ich das dann direkt im html code gemacht.


    die seite ist noch nicht online, darum sende ich dir mal den code welchen ich eingetippt habe und im anhang einen printscreen der startseite.




    Bitte den Code Button oben benutzen! Ich habs mal geändert.


    Man könnte das etwas "moderner" machen mit Hintergrundgrafik und dann mouseover. Auf der jeweilige Seite wird dann das Bild per Klassenzuweisung aktiv gestellt.

    ok sorry hab ich nicht gesehen mit dem code button.


    wie kann ich denn deinen vorschlag umsetzen? wie funktioniert das denn genau in html und wo müsste ich was ändern?


    danke!

    hallo
    hat mir jemand von euch ein paar konkrete ansätze zur verbesserung wie ich das realisieren kann, wäre echt super!
    danke :-)

    Man könnte die bildfelder in der Kopfzeile nehmen du schreibst das du derzeit dort das html Feld benutzt. Also einfach die menü Grafik als Bild einbinden mouseover kann man ja auch einstellen und zum aktiv markieren gibs hier auch schon die fertige Lösung. Ansonsten alles per Hand. Aber gilt der Grundsatz "kommt Zeit kommt Rat"

    hi


    wie kann ich das bild auf der jeweiligen seite aktiv machen? mouseover funktioniert gut, nun sollte die grafik (dieselbe wie beim mouseover) beim anklicken auch bleiben bis wieder ein andere seite angewählt wird. kann ich das direkt in html machen? bisher habe ich das so in html:

    Code
    1. <a href="index.html">
    2. <img name="Grafik01" src="files/pikto_meine_unternehmung.jpg"
    3. onMouseOver="src='files/pikto_meine_unternehmung_mo.jpg'"
    4. onMouseOut="src='files/pikto_meine_unternehmung.jpg'"
    7. style="border: 1px solid #000000; float: left; margin: 40px 0px 0px 79px" height="170" width="170" >
    8. </a>


    und wie könnte ich das direkt in x5 machen?

    Zitat von zwoemti

    Man könnte die bildfelder in der Kopfzeile nehmen du schreibst das du derzeit dort das html Feld benutzt. Also einfach die menü Grafik als Bild einbinden mouseover kann man ja auch einstellen und zum aktiv markieren gibs hier auch schon die fertige Lösung. Ansonsten alles per Hand. Aber gilt der Grundsatz "kommt Zeit kommt Rat"

    danke euch

    Morgen


    So geh mas an...


    Warst ja schon auf meiner Seite und hast geschaut.


    Ich habe da folgenden Code, den ich auch hier bekommen habe, unter Punkt 2- Erstellen der Sitemap- Eigenschaften und da unter Erweitert ( da natürlich bei jeder einzelnen Seite die richtige Grafik dazu...), eingebaut:


    Code
    1. <script type="text/javascript">
    2. $(document).ready(function() {
    3. $('<div onclick="x5engine.utils.location(\'index.html\'); return false;" style="position: absolute; top: 50px; left: 394px; width: 125px; height: 50px; cursor: pointer;"><img id="imHoverImage_4" src="images/startseitemo.png" alt="" style="width: 125px; height: 50px;" /></div>').appendTo('#imHeader');
    4. });
    5. </script>


    Für Dich ist wichtig:


    Schau im Quelltext Deiner Seite nach, wo Du das "div onclick" findest, ist im "body" drinnen, bei mir sieht es so aus:


    Wichtig ist für jede einzelne Seite der jeweilige Code dazu, wegen der Positionierung der jeweiligen Grafik:


    Zum Beispiel die Kontaktseite:


    Code
    1. <div onclick="x5engine.utils.location('kontakt.html', null, false); return false;" onmouseover="$('#imHoverImage_0').css('display','')" style="position: absolute; top: 50px; left: 918px; width: 105px; height: 50px; cursor: pointer;"><img id="imHoverImage_0" src="images/kontaktmo.png" alt="" onmouseout="$(this).css('display','none');" style="display: none; width: 105px; height: 50px;" /></div>

    Und wenn Du nun den Code den Du brauchst mit dem Quelltext vergleichst, wirst sehen was Du von Deiner Seite brauchst.


    Verstanden?

    Bernie


    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."


    :thumbsup:

    Brauchst Dich nicht zu bedanken Cheffe, is eh klar wenn ich auch mal wo helfen kann...

    Bernie


    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."


    :thumbsup:

    hi


    der erste teil hat geklappt und im quellcode hab ich das gefunden (vorschau -> quellcode anzeigen). doch wie kann ich den code editieren? oder muss das dann auch bei "Punkt 2- Erstellen der Sitemap" - "Eigenschaften" und da unter "Erweitert" rein?


    danke!

    Wie bernie geschrieben hat.


    Quellcode raussuchen kopieren und hier rein fügen


    HTML
    1. <script type="text/javascript">
    2. $(document).ready(function() {
    3. $('DEIN CODE').appendTo('#imHeader');
    4. });
    5. </script>


    wo DEIN CODE steht


    Immer nur genau das Bild welches aktiv sein soll dort reinbringen und unter Eigenschaften der Seite einfügen. HEAD Bereich


    WICHTIG ist das du im Bereich von DEIN Code die ' mit einem \ davor versiehst.


    Sie oben bei Bernie im Quellcode



    <div onclick="x5engine.utils.location(\'index.html\'); return false;" style="position: absolute; top: 50px; left: 394px; width: 125px; height: 50px; cursor: pointer;"><img id="imHoverImage_4" src="images/startseitemo.png" alt="" style="width: 125px; height: 50px;" /></div>

    hallo zusammen


    hab nun so ziemlich lange herumgebastelt und das leider nicht hingekriegt :-(. könnt ihr mir ev. nochmals helfen. ich möchte folgendes:


    1)
    ohne mouseover und klick möchte ich "Bild 1" angezeigt haben, bei mouseover "Bild 2" und bei klick "Bild 3" (solange bis eine andere seite angeklickt wird)


    2)
    ich habs mal geschafft das bild darzustellen, hat aber weder mouseover noch onklick, noch ein link.



    mit onmouseover="$('#imHoverImage_0').css('display','')" geht dann gar nichts mehr. was müsste ich hier genau editieren?


    3)
    wie klappt das nun mit der verlinkung der bilder auf die entsprechende seite?


    grüsse & danke!

    Du sollst erstmal nur in x5 alles ohne Code erstellen. Ganz normal die Bilder einfügen und verlinken. Dann mal einen link zu deiner Seite bekannt geben dann bekommst du genau die Antwort die du willst.