Hintergrundbild verlinken

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.

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;
}

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