• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Es regnet, ist neblig und kalt, alle sind krank und der Chef wird zunehmend cholerisch. Das Thema des Monats ist also folgerichtig --> Das Grau(en)
    Wir sind gespannt, war Euch dazu einfällt! Zum Wettbewerb --> Klick

kleines "mouseover" problem...

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
 
duderino

duderino

Prinzenapfel
Registriert
26.01.06
Beiträge
555
Die kannst mit CSS einen Mausover-Effekt machen. Allerdings nicht mit anklicken usw.

Mit CSS geht es in etwa so:
.content {
font-family: Tahoma;
font-size: 12px;
color: #FFFFFF;
line-height: 15px;
}
.content:hover {
font-family: Tahoma;
font-size: 12px;
color: #00000;
line-height: 15px;
}
Zum Vergrößern anklicken....

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

Nathea

Admin
AT Administration
Registriert
29.08.04
Beiträge
15.169
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
 

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
 
stk

stk

Grünapfel
Registriert
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
 

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
 
stk

stk

Grünapfel
Registriert
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
 

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
 

mzet01

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

stk

Grünapfel
Registriert
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
 

andi*h

Gast
hello,
mzet01 schrieb:
sind texte nicht grafiken vorzuziehen?
Zum Vergrößern anklicken....
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
 

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
 

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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten