Dreamweaver MX: Ebenen und Animation

celiadee · 13. Februar 2005

Hi folks!
Habe ein scheinbar supereasy-blödes Problem, worauf ich hier im Forum so auch keine Lösung gefunden habe. (Ich arbeite mit Dreamweaver MX)
Ich lade ein geslicetes Bild in eine Tabelle. Wenn das Bild komplett geladen ist, soll ein Text auf tauchen. Den habe ich in eine Ebene gepackt, die erst eingeblendet werden soll, wenn das Hintergrundbild komplett da ist. Das habe ich nun über die Zeitleiste gelöst: im ersten Frame wird die Ebene ausgeblendet. Im 30. Frame wird die Ebene eingeblendet, und das klappt auch.
Das Problem ist nun die Positionierung der Ebene: gebe ich für left
einen Pixelwert ein, dann wird dieser auch übernommen. Ich würde aber lieber mit Prozentwerten arbeiten, da sich die Position dann automatisch an die POsition des Browserfensters anpasst. Das klappt aber nicht. Die Ebene klebt dann jedes mal an der linken Seite. Wie kann man das lösen?
Hier ist mal der link: www.christina-walter.de

Dann würde mich auch interessieren, ob man es hinkriegt das die Slices des Hintergrundbildes in einer bestimmten Reihenfolge geladen werden Also zum Beispiel der Reihe nach von links nach rechts. Kann man das beeinflussen?

Und wie bekommt man in der Titelleiste des Browsers das "Internet-Explorer" weg?

Viele Fragen...

Danke und viele Grüsse

celiadee

versuch13 · 27. Februar 2005

Gesliced hast du das Bild mit Photoshop oder wie, also soweit ich weiß, werden die Slices in der Reihenfolge geladen in der du sie anlegst. Also, erst Slice 1, dann Slice 2, usw.
Dein Problem mit der Ebenen Positionierung habe ich jetzt nicht ganz verstanden, wenn du das nochmal erklärst, den Ouelltext postest oder noch besser einen Link, ist das sicher aber auch kein Problem zu lösen.

MfG

celiadee · 27. Februar 2005

Hi versuch13,

ja, die slices habe ich mit imageready erstellt und eigentlich müssten sie Zeile für Zeile von links nach rechts geladen werden, wenn das so ginge wieDu meinst. Allerdings habe ich gerade gesehen, dass die Kilobytes der GIFs unterschiedlich sind, (Spielraum von 4 und 5,5 Kb)

Und nun zur Ebene:
das steht im head, das Javascript habe ich nicht selbst programmiert, das hat mir DREAMWEAVER ausgespuckt:

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_timelineStop(tmLnName) { //v1.2
  //Copyright 1997, 2000 Macromedia, Inc. All rights reserved.
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  if (tmLnName == null)  //stop all
    for (var i=0; i<document.MM_Time.length; i++) document.MM_Time[i].ID = null;
  else document.MM_Time[tmLnName].ID = null; //stop one
}

function MM_timelinePlay(tmLnName, myID) { //v1.2
  //Copyright 1997, 2000 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
  if (myID == tmLn.ID) { //if Im newest
    setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
    fNew = ++tmLn.curFrame;
    for (i=0; i<tmLn.length; i++) {
      sprite = tmLn[i];
      if (sprite.charAt(0) == 's') {
        if (sprite.obj) {
          numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
          if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
            keyFrm=1;
            for (j=0; j<sprite.values.length; j++) {
              props = sprite.values[j]; 
              if (numKeyFr != props.length) {
                if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
                else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
              } else {
                while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
                if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
                  if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
                  else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
        } } } } }
      } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
      if (fNew > tmLn.lastFrame) tmLn.ID = 0;
  } }
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_initTimelines() { //v4.0
    //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
    var ns = navigator.appName == "Netscape";
    var ns4 = (ns && parseInt(navigator.appVersion) == 4);
    var ns5 = (ns && parseInt(navigator.appVersion) > 4);
    document.MM_Time = new Array(1);
    document.MM_Time[0] = new Array(4);
    document.MM_Time["textlines"] = document.MM_Time[0];
    document.MM_Time[0].MM_Name = "textlines";
    document.MM_Time[0].fps = 15;
    document.MM_Time[0][0] = new String("sprite");
    document.MM_Time[0][0].slot = 1;
    if (ns4)
        document.MM_Time[0][0].obj = document["text"];
    else if (ns5)
        document.MM_Time[0][0].obj = document.getElementById("text");
    else
        document.MM_Time[0][0].obj = document.all ? document.all["text"] : null;
    document.MM_Time[0][0].keyFrames = new Array(1, 30);
    document.MM_Time[0][0].values = new Array(4);
    document.MM_Time[0][0].values[0] = new Array("hidden","visible");
    document.MM_Time[0][0].values[0].prop = "visibility";
    if (!ns4)
        document.MM_Time[0][0].values[0].prop2 = "style";
    if (ns5)
        document.MM_Time[0][0].values[1] = new Array("450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px", "450px");
    else
        document.MM_Time[0][0].values[1] = new Array(450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450,450);
    document.MM_Time[0][0].values[1].prop = "left";
    if (ns5)
        document.MM_Time[0][0].values[2] = new Array("380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px", "380px");
    else
        document.MM_Time[0][0].values[2] = new Array(380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380,380);
    document.MM_Time[0][0].values[2].prop = "top";
    if (!ns4) {
        document.MM_Time[0][0].values[1].prop2 = "style";
        document.MM_Time[0][0].values[2].prop2 = "style";
    }
    if (ns5)
        document.MM_Time[0][0].values[3] = new Array("222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px", "222px");
    else
        document.MM_Time[0][0].values[3] = new Array(222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222,222);
    document.MM_Time[0][0].values[3].prop = "width";
    if (!ns4)
        document.MM_Time[0][0].values[3].prop2 = "style";
    document.MM_Time[0][1] = new String("behavior");
    document.MM_Time[0][1].frame = 30;
    document.MM_Time[0][1].value = "MM_timelineStop('textlines')";
    document.MM_Time[0][2] = new String("behavior");
    document.MM_Time[0][2].frame = 1;
    document.MM_Time[0][2].value = "MM_showHideLayers('text','','hide')";
    document.MM_Time[0][3] = new String("behavior");
    document.MM_Time[0][3].frame = 29;
    document.MM_Time[0][3].value = "MM_showHideLayers('text','','show')";
    document.MM_Time[0].lastFrame = 30;
    for (i=0; i<document.MM_Time.length; i++) {
        document.MM_Time[i].ID = null;
        document.MM_Time[i].curFrame = 0;
        document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
    }
}
//-->
</script>

und das steht im body:

Code:

<div id="text" style="position:absolute; width:222px; height:115px; z-index:1; left: 450px; top: 380px; overflow: visible; visibility: visible;"> 
       </div>

Ansonsten könntest Du Dir ja auch von meinem Link den Quelltext anzeigen lassen.
Vielen Dank schonmal.

Celiadee

versuch13 · 27. Februar 2005

Hi Christina,

versuch es mal damit:
<div id="text" style="margin:auto auto; width:222px; height:115px; z-index:1; overflow: visible; visibility: visible;">
</div>

Das margin: auto auto; bedeutet, das der layer von oben und unten, und von links und rechts, den selben abstand hat.

MfG

celiadee · 27. Februar 2005

Hi,
vielen Dank!
Leider funzts net. Jetzt klebt die Ébene zentriert unter dem Bild...

versuch13 · 27. Februar 2005

Du könntest auch mal versuchen die Ebene in eine der Tabellen Zellen zu setzten, ganz ohne Positionierungsangaben.
Dann müßtest du vielleicht nur, den Inhalt der zelle: <img src=...> als hintergrund der Zelle festlegen, und zwar so:

<td style="background-image:url(bild.gif)";>

<div id="text" style="width:222px; height:115px; z-index:1;
overflow: visible; visibility: visible;">
</div>

</td>

dass funktioniert dann aufjedenfall, ist nur die Frage ob du eine Zelle hast die genau in der Mitte sitzt.

MfG

celiadee · 7. März 2005

Hallo versuch13, danke für Deine Hilfe!

ich weiss nicht so recht, wie ich das einbauen soll:
Hier mal der Code für die Tabellenreihe mit der Zelle, in die das
Hintergrundsbild und die Ebene rein soll

<table>
</tr>
<tr align="center" valign="middle">
<td width="114" height="120"><img src="Bilder/sofa_22.gif" width="114" height="120"></td>
<td width="114" height="120"><img src="Bilder/sofa_23.gif" width="115" height="120"></td>
<td width="114" height="120"><img src="Bilder/sofa_24.gif" width="114" height="120"></td>
<td height="120" colspan="2"> </td> das ist die Zelle
<td width="114" height="120"><img src="Bilder/sofa_27.gif" width="115" height="120"></td>
<td width="114" height="120"><img src="Bilder/sofa_28.gif" width="114" height="120"></td>
</tr>
</table>

darunter habe ich dann noch den Code für die Ebene stehen:

<div id="text" style="position:absolute; width:222px; height:114px; z-index:1; overflow: visible; visibility: hidden;">
...for
not being at home. 
You may contact me here: 
<a href="mailto:christina.walter@arcor.de">christina.walter@arcor.de</a> 
phone +49.211.3558047 
fax +49.211.5801540 
Düsselthaler Strasse 31 
D-40211 Düsseldorf 

</div>

Und wie wird die Bild-URL in Verbindung mit dem style-tag angegeben?
<td style="background-image:url(bild.gif)";>
Muss da dann einfach nur der Ordnername hin, anstelle von url?

Viele Grüsse

Christina

versuch13 · 7. März 2005

Hi Celiadee,

<table>
</tr>
<tr align="center" valign="middle">
<td width="114" height="120"><img src="Bilder/sofa_22.gif" width="114" height="120"></td>
<td width="114" height="120"><img src="Bilder/sofa_23.gif" width="115" height="120"></td>
<td width="114" height="120"><img src="Bilder/sofa_24.gif" width="114" height="120"></td>
<td height="120" colspan="2">
<div id="text" style="width:222px; height:114px; z-index:1; overflow: visible; visibility: hidden;">
...for
not being at home. 
You may contact me here: 
<a href="mailto:christina.walter@arcor.de">christina.walter@arcor.de</a> 
phone +49.211.3558047 
fax +49.211.5801540 
Düsselthaler Strasse 31 
D-40211 Düsseldorf 

</div>
<td>
<td width="114" height="120"><img src="Bilder/sofa_27.gif" width="115" height="120"></td>
<td width="114" height="120"><img src="Bilder/sofa_28.gif" width="114" height="120"></td>
</tr>
</table>

>> das 'positon:absolute;' weg machen, und in die Zelle einfügen, genauso wie es jetzt oben steht.

<td style="background-image:url(ORDNER/bild.gif)";>
>> da wo jetzt Ordner rot markiert ist muss die Pfadangabe hin. Das url muss stehen bleiben.

MfG

Dreamweaver MX: Ebenen und Animation

celiadee

Mitglied

versuch13

Erfahrenes Mitglied

celiadee

Mitglied

versuch13

Erfahrenes Mitglied

celiadee

Mitglied

versuch13

Erfahrenes Mitglied

celiadee

Mitglied

versuch13

Erfahrenes Mitglied

Neue Beiträge