Avatar billede velin Nybegynder
21. juni 2010 - 12:49 Der er 10 kommentarer og
1 løsning

Skifte en flashfil ved klik på link, lige som Behavior i Dreamweaver - swop image.

Jeg er i gang med lave en side hvor jeg har en liste over kunder og når man trykker på en af disse, skifter billedet ovenover. Men nogle af disse er nød til at være flashfiler som vises og der kan man ikke benytte behavioren swap image når man klikker.  Er der nogen der har en ide om hvad man så gør ???? Siden er bygget op i HTML og består af div'er.

TUSIND tak for hjælpen.

Linette
Avatar billede claes57 Ekspert
21. juni 2010 - 13:21 #1
du kan have en flash i en div, og have et id på hver, så du kan kalde dem (meget gerne fortløbende numre). En style på div, så de ikke vises.
Ved klik på en person, så lukkes alle div, og den rette åbnes (en lille javascript-rutine).
For at gøre det enkelt at vedligeholde, så kan du også placere dine billeder i tilsvarende div'er, så alle kunder skal igennem samme process.
Avatar billede velin Nybegynder
21. juni 2010 - 13:49 #2
Skal der så ikke stå noget javacript kodning oppe i head ????

Nu har jeg jo lavet alle billederne med behavioren swop image, kan denne metode med flashfilen som du skriver kombineres med dette ?
Avatar billede claes57 Ekspert
21. juni 2010 - 14:35 #3
jeg har lavet et eksempel her, kender ikke swopimage-koden...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<SCRIPT type=text/javascript>
var taellermin=1;
var taellermax=4;

function vis(flashfilm) {
var i=taellermin;
for (i=taellermin;i<=taellermax;i++) {
    document.getElementById("f"+i).style.display = "none";
}
document.getElementById("f"+flashfilm).style.display = "";
}
</SCRIPT>

</head>
<body>
<table border="1"><tr><td style="width:300px; height:250px; text-align:center; vertical-align:bottom;">
<DIV id="f1" style="display:none;">Flash Hans her</DIV>
<DIV id="f2" style="display:none;">jpg billede af Per her</DIV>
<DIV id="f3" style="display:none;">Flash Ole her</DIV>
<DIV id="f4" style="display:none;">jpg billede af Jens her</DIV><br />
<hr />
<a href="#" onClick="vis(1);">Hans</a>&#160;&#160;
<a href="#" onClick="vis(2);">Per</a>&#160;&#160;
<a href="#" onClick="vis(3);">Ole</a>&#160;&#160;
<a href="#" onClick="vis(4);">Jens</a><br />
</td></tr></table>
</body>
</html>
Avatar billede velin Nybegynder
21. juni 2010 - 14:48 #4
Jeg forstår ikke helt hvorfor der er tables i din kode ???
Avatar billede claes57 Ekspert
21. juni 2010 - 15:13 #5
tabellen er kun til pynt - den laver bare en ramme, så jeg kan se, hvor koden har tænkt sig at være.
Det er bare noget jeg laver for at hjælpe mig selv med placering og størrelse - når siden er færdig, så kan den fjernes.
Derudover, så kan link til kunder også ligge i en dropned-liste.
Erstat <a href... med
<select name="Kunder" onchange="vis(this.value);">
  <option value=1>Hans</option>
  <option value=2>Per</option>
  <option value=3>Ole</option>
  <option value=4>Jens</option>
</select>
Avatar billede velin Nybegynder
21. juni 2010 - 23:30 #6
Hej igen Claes

Håber du er en smule tålmodig, for jeg har problemer med hvor jeg skal sætte de forskellige ting ind du skriver. Jeg håber virkelig du fortsat vil hjælpe, for jeg har brugt dage på at finde ud af at søge på nettet efter en løsning.

- <DIV id="f1" style="display:none;">Flash Hans her</DIV> er dette den samme div som selve flashfilen ligger i ? Jeg har prøvet at sætte den ind her:

<div id="flash1">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="648" height="373" id="flash1" style="display:none">title="TDC">
      <param name="movie" value="tdc_auto.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="8.0.35.0" />
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="tdc_auto.swf" width="648" height="373">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="8.0.35.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
   
  </div>


- <a href="#" onClick="vis(1);">Hans</a>&#160;&#160; - min liste over kunder er lavet med en unordered list (ul), har prøvet at sætte din kode ind imellem, men tallene til sidst ved jeg ikke hvor jeg skal placere, for hvis jeg gør det mellem </a></li> kommer der et ekstra mellemrum ned til næste kunde og det samme hvis jeg sætter dem efter </li>
<li><a href="#" class="cases_active1"onClick="vis(1);">TDC A/S</a></li>


Til info har jeg lavet en css på diven flash1 hvor jeg positionere den absoulut ovenpå den div (billed) som er på siden når man går ind på den.

Hvis det kan hjælpe dig, kan du få alle koderne her, men det er nok en smule uoverskueligt,

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ad4you</title>
<link href="ad4you.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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];}
}

var taellermin=1;
var taellermax=4;

function vis(flashfilm) {
var i=taellermin;
for (i=taellermin;i<=taellermax;i++) {
    document.getElementById("f"+i).style.display = "none";
}
document.getElementById("f"+flashfilm).style.display = "";
}


</script>

</head>



<div id="wrapper">

  <div id="header"><img src="images/banner.png" alt="Banner: Ad4you - hvis i vil bryde igennem" width="800" height="140" id="Image1"/></div>
 
 
<div id="left_col_top"><img src="images/cases_fro.jpg" alt="Ad4you kunder" width="648" height="373" border="0" id="Image3" />
   
  </div>
 
  <div id="flash1">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="648" height="373" id="flash1" style="display:none">title="TDC">
      <param name="movie" value="tdc_auto.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="8.0.35.0" />
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="tdc_auto.swf" width="648" height="373">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="8.0.35.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
   
  </div>

 
 
  <div id="nav">
    <ul>
      <li><a href="index.html">Forside</a></li>
      <li><a href="#">Tryk</a></li>
      <li><a href="#">Digital</a></li>
      <li><a href="ivaerksaetter.html">Iværksætter</a></li>
      <li><a class="nav_active" href="#">Cases</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
    <p>&nbsp;</p>
  </div>
 
 
      <div id="left_col_bottom_cases">
    <div id="overskrift_cases">Se et udvalg af løsninger til vore kunder </div>
   
    <div id="cases1">
    <ul>
            <li><a href="#" class="cases_active1"onClick="vis(1);">TDC A/S</a></li>
            <li><a href="#" class="cases_active2">fischer a/s</a></li>
            <li><a href="#" class="cases_active3">Danish Music Company</a></li>
            <li><a href="#" class="cases_active4"onclick="MM_swapImage('Image3','','images/radionord_priser.jpg')">Radio Nord</a></li>
            <li><a href="#" class="cases_active5">Natteravnene</a></li>
            <li><a href="#" class="cases_active6">Radiflex ApS</a></li>
            <li><a href="#" class="cases_active7"onclick="MM_swapImage('Image3','','images/kystens.jpg')">Kystens Nedrivning</a></li>
      </ul>
      </div>
      <div id="cases2">
        <ul>
          <li><a href="#"onclick="MM_swapImage('Image3','','images/titan.jpg')">TITAN Containers A/S</a></li>
          <li><a href="#"onclick="MM_swapImage('Image3','','images/norager.jpg')">by Nørager</a></li>
          <li><a href="#"onclick="MM_swapImage('Image3','','images/site4you.jpg')">Site4u</a></li>
          <li><a href="#"onclick="MM_swapImage('Image3','','images/logo.jpg')">LG Gulvservice</a></li>
          <li><a href="#"onclick="MM_swapImage('Image3','','images/straalenderent.jpg')">Strålende Rent</a></li>
          <li><a href="#">CEONEO Records</a></li>
        </ul>
      </div>
      </div>
 
 
 
  <div id="logo"><img src="images/logo_lille_03.jpg" width="335" height="216" alt="Ad4you logo" /></div>
 
  <div id="footer">    <h2>Ad4you    | Tinghøjvej 5  | 3650 Ølstykke  |  Tel. 39 308 308 / 309  |  <a href="mailto:info@ad4you.dk">info@ad4you.dk</a> |  CVR 32 45 32 34</h2></div>
 

 

