HTML: Textbutton mit Grafik & Rollover

amiga-news.de Forum > Programmierung > HTML: Textbutton mit Grafik & Rollover

[ - Suche - Neue Beiträge - Registrieren - Login - ]

-1-

[ - Beitrag schreiben - ]

29.04.2008, 15:24 Uhr

Heinzi110
Posts: 46
Nutzer

Hallo zusammen. Ich versuche mich gerade ein wenig mit HTML auseinander zu setzen.
Soweit klappt es auch ganz gut, nutze dafür den Netobject Fusion 4, der war auf irgendsoeiner Heft-CD drauf.

Ich möchte nun eine Navigation haben, die aus normalen Text besteht und wenn man mit der Maus darüberfährt soll recht neben dem Text eine kleine Grafik erscheinen, wie mache ich das?

Dad der Text andersfarbig wird klappte schonmal, aber so möchte ich das nicht. Ich möchte auch keine Grafikbuttons haben, sondern nur den Text mit ner kleinen Grafik daneben, wenn der Mauszeiger drüber ist?
Wie positioniere ich die Grafik und wie rufe ich sie auf?

Super währ, wenn jemand nen Beispielcode hätte.

Ich versuche mal eine optische Darstellung wie es ausehen sollte:

Link 1

<-das soll die Grafik sein
Link 2
(Text)
Link3
Link4

Hoffe mir kann jemand helfen, sage schonmal danke für Tipps

gruß
heinzi110

[ - Antworten - Zitieren - Direktlink - ]

29.04.2008, 15:44 Uhr

Mad_Dog
Posts: 1944
Nutzer

@Heinzi110:

Standardantwort: SelfHTML
--
http://www.norman-interactive.com

[ - Antworten - Zitieren - Direktlink - ]

29.04.2008, 17:34 Uhr

Holger
Posts: 8116
Nutzer

@Heinzi110:
Das kommt natürlich darauf an, wie viele Browser damit klar kommen sollen. Die eleganteste und sauberste und damit vermutlich von den wenigsten Browsern unterstützte sieht so aus:

html code:

<html>
<head>
<style type="text/css">
<!--
body { line-height:29px; }
a:hover:after { vertical-align:baseline;
  content:url(http://www.amiga-news.de/forum/themes/icons/flenn.gif) }
-->
</style>
</head>
<body>
<a href="bla.html">Bla</a><br>
<a href="foo.html">Foo</a><br>
<a href="bar.html">Bar</a><br>
</body>
</html>

mfg

--
Good coders do not comment. What was hard to write should be hard to read too.

[ - Antworten - Zitieren - Direktlink - ]

29.04.2008, 17:42 Uhr

Heinzi110
Posts: 46
Nutzer

@Mad_Dog:

da hab ich schon geschaut, aber nicht das gefunden was ich suche, ist alles ziemlich verwirrend dort. Aber trotzdem danke für den Tipp.

@Holger

super, das ist fast das was und wie ich es brauche

Der Firefox kommt damit zurecht, der IE leider nicht.
Wenn Du einen ähnlichen Codeschnipsel hast, der mit Firefox und IE funktioniert, würde das schon ausreichen, vielen vielen Dank.

gruß
Heinzi

[ - Antworten - Zitieren - Direktlink - ]

29.04.2008, 20:27 Uhr

Holger
Posts: 8116
Nutzer

Das hier sollte auch im IExplorer funktionieren:

Html code:

<html>
<head>
<style type="text/css">
<!--
body { line-height:20px; }
a { padding-right:20px; }
a:hover { 
  background:url(http://www.amiga-news.de/forum/themes/icons/flenn.gif)
             no-repeat right center;
}
-->
</style>
</head>
<body>
<a href="bla.html">Bla</a><br>
<a href="foo.html">Foo</a><br>
<a href="bar.html">Bar</a><br>
</body>
</html>

mfg

--
Good coders do not comment. What was hard to write should be hard to read too.

[ - Antworten - Zitieren - Direktlink - ]

30.04.2008, 07:57 Uhr

Heinzi110
Posts: 46
Nutzer

@Holger:

super, meinen allerherzlichsten Dank, das klappt einwandfrei.

Eine abschliessende Frage noch, kann man anstatt den URL-Pfad der Grafik auch z.B. nen Grafikordner angeben
(lokales Verzeichnis, wie die homepage)
oder muss es immer die URL-Angabe sein?
(background:img src=grafik/bild.jpg) oder ähnlich?

Ist nicht zwingend notwendig, wär aber schön, da man das ganze dann offline auf dem Rechner ansehen kann,
ohne etwas hochzuladen und online zu sein.

Danke und Gruß
Heinzi

[ - Antworten - Zitieren - Direktlink - ]

30.04.2008, 12:55 Uhr

DrNOP
Posts: 4118
Nutzer

@Heinzi110:
Die Seite (sprich: der Browser, der die Seite anzeigt) muß halt Zugriff auf die Dateien haben. Wenn du einen lokalen Pfad angibst wie DH0:Bilder/meineHTML/gif oder so, dann versucht der Browser eben, diesen Pfad auf dem Rechner aufzulösen, auf dem er im Moment läuft.

Du kannst auch relative Pfade nehmen. Falls du die Seite mit allem zugehörigen Kram zusammenpackst und z.B. in einem Archiv verteilen willst, kannst du auch die Seite in das Basisverzeichnis legen, Bilder etc. in ein Unterverzeichnis "Bilder", und dann relativ darauf zugreifen mit Bilder/hintergrund.gif oder so.
--
Signaturen mit mehr als zwei Zeilen gehen mir auf den Wecker

[ - Antworten - Zitieren - Direktlink - ]

30.04.2008, 13:11 Uhr

rbn
Posts: 2001
Nutzer

Du kannst die a's auch als {display:block} angeben.

Dann weist du dem ganzen eine Größe zu {width:200px;height:80px;}

Mit ":hover" hast du ja schon Bekanntschaft gemacht. Also weist du dem "a:hover" dann einfach eine andere hintergrundgrafik zu, bei der das Icon enthalten ist.

Im Nicht ":hover" Zustand nimmst du dann eben die Hintergrundgrafik ohne Icon mit drinne.

Sollte astrein in allen Browsern funktionieren. Wenn du zusätzlich bei den gewünschten Links {margin:0px;padding:0px;} angibst, sollten auch die Abstände in allen Browsern gleich aussehen.

Beispiel:

html:

...

<a id="link">Klick mich an!</a>

...

css:

...

#link {
width:200px;
height:80px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-image:url(hintergrund-ohne-bild.png);
}

#link:hover {
background-image:url(hintergrund-mit-bild.png);
}

...

======

Den Text in der "Linkbox" richtest du dann mit dem im css enthaltenen padding aus. Die Angaben stehen in der Reihenfolge für Oben, Rechts, Unten, Links. Natürlich kannst du dem enthaltenen Text auch noch eine bestimmte Schrift wie üblich zuweisen.

Viel Spaß beim Probieren.

(Hoffentlich hab ich mich jetzt nicht vertippt. Wie immer in Eile ... )

EDIT: Alternativ kannst du das natürlich auch mit JavaScript umsetzen (wenn es auf IBrowse laufen soll ...) Aber dann darfst du grundsätzlich kein css und html 4.01 benutzen. Also am besten Finger weg und wie oben lösen.

rbn

--
Aerocool "Baydream", DFI Infinity CFX3200-M2/G , AMD Athlon 64 X2 3800+ 2001 MHz (Manchester), Sapphire RadeonX1650 PRO 256 MB 667MHz, MDT 4 x 1024 MB DDR2 667 CL 5 Dual Channel 128 Bit, Maxtor IDE 200 GB, LG DVD-RAM

[ Dieser Beitrag wurde von rbn am 30.04.2008 um 13:12 Uhr geändert. ]

[ - Antworten - Zitieren - Direktlink - ]

02.05.2008, 09:42 Uhr

Holger
Posts: 8116
Nutzer

Zitat:
Original von Heinzi110:
@Holger:

super, meinen allerherzlichsten Dank, das klappt einwandfrei.

Eine abschliessende Frage noch, kann man anstatt den URL-Pfad der Grafik auch z.B. nen Grafikordner angeben
(lokales Verzeichnis, wie die homepage)
oder muss es immer die URL-Angabe sein?
(background:img src=grafik/bild.jpg) oder ähnlich?

Lass Dich von dem Begriff URL nicht abschrecken. Relative Pfadangaben sind gültige URLs. Schreib einfach background:url(Unterverzeichnis/Datei) und alles ist gut. Pfade wie background:url(Datei) (im gleichen Verzeichnis) oder background:url(../../Unterverzeichnis/Datei) (zwei höher, dann wieder eins runter) sind auch gültig.

mfg

--
Good coders do not comment. What was hard to write should be hard to read too.

[ - Antworten - Zitieren - Direktlink - ]

02.05.2008, 16:56 Uhr

Heinzi110
Posts: 46
Nutzer

vielen Dank an alle für diese super Hilfe und leicht verständlichen Erklärungen.

Nun klappt es so wie ich mir vorgestellt habe.

Ich wünsche allen ein tolles Wochenende und nochmals danke

viele Grüße von Heinzi

[ - Antworten - Zitieren - Direktlink - ]

-1-

[ - Beitrag schreiben - ]

amiga-news.de Forum > Programmierung > HTML: Textbutton mit Grafik & Rollover

[ - Suche - Neue Beiträge - Registrieren - Login - ]