Bbilder als Links mit Hover Effekt

[Sascha]

Zusätzlich zur Top-Navi würde ich auf meiner Site gerne ein paar Bilder als Links definieren und diese mit einem Hover-Effekt ausstatten. Die unterschiedlichen Bilder sollen jeweils durch ein zweites Bild ausgetauscht werden und natürlich auf unterschiedliche Ziele verweisen.

Hier mal ein Link zu der Site (www.fairtradezone.de), gemeint sind natürlich die Bilder Rechts vom Main-Text.

Im folgenden der entsprechendde Quelltext der Site:

<div id="sidebar">

<a href="geschichte.html"><img src="pics/digging_postholes.jpg" alt="digging_postholes" /></a>
<a href="kooperative.html"><img src="pics/peaceworks_logo.jpg" alt="peaceworks_logo" /></a>
<a href="mitglieder.html"><img src="pics/yadira_and_mom.jpg" alt="yadira_and_mom.jpg" /></a>

<div id="sidebarBot">
<h4>Topic Header</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque et lacus vel eros luctus fringilla. Nulla eget leo. Nullam justo nisi, consectetuer vitae, dictum sit amet, ullamcorper et, turpis. Pellentesque molestie, augue nec congue mollis, nulla velit auctor tortor, molestie cursus est massa ac diam. Praesent est orci, adipiscing dignissim, sollicitudin eu, viverra at, elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

</div>

...und hier das Style-Sheet:
/*

CSS Template by gorotron
http://www.gorotron.com
Provided via Creative Commons Attribution License 3.0
http://creativecommons.org/licenses/by/3.0/

*/

html, body {
 margin:0;
 padding:0;
}

html {
 background:url(../pics/bg.gif);
}

body {
 margin:0 auto;
 width:800px;
 padding:10px;
 text-align:left;
 background-color:#FFF;
 border:1px #466321 solid;
 border-width:0 1px;
 font:11px Arial,Helvetica,sans-serif;
 color:#466321;
}

#left {
 display:inline;
}

h1 {
 font-size:60px;
 font-weight:bold;
 margin:0;
 padding-right:5px;
 display:inline;
}

h2 {
 margin:0;
 display:inline;
 font-size:24px;
 font-weight:normal;
}

h3 {
 margin:0;
 float:left;
}

h4 {
 margin:10px 0 0;
 font-size:12px;
}

p {
 line-height:1.5em;
 text-align:justify;
}

a {
 text-decoration:none;
 color:#921;
}

a:hover {
 text-decoration:underline;
}

img {
 border:0;
}

#banner {
 width:800px;
 height:125px;
 background:#FFF url(../pics/header.jpg) no-repeat;
 margin-bottom:10px;
}

#IEspacer {
 height:97px;
 width:800px;
}

#nav {
 list-style:none;
 text-align:right;
 font-weight:bold;
 margin:0;
 padding:0;
}

#nav li {
 float:right;
 text-align:center;
}

#nav li a {
 font-size:11px;
 display:block;
 width:100px;
 text-decoration:none;
 color:#466321;
 padding:8px 0;
 background-color:#fff;
 }

#nav li a:hover {
 background:url(../pics/navlink.png) no-repeat;
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}

#content {
 float:left;
}

.entry {
 width:564px;
 border:3px solid #e4e4e4;
 padding:10px;
 margin-bottom:10px;
 margin-right:10px;
}

.date {
 display:block;
 text-align:right;
}

.comments {
 display:block;
 text-align:right;
}

.disclaimer {
 font-size: 80%;
}

#sidebar {
 float:left;
 width:200px;
}

#sidebarBot {
 margin-top:10px;
}

#footer, #footer a {
 clear:both;
 text-align:center;
 color:#333;
 font-size:10px;
}

Danke und beste Grüße
Sascha

[bleicher]

Grüße,
CSS oder JS magst du haben?
MFG
bleicher