✔ grafik als link in HTML

[Maik]

Okay, ich hab jetzt den grundlegenden Fehler entdeckt: der background-image-Eigenschaft fehlt das url(...) ;-)

background-image: url(../pictures/verlauf1.jpg);

 

[chirp]

Juuhuuuu!!

Es funktioniert- auf allen Seiten bis auf einer und das wird schon.

Den Fehler hätte ich nie gefunden, weil ich das "url" rausgelöscht hatte, da ich dachte es steht für: "füge hier den Pfad ein".

Danke Maik, du

Schließen kann das hier nur ein "Golfender Meister" oder?
Kannst du jetzt auf jeden Fall machen.



Danke!

 

[Maik]

Hi,

Schließen kann das hier nur ein "Golfender Meister" oder?
Kannst du jetzt auf jeden Fall machen.

ich bin zwar kein "Golfender Meister", könnte aber als Moderator dennoch den Thread schliessen, was ich aber nicht machen werde, da du evtl. in ein paar Tagen eine weitere Frage zu dem Thema hast, oder ein anderer User sich hier mit seinem Problem einklinken möchte.

Stattdessen hab ich den Thread in deinem Namen als erledigt (= gelöst) markiert.

 

[Chaosengel_Gabriel]

Du bist n G........ , Maik ^^

 

[chirp]

Hallo,

@maik du hattest Recht ich habe nach ein paar Tagen wieder eine Frage:

Meine Frage:

Wie kann ich mehrere Links mit verschieden Grafiken auf einer Seite haben?
Ich denke ich muss für die unterschiedlichen Links auf einer Seite die jeweilig verschiedenen Grafiken in css definieren. Doch wie? Ich mache die Angeben in css doch einfach unter "a" für Link...

Ich danke euch für Lösungsvorschläge

 

[Maik]

Hi,

gib jedem Link eine eindeutige ID (in diesem Beispiel: #ID_1 / #ID_2), und ordne dieser das jeweilige Hintergrundbild zu:

#nav {
margin:0;
padding:0;
list-style:none;
}

#nav a {
display:block;
width:100px; /* Hintergrundbildbreite */
height:25px; /* Hintergrundbildhöhe */
}

a#ID_1:link, a#ID_1:visited {
background:url(pfad/zur/grafik_1.jpg);
}
a#ID_1:hover {
background:url(pfad/zur/grafik_1_hover.jpg);
}

a#ID_2:link, a#ID_2:visited {
background:url(pfad/zur/grafik_2.jpg);
}
a#ID_2:hover {
background:url(pfad/zur/grafik_2_hover.jpg);
}

/* usw. */

<ul id="nav">
    <li><a href="#" id="ID_1">...</a></li>
    <li><a href="#" id="ID_2">...</a></li>
    <!-- usw. -->
</ul>

 

[chirp]

Geht und geht nicht.

Link geht nicht. Bild ist winzig obwohl ich z.B. für Höhe 600px eingetragen habe. Es wechselt aber das Bild bei mouseover. In der einfachen Version Link mit Bild geht alles - Pfadfehler ausgeschlossen. Wie bekommt man die "Aufzählungspunkte"
(
.
.
.
) davor weg, textdecoration:none hilft nicht?
Verwendet man wirklich dieses Zeichen "#" in css (ich kannte nur den ".")

Auf jeden Fall vielen Dank für die Antwort, obwohl jetzt einige Fragen offen sind.

 

[Maik]

Geht und geht nicht.

Link geht nicht. Bild ist winzig obwohl ich z.B. für Höhe 600px eingetragen habe.

Hast du auch für die Links display:block deklariert?

Wie bekommt man die "Aufzählungspunkte"
(
.
.
.
) davor weg, textdecoration:none hilft nicht?

#nav a span { display:none;}

<ul id="nav">
    <li><a href="#" id="ID_1"><span>home</span></a></li>
    <li><a href="#" id="ID_2"><span>news</span></a></li>
    <!-- usw. -->
</ul>

Verwendet man wirklich dieses Zeichen "#" in css (ich kannte nur den ".")

# = ID
. = Klasse

 

[chirp]

Hallo,

irgendwie geht das überhaupt nicht - dabei habe ich den Code genau übernommen.
Der Pfad stimmt auch, geht zumindest bei der "einfachen Version" Link mit Grafik.
Hier mein css:

#nav a
		{	display:block;
		width:605px; /* Hintergrundbildbreite */
		height:405px; /* Hintergrundbildhöhe */
		 }

#nav a span { display:none;}

a#a:link, a#a:visited
				{	background:url(E:\projekt/www/pictures/bild1.jpg); }
a#a:hover
				{	background:url(E:\projekt/www/pictures/bild2.jpg); }

a#b:link, a#b:visited
				{	background:url(E:\projekt/www/pictures/bild3.jpg); }
a#b:hover
				{	background:url(E:\projekt/www/pictures/bild4.jpg); }

und hier der html code:

<ul id="nav">
    		<li><a href="#" id="a"><span>home</span></a></li>
    		<li><a href="#" id="b"><span>news</span></a></li>
		</ul>

Über weitere Hilfe wäre ich sehr dankbar.

 

[subara]

Warum so kompliziert?
Einfach Bild durch img src rein und dort den Link setzen. mit dem befehl a hover genau das gleiche

<a href="link.html"
onmouseover="link.src='link.jpg';"
onmouseout="link.src='link.jpg';">
<img src="link.jpg" name="Link" border="0"/></a>