#gal89sb {
  width:660px;
  height:451px;
}
#gal89bg {
  background:#ccf;
  border:2px outset #000052;
  text-align:left;
  padding:8px;
}
#gal89vp {
  width:640px;
  height:431px;
  top:0px;
  left:0px;
}

#gal89vp {
  position:relative;
}
#gal89vp a, #gal89vp span {
  position:absolute;
}
#gal89bg, #gal89sb {
  position:static;
}
#gal89vp span.imgbigi, #gal89vp span.imgsmli, #gal89vp span.imgdescm, #gal89vp span.imgdesci {
  position:static;
}
#gal89vp * {
  text-decoration:none;
}
#gal89vp span.imgsmlo, #gal89vp span.imgbigo, #gal89vp span.xxl {
  background:#fff no-repeat center;
  border:2px outset #000052;
}
#gal89vp a:hover span.imgsmlo, #gal89vp span.imgbigo {
  border-style:groove;
}

#gal89vp span.imgbigo {
  right:0px;
  top:0px;
  background:url('http://www.pixels4u.de/images/content/hp/ldg.gif') no-repeat center;
}
#gal89vp span.imgbigi {
  left:0px;
  top:0px;
  width:0px;
  height:0px;
  background:no-repeat center;
  cursor:default;
}

#gal89vp a:hover span.imgbigi, #gal89vp a#gal89b00 span.imgbigi {
  width:400px;
  height:400px;
}

#gal89vp a {
  display:block;
  cursor:default;
}
#gal89vp span.area, #gal89vp span.imgbigo, #gal89vp span.imgbigi, #gal89vp span.imgsmlo, #gal89vp span.imgsmli, #gal89vp span.imgdesci, #gal89vp span.imgdescm, #gal89vp span.imgdesco {
  display:block;
}
#gal89vp span.area {
  visibility:hidden;
  width:0;
  height:0;
}
#gal89vp a:hover span.area, #gal89vp a#gal89b00 span.area {
  visibility:visible;
  width:100%;
  height:100%;
}
#gal89vp a {
  z-index:3;
}
#gal89vp a:hover {
  z-index:2;
}
#gal89vp a#gal89b00 {
  z-index:1;
}
#gal89bg, #gal89vp {
  z-index:0;
}
<!-- (Positionierung XXL-Zeichen) -->
#gal89vp span.xxl {
  padding:1px;
  right:-4px;
  bottom:-4px;
  font-size:8px;
  line-height:1em;
  color:#000;
  font-family:arial,sans-serif;
  text-align:center;
  cursor:pointer;
}

#gal89vp span.imgdesco {
  left:0px;
  bottom:0px;
  width:278px;
  height:21px;
  background:#fff;
}
#gal89vp span.imgdescm {
  padding:2px;
  border:2px groove #000052;
}
<!-- (Textzeile) -->
#gal89vp span.imgdesci {
  width:270px;
  height:13px;
  font-family:verdana,sans-serif;
  font-size:11px;
  line-height:13px;
  font-style:normal;
  color:#000052;
  white-space:nowrap;
  overflow:hidden;
  cursor:default;
}

.hint {
  width:616px;
  text-align:center;
  font-size:10px;
  color:#999;
  font-family:verdana,sans-serif;
}

#gal89vp span.imgsmli { width:50px; height:50px; }
#gal89vp a { width:54px; height:54px; }
#gal89vp span.area { left:0px; top:0px; }
#gal89vp span.imgsmlo, #gal89vp span.imgsmli { left:0px; top:0px; }

a#gal89b01, a#gal89b01:hover span.imgsmlo { left:0px; top:0px; }
a#gal89b02, a#gal89b02:hover span.imgsmlo { left:58px; top:0px; }
a#gal89b03, a#gal89b03:hover span.imgsmlo { left:116px; top:0px; }
a#gal89b04, a#gal89b04:hover span.imgsmlo { left:174px; top:0px; }
a#gal89b05, a#gal89b05:hover span.imgsmlo { left:0px; top:58px; }
a#gal89b06, a#gal89b06:hover span.imgsmlo { left:58px; top:58px; }
a#gal89b07, a#gal89b07:hover span.imgsmlo { left:116px; top:58px; }
a#gal89b08, a#gal89b08:hover span.imgsmlo { left:174px; top:58px; }
a#gal89b09, a#gal89b09:hover span.imgsmlo { left:0px; top:116px; }
a#gal89b10, a#gal89b10:hover span.imgsmlo { left:58px; top:116px; }
a#gal89b11, a#gal89b11:hover span.imgsmlo { left:116px; top:116px; }
a#gal89b12, a#gal89b12:hover span.imgsmlo { left:174px; top:116px; }
a#gal89b13, a#gal89b13:hover span.imgsmlo { left:0px; top:174px; }
a#gal89b14, a#gal89b14:hover span.imgsmlo { left:58px; top:174px; }
a#gal89b15, a#gal89b15:hover span.imgsmlo { left:116px; top:174px; }
a#gal89b16, a#gal89b16:hover span.imgsmlo { left:174px; top:174px; }
a#gal89b17, a#gal89b17:hover span.imgsmlo { left:0px; top:232px; }
a#gal89b18, a#gal89b18:hover span.imgsmlo { left:58px; top:232px; }
a#gal89b19, a#gal89b19:hover span.imgsmlo { left:116px; top:232px; }
a#gal89b20, a#gal89b20:hover span.imgsmlo { left:174px; top:232px; }
a#gal89b21, a#gal89b21:hover span.imgsmlo { left:0px; top:290px; }
a#gal89b22, a#gal89b22:hover span.imgsmlo { left:58px; top:290px; }
a#gal89b23, a#gal89b23:hover span.imgsmlo { left:116px; top:290px; }
a#gal89b24, a#gal89b24:hover span.imgsmlo { left:174px; top:290px; }
a#gal89b25, a#gal89b25:hover span.imgsmlo { left:0px; top:348px; }
a#gal89b26, a#gal89b26:hover span.imgsmlo { left:58px; top:348px; }
a#gal89b27, a#gal89b27:hover span.imgsmlo { left:116px; top:348px; }
a#gal89b28, a#gal89b28:hover span.imgsmlo { left:174px; top:348px; }

#gal89vp a:hover, #gal89vp a#gal89b00 {
  left:0px;
  top:0px;
  width:640px;
  height:431px;
}