Habe es nun mit javascript versucht, aber es funktioniert nicht???. Kenne mich aber mit JS bisher leider gar nicht aus.
Hoffe auf eure Hilfe.
Was mir an dieser Lösung, wenn sie denn mal funktioniert, fehlt ist dass noch ein Beschreibungstext zu dem Bild, im div "Content" erscheinen soll.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="styles/navi.css" type="text/css" media="all">
<link rel="stylesheet" href="styles/galerie.css" type="text/css" media="all">
<script type="text/javascript" src="/js/picture.js"></script>
</head>
<body>
<div id="wrap_around">
<!-- HEADER -->
<div id="header">
<div id="logo"></div>
<div id="header_effekt_li"></div>
<div id="header_effekt_re"></div>
<div id="header_blatt"></div>
<div id="logo_text"></div>
<div id="header_greybar"></div>
</div>
<!-- ENDE HEADER -->
<!-- NAVIGATION -->
<ul id="menu" class="grey">
<li><a href="index.html">Home</a></li>
<li><a href="agentur.html">Agentur</a></li>
<li class="sub"><a href="#">Leistungen<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="leistung_print.html">Print</a></li>
<li><a href="leistung_internet.html">Internet</a></li>
<li><a href="leistung_foto.html">Fotografie</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub"><a href="#">Referenzen<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="ref_print.html">Print</a></li>
<li><a href="ref_web.html">Internet</a></li>
<li><a href="ref_foto.html">Fotografie</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<!-- NAVIGATION ENDE -->
<!-- Bildbereich -->
<div id="bildbox" class="ref_p"></div>
<div id="ausblenden"></div>
<div id="bilder_bildbox"></div>
<!-- side-->
<div id="side"><img src="img/header_hg_re_1.jpg" width=43 height=206 border=0 alt=""></div>
<!-- Greybar down -->
<div id="greybar_down"></div>
<!-- Blatt effekt links -->
<div id="blatt_li"></div>
<!-- CONTENT -->
<div id="content">
<h1>REFERENZEN PRINT</h1>
<p>bbbp>
<p>blabla</p>
<p>blablap>
</div>
<!-- CONTENT ENDE -->
<!-- GALERIE_Thumbs -->
<div id="galerie_thumbs">
<ul>
<li><a onclick="KLasseAendern('elka01')"><img src="img/elka01_th.jpg" alt="" title=""></a></li>
<li><a onclick="KLasseAendern('elka02')"><img src="img/elka02_th.jpg" alt="" title=""></a></li>
<li><a onclick="KLasseAendern('elka03')"><img src="img/elka03_th.jpg" alt="" title=""></a></li>
<li><a onclick="KLasseAendern('elka04')"><img src="img/elka04_th.jpg" alt="" title=""></a></li>
</ul>
</div>
<!-- Blatt effekt rechts -->
<div id="blatt_re"></div>
<!-- FOOTER -->
<div id="footer">
<p>COPYRIGHT ©</p>
</div>
</div>
</body>
</html>
styles.css
Code:
html{
height: 101%;
}
body{
background-color: #EDEDED;
text-align: center;
}
*{
margin: 0;
padding: 0;
font: 11px/1.3 Arial, Verdana, sans-serif;
color: #646464;
text-align: left;
}
/* *********************************************** */
/* Page */
/* *********************************************** */
#wrap_around{
width: 708px;
height: 708px;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -354px 0 0 -354px;
border: 1px solid #c0c0c0;
background-color:#fff;
}
/* *********************************************** */
/* Header */
/* *********************************************** */
#header{
width: 708px;
height:163px;
position: relative;
display: block;
}
#logo{
width: 90px;
height: 86px;
background: url(../img/logo.jpg) no-repeat;
display: block;
position: relative;
top: 51px;
left: 66px;
}
#logo_text{
width: 107px;
height: 45px;
position: absolute;
background: url(../img/logo_text.gif) no-repeat;
top: 90px;
right: 58px;
}
#header_effekt_li{
width: 14px;
height: 146px;
position: absolute;
background: url(../img/bridge_effect_li1.jpg) no-repeat;
top: 1px;
left: 212px;
z-index: 100;
}
#header_effekt_re{
width: 14px;
height: 146px;
position: absolute;
background: url(../img/bridge_effect_re1.jpg) no-repeat;
top: 1px;
right: 30px;
z-index: 100;
}
#header_blatt{
width: 438px;
height: 146px;
position: absolute;
top: 0;
right: 44px;
background: url(../img/blatt_hg_up.jpg) repeat-x;
}
#header_greybar{
width: 708px;
height: 17px;
position: absolute;
top: 147px;
background: url(../img/greybar_up.jpg) no-repeat;
z-index: 0;
}
/* *********************************************** */
/* Bildbox */
/* *********************************************** */
#bildbox{
position: absolute;
width: 440px;
height: 206px;
}
/* Inhalt bildbox */
.index{
background:url(../img/header_home.jpg) no-repeat;
}
.agentur{
background:url(../img/header_agentur.jpg) no-repeat;
}
.leistung_p{
background:url(../img/header_leistungen_print.jpg) no-repeat;
}
.leistung_i{
background:url(../img/header_leistungen_web.jpg) no-repeat;
}
.leistung_f{
background:url(../img/header_leistung_foto.jpg) no-repeat;
}
.ref_p{
background:url(../img/header_ref_print.jpg) no-repeat;
}
.ref_i{
background:url(../img/header_ref_web.jpg) no-repeat;
}
.ref_f{
background:url(../img/header_ref_foto.jpg) no-repeat;
}
/* side und unter bildbox */
#side{
position: absolute;
top: 163px;
left: 665px;
}
#greybar_down{
width: 708px;
height:17px;
position: absolute;
top:369px;
left: 0;
background: url(../img/greybar_down.jpg) no-repeat;
}
/* *********************************************** */
/* Content */
/* *********************************************** */
#blatt_li{
position: absolute;
width:15px;
height:162px;
top: 386px;
left: 211px;
background: url(../img/bridge_effekt_li2.jpg) no-repeat;
}
#blatt_re{
position: absolute;
width:15px;
height:162px;
top: 386px;
left: 664px;
background: url(../img/bridge_effect_re2.jpg) no-repeat;
}
#content{
position: absolute;
width:378px;
height:260px;
top: 386px;
left: 226px;
padding: 20px 30px 40px 30px;
background: url(../img/blatt_hg.jpg) repeat-x;
}
#content ul{
list-style: none;
list-style-image: url(../img/orb_mini.png);
width: 166px;
margin-top: 15px;
float: left;
overflow: hidden;
}
#content ul li{
font-size: 12px;
margin-bottom: 8px;
margin-left: 20px;
padding-left: 5px;
white-space: nowrap;
}
.abstand{
margin-right: 40px;
}
#u_schrift{
width: 135px;
float:right;
}
#u_schrift p{
padding_left: 20px;
}
/* ***********************************************+ */
/* Kontaktformular */
/* *********************************************** */
.bez{
text-align:right;
margin: 0 15px 4px 40px;
width: 30%;
float: left;
}
.inp{
margin-bottom: 4px;
width: 50%;
}
.re{
margin-top: 10px;
margin-left:292px;
}
/* *********************************************** */
/* sidebar */
/* *********************************************** */
#adresse{
position: absolute;
left: 0;
top: 441px;
width: 200px;
}
#adresse p{
text-align: right;
}
/* *********************************************** */
/* Footer */
/* *********************************************** */
#footer{
position: absolute;
width:428px;
height:17px;
bottom: 0px;
padding-right: 10px;
left: 226px;
}
#footer p{
color: #959595;
font-size: 9px;
text-align: right;
}
/* *********************************************** */
/* allgemeingültig */
/* *********************************************** */
h1{
font-size: 19px;
font-weight: normal;
color: #646464;
margin-bottom: 10px;
}
p{
margin-bottom: 10px;
}
img{
behavior: url(iepngfix.htc);
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
border: 1px solid red;
galerie.css
Code:
/* *********************************************** */
/* Galerie */
/* *********************************************** */
#bilder_bildbox{
position: absolute;
width: 440px;
height: 206px;
display: none;
}
/* Bildbox Galerie */
#bildbox_galerie{
position: relative;
width: 440px;
height: 206px;
display:block;
background:url(../img/background_bildbox.jpg) #ccc;
}
/* Inhalt Bildbox_galerie */
.elka01{
background:url(../img/elka01.jpg) no-repeat;
}
.elka02{
background:url(../img/elka02.jpg) no-repeat;
}
.elka03{
background:url(../img/elka03.jpg) no-repeat;
}
.elka04{
background:url(../img/elka04.jpg) no-repeat;
}
/* *********************************************** */
/* sidebar */
/* *********************************************** */
#galerie_thumbs{
position: absolute;
left:0;
top: 386px;
width: 184px;
margin: 25px 0 0 20px;
}
#galerie_thumbs ul{
list-style:none;
}
#galerie_thumbs ul li{
float: left;
width: 80px;
height: 38px;
margin:0 10px 10px 0;
border: 1px solid #878787;
}
#galerie_thumbs ul li :hover{
border: 1px groove #878787;
}
Javascript
Code:
function KLasseAendern (test){
document.getElementById('bildbox').className="nothing";
//document.getElementById('bildbox_galerie').style.display="none";
document.getElementById('ausblenden').style.display="none";
document.getElementById('bilder_bildbox').style.display="block"
imageId = 'bilder_bildbox';
image = document.getElementById(imageId);
document.getElementById('bilder_bildbox').className=test;setOpacity(image, 20);
image.style.display="block";
fadeIn(imageId,20);
/* deactivate active links */
var x = document.getElementsByTagName('a');
for (var i = 0; i < x.length; i++)
{
if (x[i].className == "active")
{
x[i].className = "weg";
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 20;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}