</div>
 
</div>

<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>


TUSIND TAK FOR HJÆLPEN
Linette
Avatar billede claes57 Ekspert
22. juni 2010 - 10:45 #7
javascriptet - du har givet div'en navnet flash1, så vis(1) slal jo kalde den.
ret fra
---------
function vis(flashfilm) {
var i=taellermin;
for (i=taellermin;i<=taellermax;i++) {
    document.getElementById("f"+i).style.display = "none";
}
document.getElementById("f"+flashfilm).style.display = "";
}
---------
til
---------
function vis(flashfilm) {
var i=taellermin;
for (i=taellermin;i<=taellermax;i++) {
    document.getElementById("flash"+i).style.display = "none";
}
document.getElementById("flash"+flashfilm).style.display = "";
}
---------

den div, hvor billederne er, giv den id=flash0
og sæt taellermin til 0
så lukker du også for den, og links med billeder, fx
<a href="#"onclick="MM_swapImage('Image3','','images/site4you.jpg')">
skal så lige åbne sin gen div, og lukke de andre
<a href="#" onclick="vis(0); MM_swapImage('Image3','','images/site4you.jpg')">
alle billeder ligger i samme div, så det er vis(0); til dem alle, så kan man skifte mellem alle.
Avatar billede velin Nybegynder
22. juni 2010 - 12:06 #8
Har jeg forstået det korrekt at den div jeg skal give id=flash0 er den div hvor flashfilen ligger i og så skriver du jeg skal sætte taellermin til 0 - hvor gør jeg det ??

Du skriver den div hvor billederne er, men billederne er jo ikke i samme div - der er en div: <div id="left_col_top"> som har et billed (frøen) som vises når man går ind på siden, denne bliver så skiftet ud ved hjælp af swop image. Og så har jeg diven flash hvor jeg har lagt flashfilen ind og lavet en absolut positioning så den ligger ovenpå billedet som ligger i "left_col_top". Er det helt forkert ??

Har lige lagt billedet ind af siden på www.ad4you.dk/billed.html så du kan se hvordan det ser ud.

De vi så skal vise er når du trykker på kunderne så viser vi det vi har lavet, og der er nogen bare en enkel side, men andre har flere sider, derfor lavede jeg en flashfil til dem.

Endnu engang TUSIMD tak for hjælpen.
Avatar billede claes57 Ekspert
22. juni 2010 - 12:25 #9
det er left_col_top, der skal hedde flash0
og de kunder, der har flash-film, skal hedde flash1, flash2 osv...

i javascriptet er der
var taellermin=1;
var taellermax=4;

disse skal så være
var taellermin=0;
var taellermax= (det højeste nummer, du har give til en flash);

hvis frøen ikke fylder hele left_col_top, så lad left_col_top være, og opret i stedet en div lige omkring frøen, og giv den id=flash0
Avatar billede velin Nybegynder
22. juni 2010 - 14:26 #10
Du er fantastisk :-)

Jeg droppede at benytte swop image efter mange timers arbejde med det og benyttede kun din metode, og så lykkes det.

TUSIND Tak for hjælpen.

Smid et svar så du kan få nogle velfortjente point.

Og tak for tålmodigheden.
Avatar billede claes57 Ekspert
22. juni 2010 - 15:27 #11
ok - fortsat god arbejdslyst...
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