Ergebnis 1 bis 10 von 10
  1. #1
    Avatar von tech-checker
    tech-checker ist offline Jungspund
    registriert
    27-04-2007
    Ort
    irgendwo im Vogtland
    Beiträge
    19

    Exclamation Opacity Problem

    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

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Opacity Problem

    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

  3. #3
    Avatar von tech-checker
    tech-checker ist offline Jungspund
    registriert
    27-04-2007
    Ort
    irgendwo im Vogtland
    Beiträge
    19

    AW: Opacity Problem

    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???

  4. #4
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Opacity Problem

    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.

  5. #5
    Avatar von tech-checker
    tech-checker ist offline Jungspund
    registriert
    27-04-2007
    Ort
    irgendwo im Vogtland
    Beiträge
    19

    AW: Opacity Problem

    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!

  6. #6
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Opacity Problem

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

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

  7. #7
    Avatar von tech-checker
    tech-checker ist offline Jungspund
    registriert
    27-04-2007
    Ort
    irgendwo im Vogtland
    Beiträge
    19

    AW: Opacity Problem

    dazu hab ich im moment noch keine zeit!
    deswegen!

  8. #8
    daWonderer ist offline Routinier
    registriert
    21-04-2007
    Beiträge
    409

    AW: Opacity Problem

    Zitat Zitat von tech-checker Beitrag anzeigen
    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?

  9. #9
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Opacity Problem

    Alles klar, dann eben nicht.

  10. #10
    Avatar von tech-checker
    tech-checker ist offline Jungspund
    registriert
    27-04-2007
    Ort
    irgendwo im Vogtland
    Beiträge
    19

    AW: Opacity Problem

    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')">&nbsp;x&nbsp;</a>
    </div>
    <div id="viewer">
    <p align="left">
    </div>
    </div>
    <div id="picbig">
    <div id="picbigclose"><a href="javascript:close_div('picbig')">&nbsp;x&nbsp;</a></div>
    <div id="picbigview">
    </div>
    <div id="picbiginfo"></div>
    </div>
    </body>
    </html>
    Ich hoffe das genügt

Ähnliche Themen

  1. layer problem mit Firefox: Carolina braucht Hilfe
    Von carolina im Forum JavaScript
    Antworten: 25
    Letzter Beitrag: 11-03-2005, 15:28
  2. Antworten: 5
    Letzter Beitrag: 28-02-2005, 18:50
  3. Problem beim kombinieren zweier Scripte
    Von thundervirus im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 17-01-2005, 13:28
  4. Rießen Problem mit Formularen und Submit
    Von Rebell im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 21-10-2004, 10:54
  5. Total obskures Problem ...
    Von Dyonisus im Forum Windows
    Antworten: 4
    Letzter Beitrag: 06-05-2002, 12:10

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •