Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Netzwerke>A:hover mit bildern ?

A:hover mit bildern ?

RAPMANkev02.07.0502:35
Hi !
<br>
<br>Hab mir 2 bilder für meine linkbuttons gemacht.
<br>Eins für normal
<br>und eins für drüberfahren und aktiv.
<br>
<br>Geht sowas nicht irgendwie mit dem
<br>A:hover und A:aktiv tag ?
<br>
<br>Ich habs nicht geschafft
<br>
<br>
<br>MFG
<br>Kevin
0

Kommentare

darkzida02.07.0502:41
Nein, das geht meines Wissens nach nur mit Javascript...
0
Arclite
Arclite02.07.0502:43
foo
<br>{
<br> width: breite;
<br> height: höhe;
<br> background-image: url(...);
<br>}
<br>foo:hover
<br>{
<br> background-image: url(...);
<br>}
<br>foo:active
<br>{
<br> background-image: url(...);
<br>}
<br>
<br>&nbsp;
<br>
<br>keine ahnung obs so geht. hab mir das gard nur so zurechtgesponnen. ansonsten probier ich nochmal rum.
0
Arclite
Arclite02.07.0502:44
Wah. Das htmlgedöns wird hier ja verschluckt...
<br>
<br>< a href="...">< div class="foo">&nbsp;< /div>< /a>
0
RAPMANkev02.07.0502:47
Also in denn quelltext tippen geht da nix...
<br>(ich mach immer alles mit quelltext)
0
RAPMANkev02.07.0503:03
Kennt zufällig jemand von euch so einen JavaScript ?
<br>O:-)
0
Tricky
Tricky02.07.0503:10
Neiiiiiiin. nicht mit JavaScript.
<br>Mach es mit CSS
<br>
<br>ul li a:hover { color: #003366; background: url("../deinbild.gif") } /* hover styles */
„"Kauft einer eine Kamera - ist er Fotograf. Kauft einer ein Klavier - hat er ein Klavier."“
0
RAPMANkev02.07.0503:18

<br>
<br>Komisch tut auch nicht so wie ich will,
<br>kannst mal kurz iChat online gehn plz
0
Rantanplan
Rantanplan02.07.0503:27
Mit CSS läßt sich der Rollover-Effekt gut realisieren. Dazu ist kein Quatsch-Javascript nötig. Such mal in Google nach Rollover+CSS, da wirst du mehr finden als dir recht ist
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
RAPMANkev02.07.0503:48
ja da ist echt ne menge.
<br>Leider hab ich noch nichts gefunden das ich kapiere O:-):-[
0
Christian Fries02.07.0504:33
Also in Google "rollover css button" und der erste Treffer gibt Code und Beispiel....
<br>
<br>http://www.google.com/search?client=safari&rls=de-de&q=rollover+css+button&ie=UTF-8&oe=UTF-8
<br>
<br>Üben üben üben.
<br>
<br>Ich find image buttons scheisse. Was, wenn der User die Schriftgröße höher einstellen will (Lesbarkeit).
<br>
0
Tricky
Tricky02.07.0505:00
Buttons zur Navigation würde ich nicht verwenden.
<br>Der Navigationslink sollte als Text ersichtlich sein.
<br>Somit ist auch deine Page in den Suchmaschinen weiter vorne
<br>Der Hintergrund kannst du wechseln. Das machst noch sinn.
<br>Sehe auch unter meiner privaten Page: http://www.scout-out.ch/niki/start.php
„"Kauft einer eine Kamera - ist er Fotograf. Kauft einer ein Klavier - hat er ein Klavier."“
0
Rantanplan
Rantanplan02.07.0505:04
Christian Fries
<br>
<br>Image buttons halte ich auch für Schnickschnack. Was, wenn der Browser keine Bilder darstellen (Lynx) oder der User keine Bilder sehen kann? Man kann auch Rollover-Knöpfe mit Text und einem Hintergrund erzeugen, das geht auch. Beispiele findet man ebenfalls mit den genannten Google-Stichwörtern
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
Rantanplan
Rantanplan02.07.0505:27
Tricky
<br>
<br>Möchte ich einfach mal so sagen: schön dich auf Bildern zu sehen. Eine reale Person. Vielleicht liegt es an der späten Stunde, aber man unterhält sich hier mit seinem Monitor. Da ist ein Bildchen, das zeigt einen Hundehintern, einen Smiley, eine Comicfigur... weiß der Kuckuck was. Ich liebe Internet-Foren, man unterhält sich mit Leuten, die man sonst nie im Leben getroffen hätte. Aber in den meisten Fällen unterhält man sich einfach mit Text, der auf dem Monitor zu sehen ist. Mit einer imaginären Person. Oder mit sich selbst?
<br>
<br>Ich habe deine Website jedenfalls sehr genossen und freue mich, daß ich jetzt bei dem Namen "Tricky" auch eine reale Person vor meinem inneren Auge sehen kann
„Wenn ich nicht hier bin, bin ich auf dem Sonnendeck“
0
MacMark
MacMark02.07.0512:12
Man kann mit CSS auch Links so darstellen, daß sie wie Buttons aussehen, wie hier zu sehen:
<br>http://www.westciv.com/style_master/house/tutorials/quick/buttons/demos/button_demo.html
<br>
<br>Erklärungen dazu hier:
<br>http://www.westciv.com/style_master/house/tutorials/quick/buttons/index.html
<br>
<br>In der Navigation meiner Seite habe ich auch einen CSS-Rollover-Effekt, der einen Pfeil einblendet neben dem Link. Tatsächlich ist der Pfeil eine Hintergrundgraphik, die dem Element im hover-Zustand zugeordnet ist. Das Textelement ist etwas nach rechts versetzt und die Graphik linkbündig mittig. Daher der Effekt.
<br>
<br>Die entsprechende Stelle im Stylesheet:
<br>#navigation ul li.selected {
<br>background-image : url(../images/arrow_selected.gif);
<br>background-repeat : no-repeat;
<br>padding-left : 15px;
<br>background-position : 0% 0%;
<br>font-weight : 700;
<br>}
<br>#navigation ul li a:hover {
<br>background-image : url(../images/arrow_hover.gif);
<br>background-repeat : no-repeat;
<br>padding-left : 15px;
<br>background-position : 0% 0%;
<br>}
<br>
<br>Das sind zwei Regelen, die gültig sind für jeweils ein
<br>< li class="selected"> (list element) innerhalb eines ul (unordered list) Elements innerhalb des navigation Bereich
<br>beziehungsweise ein
<br>< a > Element (link element) im hover Zustand (mouse over) innerhalb eines list elements innerhalb eines unordered list elements innerhalb des navigation Bereichs. Dem wird das genannte Bild als Hintergrund zugeordnet, ohne Wiederholung, wobei 15 Pixel dafür links Platz gelassen werden und das Bild links oben positioniert wird.
„@macmark_de“
0
RAPMANkev02.07.0515:40
Ich glaube das ist für mein Wissen wohl etwas zu hoch gestellt.
<br>Mal sehn ob ich daraus was schaffen kann...
0
RAPMANkev02.07.0516:01
hab immernoch nichts gefunden was ich verstehe...
<br>Ich lass es wohl lieber
0
der schneyra
der schneyra02.07.0518:38
du wirst dich in die kunst des css-designs nicht so schnell einarbeiten können, das erfordert ne menge zeit... vielleicht hilft dir dieser link hier noch ein wenig weiter: http://bartelme.at/articles_detail.asp?detail=34 ansonsten ist immerwieder ein guter tipp: http://de.selfhtml.org
<br>
<br>grüße,
<br>der schneyra
„BAM!“
0
RAPMANkev03.07.0514:29
hab schon alles versucht aber noch nix geschafft...
<br>
<br>Bin wohl einfach zu blöd dazu
<br>:-P
0
Christian Fries03.07.0514:41
Du musst einfach langsam anfangen. Ein CSS welches die Text Farbe oder Font Grösse bei a:hover ändert tut er für den Anfang auch....
<br>
<br>"Bin wohl einfach zu blöd" ist schon eine bedenkliche Aussage in so jungen Jahren. Gibst Du schon auf...?
<br>
0
RAPMANkev03.07.0515:45
Nein, ich gebe nie auf...
<br>
<br>Bin immernoch am versuchen und versuchen.
<br>Aber es tut einfach nicht wie ich will
<br>
<br>Warte wohl lieber noch ein jährchen bis ich so zeugs mache.
<br>Ich versteh daß einfach von hinten und vorne nicht warum das
<br>jedesmal nicht geht
0
Christian Fries03.07.0516:17
Erstelle zwei Dateien. Eine test.html und eine test.css.
<br>Binde das test.css in das test.html ein mit dem link tag (stylesheet).
<br>
<br>Mache in test.html ein div mit class "navidation" darin ein link (a tag) mit einem Text. Erstelle dann in test.css ein
<br>
<br>#navigation a:hover {
<br> color: #f0f;
<br>}
<br>
<br>Lade test.html im Browser. Wenn Du dann mit der Mouse über den Link gehst sollte sich die Textfarbe ändern.
<br>
<br>Wenn es nicht geht, musst Du zunächst prüfen ob Dein test.css überhaupt vom Browser richtig geladen wird.
<br>
<br>Wenn es geht, hast Du eine Plattform von der aus Du Deine Kunst verfeiner kannst....
<br>
<br>
0
Christian Fries03.07.0516:18
Anders gesagt: Schränke mal die Fehlerquellen ein in dem Du sicher bist, dass das CSS File geladen wird und Syntaktisch korrekt ist...
0
Christian Fries03.07.0516:19
PS: Das #navigation bezieht sich auf den class name des div (div class="navigation) in dreieckigen Klammern. Das a:hover bezieht sich auf einen a tag innerhalb des Div
0
MacMark
MacMark03.07.0521:34
Beim letzten Mal, wo ich nachgesehen habe, war # noch ID und nicht class
„@macmark_de“
0
Christian Fries03.07.0522:35
Stimmt. # ist id und . ist class. Danke MM! - Und das meine ich. Erst mal mit einem solchen Beispiel die primitivsten Fehlerquellen ausschlissen
0
Davek
Davek04.07.0500:54
RAPMANkev: schau doch mal hier:
<br>
<br>http://aktuell.de.selfhtml.org/artikel/css/mouseover/
<br>
<br>vielleicht hilft dir das weiter?!
„Keep the Beat“
0
RAPMANkev04.07.0523:41
Naja....
<br>habs wieder nicht geschafft...
<br>Irgendwas tut da nicht so wie es soll...
<br>
<br>vielleicht laß ich es auch einfach
<br>meine homepage ist auch so gut
<br>und wenn sie dann weit ist versuch ich noch solche extras reinzubauen
<br>wie die tollen buttons...
0
RAPMANkev09.07.0519:00
Hab es endlich geschafft !!!!
<br>:D
<br>
<br>nur a:active zickt.
<br>bega dank für eure hilfe leute.
<br>
<br>Danke
<br>Kevin
<br>
<br>
<br>http://www.RAPMANkev.net.tc
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.