Einzelnen Beitrag anzeigen
  #9 (permalink)  
Alt 10.09.2008, 13:22
caja13 caja13 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard Prioblem mit JS: thumbs, bildanzeige in extra div geht nicht

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 &copy;</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);
    }
  }
}

Geändert von caja13 (11.09.2008 um 10:14 Uhr)
Mit Zitat antworten
Sponsored Links