Opacity Problem

tech-checker · 01. Mai 2007

Hallo,
hab folgendes Problem: auf meiner Seite (im moment noch im Aufbau) will ich eine Bildgallerie bauen. Das geht auch schon recht gut, bloß jetzt hab ich ein script gefunden, mit dem ich die bilder ein faden lassen kann (Onload image fades without Flash | clagnut/sandbox).
Wenn ich das bild einfade, werden zwei divs (schliessen (oben rechts) und bildinfo (unten links)) transparent, aber bloß wo das bild sie überdeckt. Das soll das bild aber net machen.
Zu besseren veranschaulichung:www.Jonas-Keidel.de unter "Bildgalerie".
Würde mich sehr freuen, wenn mir einer helfen könnte!

Danke
Jonas

ein schlauer · 01. Mai 2007

Du hast dir mal die Fehlerkonsole im FF angeschaut? Die Seiten wimmelt nur so davon, ich würde erst mal diese Beseitigen und dann auch gleich die HTML Code: Result for http://jonas-keidel.de/alpha/ - W3C Markup Validator

tech-checker · 01. Mai 2007

Ich hab ja auch die Website erstmal bloß für den Internet Explorer 7 opimiert. Die fehlerbeseitigung für den Firefox kommt später.
Aber was könnte man mit dem Problem machen???

ein schlauer · 01. Mai 2007

Man könnte erst mal die Fehler beseitigen. Ob du für den IE oder sonstwas optimiert hast, macht da keinen Unterschied, es bleiben Fehler.

tech-checker · 01. Mai 2007

Im IE funzt es aber einwandfrei! Außer halt dem oben genannten Problem.
Wäre echt net, wenn jmd mir dem Problem helfen könnte!
Und außerdem ist die seite ja noch im aufbau!

ein schlauer · 01. Mai 2007

Naja, wenn die Seite einwandfrei funktioniert ist ja alles in Ordnung.

Nur verstehe ich nicht, warum du dich weigerst Fehler zu beseitigen?

tech-checker · 01. Mai 2007

dazu hab ich im moment noch keine zeit!
deswegen!

daWonderer · 01. Mai 2007

tech-checker schrieb:
Wenn ich das bild einfade, werden zwei divs (schliessen (oben rechts) und bildinfo (unten links)) transparent, aber bloß wo das bild sie überdeckt. Das soll das bild aber net machen.

Wie sieht der dazugehörige Quelltext aus?

ein schlauer · 01. Mai 2007

Alles klar, dann eben nicht.

tech-checker · 01. Mai 2007

Also hier mal die script-div.js:

Code:

function show_div () {
  document.getElementById("picview").style.display = "block";
  sendRequest(1);
}
function close_div(id) {
  document.getElementById(id).style.display = "none";
}

function show_pic_big(bild, info) {    
    var bild = bild;
    var imgSrc = new Image();
    imgSrc.src = bild;
  document.getElementById("picbig").style.display = "block";
  document.getElementById("picbigview").innerHTML = "<img src=" + imgSrc.src + " id='photo'>"
  initImage();
  document.getElementById("picbiginfo").innerText = info;
  if (info == '') {
  document.getElementById("picbiginfo").innerText = 'Keine Beschreibung'
  }
}

<!--
document.write("<style type='text/css'>#photo {visibility:hidden;}</style>");

function initImage() {
	imageId = 'photo';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 25;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
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;
}
// -->

Dann hier das Stylescheet:

Code:

BODY { 
scrollbar-face-color:#333; 
scrollbar-highlight-color:#666666; 
scrollbar-3dlight-color:#333; 
scrollbar-darkshadow-color:#333; 
scrollbar-shadow-color:#666666; 
scrollbar-arrow-color:#666666; 
scrollbar-track-color:#333; 
background-color:transparent;
} 
#pic {border: solid 1px transparent;}
#pic:hover {border: dotted 1px #666;}
#pic a {text-decoration:none;}
#pic:hover #lnk {background-color:#333; border-top: dotted 1px #666;}
a:hover #lnk {font-style:italic;}
#lnk {border-top: solid 1px transparent; line-height:22px;}


#picview{
display:none;
position: fixed;
top: 130px;
left:40px;
width: 400px;
height:200px;
background: #333;
color: #fff;
border: dotted 1px #666;
padding:5px;
margin-top:10px;
overflow:none;}

#picview #close {
position:absolute;
right: 7px;
top: 7px;
padding:1px;}

#picview #close a {
text-decoration:none;
background-color:#666;
border: dotted 1px #333;}

#picview #close a:hover {
background-color:#444;}

#picview img {
width:46px;
height:39px;
border: solid 1px transparent;
margin: 5px;
}

#picview img:hover {
border: dotted 1px #666;}

#picview #header {
width:395px;
height:19px;
background-color:#666;
padding-left:4px;
padding-top:3px;}

#picview #viewer {
width:396px;
height:182px;
overflow:auto;
margin-left:2px;}

#picbig {
display:none;
position: fixed;
top:30px;
left:30px;
width: 570px;
height:450px;
background: #333;
color: #fff;
border: dotted 1px #666;
padding:5px;
overflow:none;}

#picbig #picbigview {
width: 570px;
height:450px;
margin-top: 20px;
background:#333;
}

#picbig #picbigview img#photo {
width: 570px;
height:450px;
visibility:hidden;
background:url('../pics/loading_transp.gif' 50% 50% no-repeat;
}

#picbig #picbigclose {
position: absolute;
right:2px;
top: 2px;
padding-top: 2px;
padding-left: 2px;
width: 17px;
height:19px; 
background-color:#333;}

#picbig #picbigclose a {
text-decoration:none;
background-color:#666;
border: dotted 1px #333;}

#picbig #picbigclose a:hover {
background-color:#444;}

#picbig #picbiginfo {
bottom: 4px;
left: 4px;
width: 175px;
height: 18px;
background-color:#333;
position:absolute;
color:#666;
padding-left: 5px;
padding-top: 4px;
font-size: 11px;
}

Und hier die Bildgalerie.htm:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>bildergalerie</title>
<link rel="stylesheet" type="text/css" href="style-galerie.css">
<script type="text/javascript" language="JavaScript" src="script-viewer.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="script-div.js"></script>
</head>

<body text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" style="font-family: Arial; font-size: 14px; margin-top: 0; margin-bottom: 0" bgcolor="#000000" topmargin="4">
<p><b>Bildergalerie</b></p>
<table border="0" width="495">
  <tr>
    <td width="245" align="center">
      <div id="pic">
      <p style="margin-top: 0; margin-bottom: 0" align="center"><a href="javascript:show_div()"><img border="0" src="../pics/folder.png" width="154" height="158"></a></p>
      <div id="lnk">
      <p style="margin-top: 0; margin-bottom: 0"><a href="javascript:show_div()">AMI 2007</a>
      </div>
      </div>
          </td>
  </tr>
</table>

<div id="picview">
<div id="header">
<p style="margin-top: 0; margin-bottom: 0">AMI 2007
</div>
<div id="close" style="width: 22; height: 23">
<p align="left">
<a href="javascript:close_div('picview')"> x </a>
</div>
<div id="viewer">
<p align="left">
</div>
</div>
<div id="picbig">
<div id="picbigclose"><a href="javascript:close_div('picbig')"> x </a></div>
<div id="picbigview">
</div>
<div id="picbiginfo"></div>
</div>
</body>
</html>

Ich hoffe das genügt

Opacity Problem

tech-checker

New member

ein schlauer

Lounge-Member

tech-checker

New member

ein schlauer

Lounge-Member

tech-checker

New member

ein schlauer

Lounge-Member

tech-checker

New member

daWonderer

New member

ein schlauer

Lounge-Member

tech-checker

New member