Αλλαγή εικόνας με flash...

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

Αλλαγή εικόνας με flash...

Δημοσίευση από iffor » 13 Δεκ 2005 11:30

Hello!!!
Θα μπορούσε κάποιος guru να με διαφωτίσει αν μπορώ με javascript
να αλλάζω σε μία σελίδα τα tag <img> με tag <object>...
Τι θέλει να πει ο ποιητής...
Θέλω ( θα ήθελα εεεε? ) με ένα select tag το οποίο έχει ως value το src είτε εικόνας είτε flash, να μου εμφανίζει στη σελίδα και το αντίστοιχο...
Γίνεται κάτι τέτοιο?
Αν ναι έχετε κάποιο ink να μου δώσετε?
γιατί το google-αρισμα δεν μου έδωσε και τιποτα...
Ευχαριστώ!
μια νέα αρχή ξεκίνησε...
ένας καινούριος δρόμος άνοιξε...
redpanda.gr

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

Αλλαγή εικόνας με flash...

Δημοσίευση από iffor » 14 Δεκ 2005 09:59

Μάλλον δεν το εξήγησα καλά.... :roll:
Απλοϊκά, έχω μιά σελίδα με ένα dropdown menu, το οποίο έχει ως value τα path αρχείων εικόνων ή και swf.
Θα ήθελα με ένα js, στο onChange, να μου εμφανίζει ανάλογα σε κάποιο σημείο της σελίδας την εικόνα ή το flash...
Το έψαχνα, το ψάχνω και θα συνεχίσω ( :wink: ) γιατί είναι κάτι ψιλοαπαραίτητο... ειδικά για ένα σύστημα διαχείρησης banner...
Θα ήθελα να ρωτήσω, γίνεται με js να χρησιμοποιήσω την document.write, αλλά μέσα σε κάποιο συγκεκριμένο tag, πχ σε ένα <div>;
Δηλ. στο onChange του μενου, να του λέω να γράψει τον ανάλογο κώδικα με την document.write, μέσα σε κάποιο συγκεκριμένο tag σε οποιοδήποτε σημείο της σελίδας?
Χίλια Ευχαριστώ!
μια νέα αρχή ξεκίνησε...
ένας καινούριος δρόμος άνοιξε...
redpanda.gr

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αλλαγή εικόνας με flash...

Δημοσίευση από skeftomilos » 15 Δεκ 2005 09:03

onchange και document.write? Nop! Το document.write ισχύει κατά το φόρτωμα της σελίδας. Μετά το φόρτωμα απαγορεύεται δια ροπάλου. :) Αν θέλεις τρέξε τον παρακάτω κώδικα για να καταλάβεις το γιατί:

Κώδικας: Επιλογή όλων

<html>
  <head>
    <script type="text/javascript">
      window.onload = function&#40;&#41; &#123;  
        setTimeout&#40;function&#40;&#41; &#123; document.write&#40;'Oups!'&#41; &#125;, 2000&#41;
      &#125;
    </script>
  </head>
  <body>
    <h3>Το περιεχόμενο της σελίδας</h3>
  </body>
</html>
Αντί για document.write πρέπει να χρησιμοποιηθεί η ιδιότητα innerHTML κάποιου div ή span.

Μια απλούστερη λύση είναι πιστεύω να φορτωθούν όλα τα γραφικά το ένα πάνω στο άλλο, και να εμφανίζεται κάθε φορά μόνο ένα από αυτά. Π.χ. στο παρακάτω demo υπάρχουν τρία γραφικά μέσα στο div "media-container", και υπάρχουν τρεις αντίστοιχες επιλογές στο στοιχείο <select>. Χρειάζεται μόνο προσοχή ώστε να μπουν στη σωστή σειρά.

Κώδικας: Επιλογή όλων

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-7">
    <title>Media-Switcher</title>
    <style type="text/css">
      body &#123; font-family&#58; verdana; &#125;
      div#media-container &#123;
        position&#58; relative;
        height&#58; 200px;
      &#125;
      div#media-container object, div#media-container img &#123;
        position&#58; absolute;
        visibility&#58; hidden;
      &#125;
    </style>
    <script type="text/javascript">
      function selectMedia&#40;index&#41; &#123;
        var mediaContainer = document.getElementById&#40;'media-container'&#41;
        var children = mediaContainer.childNodes
        var MEDIA_TAGS = &#123;'OBJECT'&#58;1, 'IMG'&#58;1&#125;
        var currentIndex = 0
        for &#40;var i = 0, child; child = children&#91;i&#93;; i++&#41; &#123;
          if &#40;MEDIA_TAGS&#91;child.nodeName&#93;&#41; &#123;
            child.style.visibility = &#40;currentIndex == index&#41; ? 'visible' &#58; 'hidden'
            currentIndex++
          &#125;
        &#125;
      &#125;
      window.onload = function&#40;&#41; &#123;
        selectMedia&#40;0&#41;
      &#125;
    </script>
  </head>
  <body>
    <h2>Media-Switcher</h2>
    <div id="media-container">
      <object data="movie1.swf" width="172" height="200" type="application/x-shockwave-flash">
        <param name="movie" value="movie1.swf" />
      </object>
      <object data="movie2.swf" width="200" height="200" type="application/x-shockwave-flash">
        <param name="movie" value="movie2.swf" />
      </object>
      <img src="earth.jpg">  
    </div><br>
    <select onchange="selectMedia&#40;this.selectedIndex&#41;">
      <option selected>Movie1</option>
      <option>Movie2</option>
      <option>Earth</option>
    </select>
  </body>
</html>
- Live Demo

Σχετικά με τον HTML κώδικα που χρειάζεται για τα flash, βρήκα ένα ενδιαφέρον άρθρο:
- Flash Satay: Embedding Flash While Supporting Standards

Υ.Γ. Βλέπω όμως τώρα ότι το FlashBlock προκαλεί προβλήματα τόσο στην εμφάνιση όσο και στη λειτουργία. Απ' ό,τι μπορώ να καταλάβω αφαιρεί τα στοιχεία <object> και βάζει στη θέση τους divs. Αυτό χαλάει την αντιστοιχία ανάμεσα στις επιλογές και τα γραφικά. :think: Μάλλον θα πρέπει να λυθεί το πρόβλημα, αν και υποθέτω ότι πολύ λίγοι χρήστες έχουν εγκαταστήσει το FlashBlock.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

Αλλαγή εικόνας με flash...

Δημοσίευση από iffor » 15 Δεκ 2005 11:17

:D :o :D
Ότι και να πώ είναι λίγο!
Οι παρατηρήσεις σου, η βοήθειά σου και τα demo σου είναι όλα τα λεφτά!
Δεν υπάρχει κάποιο post σου, απ' το οποίο να μην μαθαίνεις κάτι καινούριο!
Μράβο σου!
Χίλια ευχαριστώ για τον κώδικα! Δεν είχα ιδέα για την περίπτωση του document.write που έδωσες!
Στην αρχή έβαλα και εγώ να φορτώνω τα γραφικά από την αρχή, και να τα εμφανίζω με το κατάλληλο js και css... αλλά αυτή η τεχνική βοηθάει πολύ όταν χειρίζεσαι λίγα banner...
Δυτυχώς έχω να κάνω με μεγάλη λίστα jpg και swf αρχείων, με αποτέλεσμα να μην συμφέρει να τα φορτώνω από την αρχή!
Μετά έκανα κάτι άλλο, έβαλα στο div-άκι όπως έκανες και εσύ μόνο ένα <object> και ένα <img> tag, άδεια, των οποίων άλλαζα το scr με το onChange...
Με τις εικόνες μου λειτουργούσε μια χαρά...
Το js έθετε στο <img> ένα καινούριο scr και εμφανιζόταν...
Δεν γινόταν όμως το ίδιο και με το <object>...
Μήπως έχεις ιδέα γιατί :hammer:
Και πάλι χίλια ευχαριστώ!
μια νέα αρχή ξεκίνησε...
ένας καινούριος δρόμος άνοιξε...
redpanda.gr

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Αλλαγή εικόνας με flash...

Δημοσίευση από Basilakis » 15 Δεκ 2005 11:20

Mpravo re skeftomilos. Grafeis istoria me tous kwdikes sou. Kai tous eksigeis kiolas. Omws na rwtisw kati? Mporoume na alaksoume to sygkekrimeno kwdika na fwrtwnei videakia? Dhladh paizei gia oti theloume? H yparxei periorismos?

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αλλαγή εικόνας με flash...

Δημοσίευση από skeftomilos » 15 Δεκ 2005 13:16

Θενξ παίδες! Όλοι μαθαίνουμε κάτι με αυτές τις απορίες. :)

Η αλλαγή του innerHTML ενός div δουλεύει στους IE και Opera, δε βλέπω όμως να δουλεύει στον Firefox: demo.

Υπάρχει και η λύση με iframe, που μοιάζει αρκετά καλή:

Κώδικας: Επιλογή όλων

<html>
  <head>
    <title>Media-Switcher-3</title>
    <script type="text/javascript">
      function selectMedia&#40;src&#41; &#123;
        window.frames&#91;'media-container'&#93;.location.href = src
      &#125;
    </script>
  </head>
  <body>
    <h2>Media-Switcher-3</h2>
    <iframe name="media-container" src="movie1.swf" width="200px" height="200px" frameborder="0" scrolling="no"></iframe><br>
    <br>
    <select onchange="selectMedia&#40;this.value&#41;">
      <option value="movie1.swf" selected>Movie1</option>
      <option value="movie2.swf">Movie2</option>
      <option value="earth.jpg">Earth</option>
    </select>
  </body>
</html>
- Demo. (δε μπλοκάρεται από το FlashBlock)

Όσο για video δεν έχω ιδέα. :( Δοκίμασα να ανοίξω ένα mpeg με τον Firefox αλλά το video εμφανίστηκε στον Media player.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

Αλλαγή εικόνας με flash...

Δημοσίευση από iffor » 15 Δεκ 2005 13:27

Ακριβώς!!!!
Αυτό έκανα και εγώ αφού είδα και αποείδα...!!!!
Χρήση IFRAME και ξερό ψωμί!!!
Και πάλι ευχαριστώ! :wink:
μια νέα αρχή ξεκίνησε...
ένας καινούριος δρόμος άνοιξε...
redpanda.gr

Άβαταρ μέλους
Panos Galanis
Δημοσιεύσεις: 158
Εγγραφή: 09 Σεπ 2002 12:51
Τοποθεσία: Hamburg

Αλλαγή εικόνας με flash...

Δημοσίευση από Panos Galanis » 15 Δεκ 2005 15:01

skeftomilos έγραψε:Θενξ παίδες! Όλοι μαθαίνουμε κάτι με αυτές τις απορίες. :)

Η αλλαγή του innerHTML ενός div δουλεύει στους IE και Opera, δε βλέπω όμως να δουλεύει στον Firefox: demo.
Μιά μικρή αλλαγή για να δουλεύει και σε Firefox.

Κώδικας: Επιλογή όλων

        switch &#40;extension&#41; &#123;
        case 'swf'&#58;
          if &#40;document.getElementById && !document.all&#41; html += '<embed src="' + src + '" type="application/x-shockwave-flash"></embed>'
          else &#123;
              html += '<object data="' + src + '" type="application/x-shockwave-flash">'
              html += '<param name="movie" value="' + src + '" />'
              html += '</object>'
          &#125;
          break
Human beings, who are almost unique in having the ability to learn from the experience of others, are also remarkable for their apparent disinclination to do so. - Douglas Adams

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Αλλαγή εικόνας με flash...

Δημοσίευση από Basilakis » 15 Δεκ 2005 15:03

Op... Yea it works.Perfect!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αλλαγή εικόνας με flash...

Δημοσίευση από skeftomilos » 16 Δεκ 2005 08:49

@Panos Galanis: :victory:

Τελικά δουλεύει κι έτσι, για να αποφύγουμε την browser-detection:

Κώδικας: Επιλογή όλων

case 'swf'&#58;
  html += '<object codeBase="http&#58;//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid&#58;D27CDB6E-AE6D-11cf-96B8-444553540000">'
  html += '<param name="movie" value="' + src + '" />'
  html += '<embed src="' + src + '" type="application/x-shockwave-flash"></embed>'
  html += '</object>'
  break
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες