1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

kleines "mouseover" problem...

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von andi*h, 01.03.06.

  1. andi*h

    andi*h Gast

    hello,

    sagt, ist es möglich ohne die hilfe von javascript zu realisieren, dass man einen anständigen mouseover-effekt hinbekommt?

    ist ja eigentlich kein grosses problem und es klappt zu 75% auch (onmouseover, onclick und onmouseout..). wenn ich aber auf den link, in diesem fall eine grafik, klicke und dannach die mouse vom button nehme tritt automatisch wieder der mouseout-effekt in kraft. ich hätte aber gern, dass die onclick variante solange aktiv bleibt bis ich mit der mouse wieder auf diesen button, bzw. einen der andern klicke.

    sollte es ohne javascript nicht möglich sein (was ich aber irgendwie nicht glaube da es ja nur an einen befehl liegt), könntet ihr mir dann verraten wie ich es mit javascript mache? ich kenn' mich da nämlich leider noch nicht sooo aus :innocent:

    vielen dank im voraus!

    lg, andi
     
  2. duderino

    duderino Goldparmäne

    Dabei seit:
    26.01.06
    Beiträge:
    556
    Die kannst mit CSS einen Mausover-Effekt machen. Allerdings nicht mit anklicken usw.

    Mit CSS geht es in etwa so:

    Dieser Code verändert die Schriftfarbe von #FFFFFF (weiß) in #000000 (schwarz), wenn man mit der Maus drüber fährt.
     
  3. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.550
    Hallo andi*h,

    für alles, was HTML betrifft, kann ich Dir eigentlich nur die SELFHTML-Seiten wärmstens ans Herz legen.

    Zu Mouseover-Buttons und ähnlichen Effekte mit CSS findest Du z.B. hier tolle Tips, es lohnt sich, diese Seiten mal gründlich zu durchstöbern.

    Lieben Gruß,
    Nathea
     
  4. andi*h

    andi*h Gast

    hello,

    @nathea
    gründlich ist hier wohl das zauberwort, denn self html kenn' ich natürlich und hab auch schonmal geschaut..werd' ich dann aber wohl nochmal machen müssen.

    @duderino
    wie man das mit texten macht weiss ich..
    es geht mir ja aber um grafiken mit zwei effekten mehr ;)

    aber vielen dank, euch beiden.

    lg, andi
     
  5. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    @duderino: Das gezeigte Beispiel funktioniert allerdings nicht im IE/Win, da dieser die Pseudoklassen :link, :hover etc. nur auf das Element »a« anwenden kann.

    Wenn es sich eh um einen Link handelt dann kann dieser problemlos mit a:link a:hover, etc. das Mouseover bekommen. Falls man Buttons nachbauen will, hilft einem die Anweisung display:block, zusammen mit ein paar Angaben zu Höhe/Breite, resp. Seitenabständen.

    Wenn es explizit um einen Hovereffekt um ein anderes als das »a«-Tag geht, hilft nur ein Workaround für den IE, der über ein »behaviour« und damit über JavaScript realisiert wird: http://www.xs4all.nl/~peterned/csshover.html

    Gruß Stefan
     
  6. andi*h

    andi*h Gast

    hello,

    entschuldigt, aber hab ich mich echt so unverständlich ausgedrückt?
    es geht mir um grafiken (in der navigation), wie das mit text-links funktioniert weiss ich und das hab ich auch schon erfolgreich in meine texte eingebaut...

    ich will es ungefähr so wie auf der, von stk verlinkten, seite (onmouseover: der blaue strich erscheint, onclick: der strich bleibt, on mouseout: der strich bleibt immernoch) ..nur das ich halt noch ein bild mehr habe.

    lg, andi
     
  7. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    Das funktioniert nicht nur mit Text, sondern auch mit Grafischen Links so. Du mußt halt den Text der durch das »a«-Tag umstellt ist in einen unsichtbaren Bereich verschieben und per CSS eine Hintergrundgrafik dafür reinladen, bzw. eine alternative Grafik die beim hovern angezogen wird.

    Wenn es Dir darum geht, einen Merker zu setzen auf welcher Seite Du gerade bist (und diesen Navigationeintrag ensprechend hervorzuheben) das kannst nur über ein PHP-Konstrukt zuverlässig lösen. Z.B. in dem Du jeder Seite eine Kennung mit gibst zu welchem Bereich sie gehört. Diese Kennung übergibst dann per PHP als body id="$kennung":
    Code:
    <?php
    $kennung = "eins";
    include "header.inc.php";
    ?>
    Content der Seite aus dem Navigationsbereich "eins".
    <?php
    include "footer.inc.php";
    ?>
    Zusätzlich gibst jedem Navigationpunkt die gleiche Kennung also:
    Code:
    <body id="<?php echo $kennung; ?>">
    <ul>
      <li><a href="#" class="eins">Menü 1</a></li>
      <li><a href="#" class="zwei">Menü 2</a></li>
      <li><a href="#" class="drei">Menü 3</a></li>
    </ul>
    
    Dann kannst zuverlässig im CSS die Hervorhebung angehen:

    Code:
    #eins ul li a.eins, 
    #zwei ul li a.zwei,
    #drei ul li a.drei {text-decoration: underline; } 
    
    Gruß Stefan
     
  8. andi*h

    andi*h Gast

    hallo stefan,

    ich hab zwar vorher nur "beispiele" mit javascript gesehen, daher auch meine anfängliche (gibts das wort überhaut!?) frage, aber ich werd mich auch mal deinem beispiel annehmen.

    vielen dank.

    lg, andi
     
  9. mzet01

    mzet01 Gast

    dumme frage am rande :
    sind texte nicht grafiken vorzuziehen?
    *schulterzuck*
     
  10. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    wenn Du o.g. <ul>-Konstrukt für eine Navigation hernimmst, hast es optimal gelöst. Und per CSS kannst dann aus den Texten immer noch Grafik machen (nur kurz angerissen: der Text wird unsichbar gestellt und durch eine Hintergrundgrafik ersetzt). Da Suchmaschinen, Screenreader und andere alternative Ausgabegeräte sich wie reine Textbrowser verhalten, kommen sie an die Infos alle dran, kriegen lediglich die bunte CSS-Tapete nicht zu Gesicht.

    Eben so: »Die CSS-Umsetzung von Lynx finde ich persönlich am konsequentesten« (aus der reichen Zitatesammlung auf SelfHTML ;))

    Gruß Stefan
     
  11. andi*h

    andi*h Gast

    hello,
    naja..ja und nein.
    was den content angeht gebe ich dir recht, aber für die navigation (und email adressen > spam-schutzmassnahmen), finde ich zumindest, sind grafiken die bessere lösung..

    lg, andi
     
  12. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.550
    Apropos email-Adressen: Was ist eigentlich von der Unicode-Verschlüsselung solcher Daten zu halten?

    Lieben Gruß,
    Nathea
     
  13. andi*h

    andi*h Gast

    hallo nathea,

    also das tool von dem die da reden scheint wohl noch nicht nötig zu sein...
    was die da für dich generieren hab ich jetzt zwar nicht selbst ausprobiert, denke aber dass es wohl das selbe ist wie ich mache:

    einfach im html code das "@" gegen ein "& # 64 ;" (leerstellen rausnehmen weil at daraus auch gleich ein @ macht ;)) austauschen.

    lg, andi
     
  14. andi*h

    andi*h Gast

    hello,

    hab's dann doch mal "ausprobiert" und es ist ja doch ganz anders.
    wird zwar noch nicht wirklich benötigt, aber ich hab's trotzdem mal übernommen :)

    lg, andi
     

Diese Seite empfehlen