Avatar billede charley78 Novice
21. april 2010 - 17:42 Der er 17 kommentarer og
1 løsning

fade fra foto til foto i javascript, flash eller photoshop?

Jeg vil gerne lave en entré på en side, der skal virke sådan at banneret ændrer sig (overblænder fra et foto til et andet), idét man går ind på siden - altså uden at man behøver at klikke.
Om det gøres lettest med en gif, og om den i så fald kan kreeres i photoshop eller i flash eller om der skal et javescript til, er ligemeget.
Jeg er frisk på det hele efter at have støvet rundt på nettet uden at finde en løsning.

Er der nogen, der kan hjælpe med en enkel løsning?

Venlig hilsen
Charlotte
Avatar billede claes57 Ekspert
21. april 2010 - 17:48 #1
jeg har lånt en kode til
http://brogemeyer.eu/foraar.html
den er gaflet direkte fra
http://www.cryer.co.uk/resources/javascript/script12slideshow.htm

helt gratis, og enkelt at bruge.
og jeg har lavet en variant, hvor man kan bladre (den automatiske scroll skjules bare)
http://brogemeyer.eu/billeder.html
den virker dog kun, hvis billeder er fortløbende nummereret.
Avatar billede nicofrench Nybegynder
21. april 2010 - 17:48 #2
Jeg ville anbefale det som Flash - lettest og afvikles bedre.
Antager det er et større billede og ikke eks. 50x50 pix?

Kan laves i Photoshop, men så som gif.
Avatar billede claes57 Ekspert
21. april 2010 - 17:51 #3
obs - tekst under billeder i billeder.html er snyd. Jeg lavede billeder i fælles højde med hvidt under, og i paint indsatte tekst på det enkelte.
Billeder skal være i samme højde/bredde for at det ser ok ud.
Avatar billede DonTorro Nybegynder
21. april 2010 - 17:54 #4
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Den her burde kunne gøre hvad du ønsker..

Det er vigtigt du ændre bredde og højde til dine billeders mål
Avatar billede charley78 Novice
21. april 2010 - 18:06 #5
Sikken en masse forslag. er det tilfældigvis sådan at I også ved om jeres forslag er "browsersikre", dvs, at de kan læses og er aktive i både Safari, Crome, Explorer og Firefox?
Avatar billede claes57 Ekspert
21. april 2010 - 18:18 #6
den, jeg lavede er testet i firefox, ie, googlechrome
man bare gå ind på siderne i forskellige browsere / systemer (jeg har ikke prøvet via mac/linux og deres browsere.
Avatar billede charley78 Novice
21. april 2010 - 18:24 #7
til Don Torro: et stykke nede af siden står der "The above code references 1 external file plus 3 images as part of its interface. Download them below (right click, and select "Save As"):" men jeg kan ikke finde fotos'ene.. og så går det jo ikke så godt ;o)
Avatar billede charley78 Novice
21. april 2010 - 18:46 #8
til nicofrench: jeg spørger hvordan man gør. Jeg kender godt de foreliggende muligheder, men ved ikke rent teknisk hvordan jeg fx - uden image ready overblænder i photoshop.
Det samme gælder flash. Jeg ved ganske enkelt ikke hvor jeg finder den knap, der gør mit symbol transparent.
Avatar billede charley78 Novice
21. april 2010 - 18:47 #9
undersøger i øjeblikket claes's svar!
Avatar billede charley78 Novice
21. april 2010 - 19:01 #10
jeg kan desværre ikke få det til at virke. Det drejer sig kun om banneret og man skal bare køre fra første billede, til et lidt mørkere - og slut prut http://www.yogi4rent.com/
Kan du se fejlen Claes - eller en anden?
Avatar billede claes57 Ekspert
21. april 2010 - 19:36 #11
<div id="EmilyPictureBackground">
  <img alt="" src="pics/banner-lys.jpg" width="800" height="249" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"pics/banner-lys.jpg;pics/banner.jpg"
,5);
</script>

der, hvor billedet skal være - ellers skal man rette navne som fx EmilyPictureBackground igennem i hele koden.
Avatar billede charley78 Novice
21. april 2010 - 22:25 #12
jeg forstår desværre ikke helt din kommentar. Du skriver "der hvor..osv"!
- hvor 'der'?
- og hvad skal ske der? Skal koderne ind der?
Det ser også ud til at der mangler en "</script>"

Kan du hjælpe med et par hints til hvad du mente?
Avatar billede claes57 Ekspert
22. april 2010 - 12:41 #13
dette skulle være koden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.9)">
<meta name="generator" content="pluck 4.6.1" />
<title>YOGA - yogi4rent.com</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<meta name="title" content="" />
    <meta name="description" content="description of Site here" />
    <meta name="keywords" content="pluck, keywords here" />
    <meta name="language" content="da" />

    <meta name="Robots" CONTENT="index, all" />

<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

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_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

// Browser Slide-Show script. With image cross fade effect for those browsers
// that support it.
// Script copyright (C) 2004-2008 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
var FadeDurationMS=1000;
function SetOpacity(object,opacityPct)
{
  // IE.
  object.style.filter = 'alpha(opacity=' + opacityPct + ')';
  // Old mozilla and firefox
  object.style.MozOpacity = opacityPct/100;
  // Everything else.
  object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var msNow = (new Date()).getTime();
  var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity>=100)
  {
    SetOpacity(element,100);
    element.timer = undefined;
  }
  else if (opacity<=0)
  {
    SetOpacity(element,0);
    element.timer = undefined;
  }
  else
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);
  }
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
  var foreground=document.getElementById(foregroundID);
  if (foreground.timer) window.clearTimeout(foreground.timer);
  if (backgroundID)
  {
    var background=document.getElementById(backgroundID);
    if (background)
    {
      if (background.src)
      {
        foreground.src = background.src;
        SetOpacity(foreground,100);
      }
      background.src = newImage;
      background.style.backgroundImage = 'url(' + newImage + ')';
      background.style.backgroundRepeat = 'no-repeat';
      var startMS = (new Date()).getTime();
      foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);
    }
  } else {
    foreground.src = newImage;
  }
}
var slideCache = new Array();
function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)
{
  var imageSeparator = imageFiles.indexOf(";");
  var nextImage = imageFiles.substring(0,imageSeparator);
  if (slideCache[nextImage] && slideCache[nextImage].loaded)
  {
    FadeInImage(pictureID,nextImage,backgroundID);
    var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)
      + ';' + nextImage;
    setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",
      displaySecs*1000);
    // Identify the next image to cache.
    imageSeparator = futureImages.indexOf(";");
    nextImage = futureImages.substring(0,imageSeparator);
  } else {
    setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",
      250);
  }
  // Cache the next image to improve performance.
  if (slideCache[nextImage] == null)
  {
    slideCache[nextImage] = new Image;
    slideCache[nextImage].loaded = false;
    slideCache[nextImage].onload = function(){this.loaded=true};
    slideCache[nextImage].src = nextImage;
  }
}


//-->
</script>

<style type="text/css">
<!--
.style3 {font-size: 9px}
.style4 {
    color: #FF6633;
    font-weight: bold;
}
-->
</style>
</head>

<body>
<table width="800" border="0" cellpadding="100" align="center" style="margin: auto;">
  <tr>
    <td>
<div id="calosc">

<!--     <div id="banner">
   
  <img alt="slide show" src="pics/banner-lys.jpg" width="800" height="249" id="banner"></div> -->
<div align="center">
<div id="EmilyPictureBackground">
  <img alt="" src="pics/banner-lys.jpg" width="800" height="249" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"pics/banner-lys.jpg;pics/banner.jpg"
,5);
</script>
</div>

 
<div id="content">
    <div id="sidebar">
       
        <div id="menu">
          <p>&nbsp;</p>
         
          <p><img src="pics/P1020061.jpg" alt="tekst.." width="200" /></p>
          <p><img src="pics/P1020065.jpg" alt="tekst.." width="200" /></p>
<p>

         
            <applet archive="DuriusWaterPic.jar" width="200" height="267" align="BOTTOM"
    alt="KLIK på billedet og vent et øjeblik! - KLIK igen og kom videre til hjemmesiden" code="DuriusWaterPic.class">
              <param name="cabbase" value="DuriusWaterPic.cab" />
              <param name="image" value="pics/P1020074b.jpg" />
              <param name="dim" value="7" />
              <param name="noise" value="3" />
              <param name="mouse" value="7" />
              <param name="timer" value="3" />
              <param name="target" value="_blank" />
              <param name="orientation" value="v" />

              <param name="bg" value="233423" />
              <param name="url" value="http://www.yogi4rent.com" />
              <param name="reg" value="22454732" />
                    </applet>
          </p>
          <p><img src="pics/P1020087.jpg" alt="tekst.." width="200" /></p>
        </div>
    </div> <!-- sidebar, menu -->

   
    <div id="main">
      <h4>    Overskrift!? <a href="mailto:xxx@xxx.com">mail?</a> </h4>
      <div id="foto">
        <p>Alle uanset fysisk formåen kan dyrke yoga og på den måde styrke både kroppen og sindet. Men hvorfor være bundet af transporttid og faste skemaer i fitnesscenteret eller yogastudiet? Nu kan du nemlig få en yogi på besøg hjemme eller på arbejdspladsen, når det passer dig?</p>
        <p> <br />
          </p>

        <p>Private<br />
          </p>
        <p>Efter få timers privat yogaundervisning har du din egen yogapraksis. Og har du lyst til at udvikle og optimere den, kommer du langt med et enkelt besøg om ugen af os, hvor vi bygger nye elementer på din praksis og retter eventuelle fejl. Du er velkommen til at samle en gruppe venner, du kan dele omkostningerne med.</p>
        <p> <br />
          </p>
        <p>Virksomheder<br />
          </p>

        <p>Få bedre og gladere medarbejdere. Vi afholder en yoga-workshop for de interesserede medarbejdere, som går hjem med en individuel yoga-praksis og følger så op med ugentlige besøg, hvor vi retter og inspirerer. </p>
        <p> <br />
          </p>
        <p>Hvorfor yoga?<br />
          </p>
        <p>Yoga er et unikt redskab til at lære dine ressourcer og kvaliteter at kende, at fokusere på dem og derved bedre føre dem ud i livet. I det moderne liv er mange tilbøjelige til alene at bruge hovedets kvaliteter - med yoga inddrages også kroppens intelligens, og derved opnår du en helhed. Den nye kropsbevidsthed gør, at du reagerer sundt på kroppens signaler og forebygger en række skavanker som  dårlig ryg, fordøjelsesproblemer, fedme, spændingshovedpine, stress, mm.</p>
        <p> Ring på 3013 5198 eller send en mail til ++++++ for at høre om mulighederne. <br />

          </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>

        <p class="style4">Hvis du vil forstørre tekst eller fotos, kan du holde Ctrl-tasten nede og scrolle med din anden hånd.</p>
        </div>

      <!-- welcome -->
    </div> <!-- main -->
</div>  <!-- content -->
<div id="footer">yogi4rent.com - tel. 3013 5198 - mail ++++++ </div>
<!-- footer -->
</div>

<!-- calosc -->
</div> <div align="right" class="style3"><span onClick="MM_openBrWindow('http://www.yes-yes.dk/','','scrollbars=yes,width=1000,height=1000')">webdesign: yes-yes.dk</span></div></td>
  </tr>
</table>
</body>
</html>
Avatar billede charley78 Novice
22. april 2010 - 13:56 #14
whau, hvor er det fint. Tusinde tak :o)
Hvad der bare undrer mig.. men det kan vist ikke have noget med dit forslag at gøre. Er at fotosene i ventre side pludseligt ligger 90 grader den forkerte vej i Dreamweaver. det er heldigvis væk, så snart siden er uploadet.

Tak for hjælpen :o)
Avatar billede charley78 Novice
22. april 2010 - 13:56 #15
- og Claes, du må lige svare, så du kan få points!
Avatar billede claes57 Ekspert
22. april 2010 - 14:07 #16
jeg har ikke rørt ved andet end top-billedet - så de 90graders rotation må være dreamweaver's egen idé.
Avatar billede charley78 Novice
22. april 2010 - 14:18 #17
Tusind tak for din hjælp :o)
.. desværre ku jeg ikke tilføje flere points. det havde du fortjent ;o)
Avatar billede charley78 Novice
28. april 2010 - 22:06 #18
jeg har oprettet et nyt spørgsmål ;o)
http://www.eksperten.dk/spm/908335
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester