Zur Navigation

Hintergrundbild verlinken

1 Christian

Salve

Ich möchte gerne ein Hintergrundbild verlinken. Mir war als ob ich die Frage schon einmal gestellt hätte... aber ich finde den Beitrag nicht mehr.

Kann ich das machen im CSS-File?

Christian

Artikel 19 der UNO-Resolution 217A3 10.12.1948

07.09.2007 10:23

2 Jörg

Hallo Christian,

mit CSS kannst du keine Links setzen. Verlinken kannst du nur das Element, welches mit dem Hintergrundbild versehen ist. Dazu setzt du dort einen Link rein, der die gleiche Breite und Höhe erhält, sowie die Eigenschaft display:block. Dann füllt der Link das Element - bzw. optisch das Hintergrundbild - vollständig aus.

07.09.2007 10:57 | geändert: 07.09.2007 10:58

3 Christian

Ciao Jörg

Danke für die rasche Antwort... Tönt kompliziert... ich löse es wohl anders... übrigens, schau mal rein, ich habe das WD leicht umgestaltet .. resp. die Startseite: webmaster-directory.biz

Gruss
Christian

Artikel 19 der UNO-Resolution 217A3 10.12.1948

07.09.2007 11:07

4 kadees

Vor langer Zeit schon bei den e-workers gefunden (den Tipp findest du etwa in der Mitte der Seite)

Hintergrundbild verlinken
So lassen sich alle möglichen Buttons und Illustrationen verlinken, obwohl sie als Hintergrund-Grafik(en) referenziert sind (um in der 'Nur_Text_Ansicht' unsichtbar zu bleiben).
<h3>Hintergrundbild verlinken</h3>
	<div id="eworx2">
<h4>
<a href="#" title="Die e-workers"><span>e-workers.de</span></a>
</h4>
	</div>


/* Hintergrundbild verlinken */
#eworx2 span {
display: none;
}
#eworx2 a {
display: block;
background-image: url(../images/banner234.jpg);
background-repeat: no-repeat;
width: 234px;
height: 60px;
background-color: #fff;
color: #000;
}

Gruß Dieter

08.09.2007 17:29 | geändert: 08.09.2007 17:31

6 Mandy (Gast)

Hallo Dieter...

könntest Du mir das vielleicht anhand meines Codes...etwas näher erläutern?

Ich möchte doch sooo gerne für meinen Sohn ne tolle Seite baun...aber ich schaffe es einfach nicht...


Das ist mein CODE:


<p><style type="text/css"> { } </style><style type="text/css"> body { background-color: rgb(0, 0, 0); background-position: center top; background-repeat: no-repeat; background-attachment: fixed; } table, tr, td { background-color: transparent; border: 4px; } table table { border: 4px; } table table table table{ border: 4px; } table table table { border-width: 4px; border-color: rgb(0, 0, 0); border-style: solid; background-color: transparent; } table table table td { background-color: #FF0000; filter:alpha(80); -moz-opacity:0.; opacity: 0.80; -khtml-opacity:0.; } table table table table td { filter:none;} body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 { font-family: microsoft sans serif; font-size: 11px; color: #F0F3F8; font-weight: bold; font-style: normal; text-decoration: none; } .nametext { padding: 5px; font-family: microsoft sans serif; font-size: 11px; color: #F0F3F8; font-weight: bold; font-style: normal; text-decoration: none; display: block; } .whitetext12, .orangetext15 { font-family: microsoft sans serif; font-size: 11px; color: rgb(32, 87, 136); font-weight: normal; font-style: normal; text-decoration: none; } a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover { color: rgb(255, 255, 255); font-weight: bold; font-style: normal; text-decoration: none; } a.navbar:hover, a.man:hover, a:hover { color: rgb(204,0,0); font-weight: bold; font-style: normal; text-decoration: underline; } .badge { position: absolute; left: 1px; top: 1px; } </style><br />
<br />
<br />
<style type="text/css"> body{ background-image: url("http://barbie25.beepworld.de/files/ferraribino.jpg")} </style><style type="text/css"> { } </style><img style="visibility: hidden; width: 0px; height: 0px" height="0" alt="" width="0" border="0" src="" /></p>



Und jetzt möchte ich da z.bsp. die kleinen Ferraris außenrum einzeln verlinken(am liebsten als Mouseover-aber man kann ja nicht alles haben;-) zu je einer extra Unterseite...und meinen Sohn auf dem Foto oben den würde ich auch gerne verlinken wollen zu einer Unterseite...doch wie mache ich das denn?so das es in jedem Browser und jeder Monitorgröße gleich aussieht?

Könntest Du mir da vielleicht helfen...oder ein anderer der sich damit gut auskennt?

liebes Grüßle und vielen Dank im Voraus ;-)

Mandy

22.01.2009 03:53

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]