zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bildergalerie? Bild soll in einem Div, text in anderem Div erscheinen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.09.2008, 12:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard Bildergalerie? Bild soll in einem Div, text in anderem Div erscheinen?

Hallo,
habe im netz schon viel geschaut, aber nicht das gefunden was ich brauche.
Hoffe ihr könnt mir weiterhelfen
Auf der Referenzseite sollen im Bereich Sidebar thumbs erscheinen, durch anklicken eines Thumbs soll das Bild in dem Div "Bildbox" angezeigt werden und ein Beschreibungstext dazu im Div "Content". Wie mache ich das?
Grüsse caja
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.09.2008, 14:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Ähm, sind die 3 divs auf einer Seite oder wie? Du musst schon ein bisschen mehr dazu schreiben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.09.2008, 14:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard

Vielleicht ist es am einfachsten zusammen mit dem Code
WEnn die Referenzseite aufgerufen wird, erscheint im DIV "Bildbox" ein Bild. links unter der Navi sollen Thumbs zu sehen sein. Durch anklicken eines Thumbs soll das Bild in gross in dem DIV "Bildbox" zusehen sein und ein passender Text im DIV "Content".
Ich könnte natürlich für jeden Thumb eine neue html Seite erstellen, das ist aber alles andere als elegant, aber momentan meine einzige idee.
Hoffe ihr habt bessere Ideen
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>
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;

Geändert von caja13 (10.09.2008 um 12:11 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.09.2008, 15:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Sowas hier? Galleria Demo 1

Von solchen Demos gibt es aber ziemlich viele.

Lightweight Image Gallery
Mit Zitat antworten
  #5 (permalink)  
Alt 08.09.2008, 16:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard

ja, vom Prinzip her schon. Aber bei mir sind thumbs und "bildbox" ja nicht in einem div, sondern in 2 verschiedenen. Geht das dann überhaupt? Und außerdem soll ja in einem 3. DIV "Content" ein Text dazu erscheinen(un der vorhandene "überschrieben" werden)
Mit Zitat antworten
  #6 (permalink)  
Alt 08.09.2008, 17:10
Neuer Benutzer
neuer user
 
Registriert seit: 01.11.2007
Beiträge: 21
brauni54 befindet sich auf einem aufstrebenden Ast
Standard

was ist, wenn du die dritten div per JavaScript einblendest? sowas in der art wie bild anklicken und der div-container wird geöffnet?
JavaScript:
Code:
function showhide(divid) {
obj = document.getElementById(divid);
obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
}
und bei den thumb-link dies einfügen:
onClick="showhide('box1');"

der text sollte dann hier drinnen stehen:
<div id="box1" style="display:none;"></div>

dann mußt du nur noch via css die box1 formatieren. ich hoffe du kannst was damit anfangen
Mit Zitat antworten
  #7 (permalink)  
Alt 08.09.2008, 17:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Bei der ersten Demo ist das ja auch alles so. 3 verschiedene divs, bzw. in dem Beispiel ist es ein div, eine Liste und ein span für den Text, der immer überschrieben wird. Also eigentlich kein Problem.
Mit Zitat antworten
  #8 (permalink)  
Alt 09.09.2008, 10:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.07.2008
Beiträge: 29
caja13 befindet sich auf einem aufstrebenden Ast
Standard

Danke euch erstmal für eure Tipps. Ich schau mal was ich hinbekomme. Bin da noch ziemlicher anfänger. Wenn ich da gar nicht klar komme,melde ich mich wieder
gruss caja
Mit Zitat antworten
  #9 (permalink)  
Alt 10.09.2008, 12:22
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 09:14 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.09.2008, 14:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Ein Online-Beispiel wäre einfacher, da wir dann auch die Bilder usw. sehen würden...
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bildergalerie, galerie

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div Float Clear usw... Ich dreh durch ;) buggix CSS 14 11.02.2010 08:42
Wachsende Container Andy CD CSS 13 10.02.2010 13:08
Parent DIV soll mit der Höhe seines Childs wachsen Tekkla CSS 2 19.11.2009 18:27
gibt es eine andere Lösung ohne Tabelle? online CSS 16 24.04.2009 08:41
Problem mit div und Höhe deep4 CSS 2 13.11.2007 20:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:33 Uhr.