2013-02-06 6 views
5

Ich bin auf der Suche nach einem Link zu einem Bild in CSS-Stylesheet, so wird es auf den Link nagvigieren, wenn das Bild gedrückt wird.Fügen Sie einen Link zu einem Bild in einem CSS-Stylesheet hinzu

Der Code für das Bild selbst ist:

#logo{ 
    background-image: url(images/logo.png); 
    width: 981px; 
    height: 180px; 
    margin-left: auto; 
    margin-right: auto; 

Was der Code an einen Hyperlink navigieren zu ermöglichen hinzuzufügen ist? Zum Beispiel: Wenn ich es navigieren

+0

Überprüfen Sie bei meiner Bearbeitung bitte. –

Antwort

12

-http://home.com wollte können Sie das nicht tun ...

über CSS die URL Sie auf der background-image setzen nur für das Bild ist.

Via HTML Sie haben die href für den Hyperlink auf diese Weise hinzuzufügen:

<a href="http://home.com" id="logo">Your logo</a> 

Mit text-indent und einige andere css können Sie ein Element anpassen einfach das Bild zu zeigen und darauf klicken, werden Sie gehen zu deinem Link.


EDIT:

Weil ich bin sicher, dass Sie faul suchen sind, welche text-indent do und meinen Code versuchen Sie Text auf dem Bild hatte ich bin wieder hier, Ihnen zu zeigen und erklären, warum meine Lösung ist viel besser:

<a href="http://home.com" id="logo">Your logo name</a> 

Dieser Block von HTMLSEO freundlich ist weil Sie einen Text in Ihrem Link haben!

Wie es mit CSS stylen:

#logo { 
    background-image: url(images/logo.png); 
    display: block; 
    margin: 0 auto; 
    text-indent: -9999px; 
    width: 981px; 
    height: 180px; 
} 

Dann, wenn Sie die andere Antwort zu wählen, nicht über SEO gut kümmern.

+0

Danke, ich habe die Änderungen vorgeschlagen, aber der Text erscheint und der Hyperlink scheint nicht mit dem Bild verknüpft zu sein. Die Website mit Änderungen ist bei http://www.towels.co.za, nicht meine Seite, aber ich versuche, für einen Freund zu beheben und versuchen, meinen Weg um seinen Code zu finden –

+0

Ok, fand den Fehler - er hadn Ich hatte das Style Sheet in der Kopfzeile ... Ich hatte die SEO-Probleme in Betracht gezogen, aber da ich mit CSS zu kämpfen hatte (hauptsächlich seit dem letzten Mal, als ich HTML-Code schrieb, vor fast einem Jahrzehnt ...), steckte ich es hinein Der Hintergrund will nur, dass die Seite nach Bedarf funktioniert –

1

Sie fügen keine Links zu Stylesheets hinzu. Sie dienen zum Beschreiben des Stils der Seite. Sie würden Ihr Markup ändern oder JavaScript hinzufügen, um zu navigieren, wenn auf das Bild geklickt wird.

Basierend nur auf Ihrem Stil würden Sie haben:

<a href="home.com" id="logo"></a> 
0

ich über diesen alten Eintrag grübeln diese gleiche Frage gestolpert. Mein Pflaster für diese Frage war, meinen Kopftext zu einem Link zu machen. Ich habe dann die Farbe geändert und die Textdekoration mit CSS entfernt. Um nun das gesamte Header-Bild zu einem Link zu machen, habe ich das Padding des Anchor-Tags erweitert, bis es nahe am Rand des Header-Bildes angekommen ist. Dies funktionierte zu meiner Zufriedenheit und ich dachte, ich würde es teilen.

0

Sie etwas tun könnte, wie

<a href="http://home.com"><img src="images/logo.png" alt="" id="logo"></a> 

in HTML

-2

ich einen Link zu meinem Bild "android-logo.png" in diesem CSS benötigen, damit der Benutzer auf meine app gehen

#header{ 
background: url(images/sawazine_13.jpg) right top no-repeat, url(images/android-logo.png) left center no-repeat #70af44; 
margin: 0; 
padding: 0; 
height: 120px; 
color: #05310C; 
+0

Es ist unklar, ob Sie versuchen, die Frage zu beantworten oder die gleiche Frage noch einmal zu stellen. Wie in der angenommenen Antwort erwähnt, kann es nicht getan werden. – jlh

Verwandte Themen