Σύστημα banner

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

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

Απάντηση
Άβαταρ μέλους
Expl0it
Honorary Member
Δημοσιεύσεις: 2364
Εγγραφή: 25 Αύγ 2003 23:24
Τοποθεσία: home/sweet/home

Σύστημα banner

Δημοσίευση από Expl0it » 01 Ιουν 2004 20:11

Αυτό το βοήθημα εξηγεί πως μπορούμε να φτιάξουμε ένα απλό συστηματάκι για banner. Εγώ έβαλα 10 banner διαστάσεων 468x60 στο παράδειγμα αλλά μπορείτε να βάλετε όσα θέλετε και ότι διαστάσεις θέλετε. Στο script αυτό δηλώνουμε το url της εικόνας(banner) , το link που θα πηγαίνει το κάθε banner όταν το πατάμε και την περιγραφή (alt) που θα έχει το κάθε banner.

Για μεγαλύτερη ευκολία χρησιμοποιήσα του λέξεις image, link και alt. Υπάρχουν 2 τρόποι για να φτιάξουμε αυτό το script.

O πρώτος είναι να το κάνουμε να αλλάζουν τα banner κάθε κάποια δευτερόλεπτα (εγώ χρησιμοποίησα κάθε 20'').

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

<script language="JavaScript">
var imgs1 = new Array&#40;"image1","image2","image3","image4","image5","image6","image7","image8","image9","image10"&#41;
var lnks1 = new Array&#40;"link1","link2","link3","link4","link5","link6","link7","link8","link9","link10"&#41;
var alt1 = new Array&#40;"alt1","alt2","alt3","alt4","alt5","alt6","alt7","alt8","alt9","alt10"&#41;
var currentAd1 = 0
var imgCt1 = 10
function cycle1&#40;&#41; &#123;
  currentAd1++
  if &#40;currentAd1 == imgCt1&#41; &#123;
    currentAd1 = 0
  &#125;
  document.adBanner1.src=imgs1&#91;currentAd1&#93;
  document.adBanner1.alt=alt1&#91;currentAd1&#93;
  adLink1.href=lnks1&#91;currentAd1&#93;
  setTimeout&#40;"cycle1&#40;&#41;",20 * 1000&#41;
&#125;
</script>
<a href="link1" name="adLink1" target="_blank"><img src="image1" name="adBanner1" border="0" width="468" height="60"></a>
<script language="JavaScript">
cycle1&#40;&#41;
</script>
Ο δεύτερος τρόπος είναι να κάνουμε τα banner να αλλάζουν κάθε φορά που αλλάζουμε ή ανανεώνουμε την σελίδα.

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

<script language="JavaScript">
<!-- Begin
var ad_cnt1 = 10;
var now1 = new Date&#40;&#41;
var sec1 = now1.getSeconds&#40;&#41;
var ad1 = sec1 % ad_cnt1;
ad1 +=1;
if &#40;ad1==1&#41; &#123;
url1="link1";
banner1="image1";
width1="468";
height1="60";
alt1="alt1";
&#125;
if &#40;ad1==2&#41; &#123;
url1="link2";
banner1="image2";
width1="468";
height1="60";
alt1="alt2";
&#125;
if &#40;ad1==3&#41; &#123;
url1="link3";
banner1="image3";
width1="468";
height1="60";
alt1="alt3";
&#125;
if &#40;ad1==4&#41; &#123;
url1="link4";
banner1="image4";
width1="468";
height1="60";
alt1="alt4";
&#125;
if &#40;ad1==5&#41; &#123;
url1="link5";
banner1="image5";
width1="468";
height1="60";
alt1="alt5";
&#125;
if &#40;ad1==6&#41; &#123;
url1="link6";
banner1="image6";
width1="468";
height1="60";
alt1="alt6";
&#125;
if &#40;ad1==7&#41; &#123;
url1="link7";
banner1="image7";
width1="468";
height1="60";
alt1="alt7";
&#125;
if &#40;ad1==8&#41; &#123;
url1="link8";
banner1="image8";
width1="468";
height1="60";
alt1="alt8";
&#125;
if &#40;ad1==9&#41; &#123;
url1="link9";
banner1="image9";
width1="468";
height1="60";
alt1="alt9";
&#125;
if &#40;ad1==10&#41; &#123;
url1="link10";
banner1="image10";
width1="468";
height1="60";
alt1="alt10";
&#125;
document.write&#40;'<center><a href="' + url1 + '" target="_blank">'&#41;;
document.write&#40;'<img src="' + banner1 + '" width=' + width1 + ' height=' + height1 + ' border=0 alt="' + alt1 + '"></a>'&#41;;
document.write&#40;'</center>'&#41;;
// End -->
</SCRIPT>
LET THE C0DER IN YOUR LIFE
Fatal Error: Unable to read 3555 bytes in /root/head/brain/task.php on line 0

Εικόνα

LightForce
WebDev Moderator
Δημοσιεύσεις: 3812
Εγγραφή: 13 Απρ 2003 23:49

Σύστημα banner

Δημοσίευση από LightForce » 01 Ιουν 2004 23:49

ωραιο Αλεξη :wink:

Άβαταρ μέλους
HeLL_GoD
Δημοσιεύσεις: 294
Εγγραφή: 06 Απρ 2003 12:25
Τοποθεσία: Terrored in the ShadowS...
Επικοινωνία:

Σύστημα banner

Δημοσίευση από HeLL_GoD » 02 Ιουν 2004 03:34

Ωραιος Filter μου χρειαζεται ;)

Άβαταρ μέλους
eloy
Δημοσιεύσεις: 13
Εγγραφή: 21 Ιαν 2004 16:03

Σύστημα banner

Δημοσίευση από eloy » 02 Ιουν 2004 14:15

Αυτο ειναι για το nuke php? Μπορεις να βαλεις αυτο τον κωδικα σε σελιδα html, και αν ναι, απο που μπορει να βλεπει τη διαδρομη για τα banners που εχει βαλει καποιος?

morfeas2
Δημοσιεύσεις: 13
Εγγραφή: 17 Μάιος 2004 18:42

Σύστημα banner

Δημοσίευση από morfeas2 » 02 Ιουν 2004 14:40

Παιδια εγω ηθελα να ρωτησω κατι αλλο!!!
Πειτε οτι αυτα τα banner πεταγονται σε ενα popup!! Πως μπορουμε να το φιλτραρουμε, δηλαδη να φαινεται μονο 3 φορες στον χρηστη (με 3 reload) και να φαινεται σε συγκεκριμενες ωρες τις μερας!!

Αυτα τα ολιγα
Thanks

Άβαταρ μέλους
alxk
Δημοσιεύσεις: 718
Εγγραφή: 25 Μάιος 2003 23:48
Τοποθεσία: Αθήνα | Βούλα

Σύστημα banner

Δημοσίευση από alxk » 03 Ιουν 2004 16:49

Μπράβο Filter 8)
έψαχνα κάτι τέτοιο .

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

Σύστημα banner

Δημοσίευση από xmavidis » 03 Ιουν 2004 17:42

eloy έγραψε:Αυτο ειναι για το nuke php? Μπορεις να βαλεις αυτο τον κωδικα σε σελιδα html, και αν ναι, απο που μπορει να βλεπει τη διαδρομη για τα banners που εχει βαλει καποιος?
Αυτός ο κώδικας είναι javascript και όχι php. Μπορείς να το βάλεις σε σελίδα .html και θα δουλέψει! :wink:
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
tolis_montana
Honorary Member
Δημοσιεύσεις: 913
Εγγραφή: 13 Απρ 2004 01:15
Τοποθεσία: στο κοσμο μου...
Επικοινωνία:

Σύστημα banner

Δημοσίευση από tolis_montana » 15 Νοέμ 2004 15:27

mporei na mas pei kanenas ton kwdika gia php ?
kafe fora dhl poy kanoume ananewsh na allazei banner ?

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

Σύστημα banner

Δημοσίευση από Basilakis » 15 Νοέμ 2004 16:15

Νομίζω πως καλύτερα να το ρωτίσεις σε ξεχωριστό ερλώτημα αυτό.. Αν και με μία αναζήτηση θα βρείς κάποιο post.... Anyway επιδή είμαι καλός...


http://www.freestuff.gr/forums/viewtopi ... ght=phpads

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

Σύστημα banner

Δημοσίευση από skeftomilos » 23 Φεβ 2005 03:37

Ο σκοπός του πρώτου τεχνάσματος είναι να εναλλάσονται οι εικόνες κατά τη διάρκεια της ανάγνωσης της σελίδας. Πιστεύω ότι είναι αμφιλεγόμενη τεχνική καθώς μπορεί να γίνει ενοχλητική για το χρήστη. Κάτι παρόμοιο συμβαίνει και με το ίδιο το FreeStuff.gr με το κάτω IFrame που υπάρχει σε όλες τις σελίδες. Η σελίδα που φορτώνεται στο IFrame έχει την εξής οδηγία στο <head>:

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

<meta http-equiv="REFRESH" content="300; url=http&#58;//ads.freestuff.gr/a/view.pl">
Αυτό προκαλεί αυτόματη ανανέωση της σελίδας κάθε 5 λεπτά. Δυσκολεύομαι να καταλάβω το πρακτικό όφελος αυτής της επιλογής, δεδομένου ότι λόγω της δομής του site ο κάθε χρήστης θα δει κάμποσες σελίδες κατά τη διάρκεια μίας επίσκεψης. Επομένως θα δει και αρκετές διαφορετικές διαφημίσεις. Το πρόβλημά μου είναι ότι συνηθίζω να έχω πολλές σελίδες (μέχρι 20) ανοιχτές ταυτόχρονα σε διαφορετικά Tabs του browser. Όλες αυτές οι σελίδες ανανεώνουν μέρος του περιεχομένου τους κάθε 5 λεπτά, δηλαδή κατά μέσω όρο 4 σελίδες το λεπτό. Αυτό περιορίζει το bandwidth της PSTN σύνδεσής μου κατά 60K περίπου το λεπτό, ίσως και περισσότερο. Καθόλου ασήμαντο αν ταυτόχρονα έχω σε εξέλιξη κάποιο μεγάλο download! Ίσως θα έπρεπε να υπήρχε μία επιλογή για την απενεργοποίηση αυτού του χαρακτηριστικού από το χρήστη.

Αν και αμφισβητώ την πρακτική αξία της τεχνικής, δε μπορώ να μη μπω στον πειρασμό να προτείνω μία μικρή βελτίωση! Όπως είναι το script, η νέα εικόνα εμφανίζεται αργά-αργά καθώς φορτώνεται. Μπορούμε να κάνουμε preload της εικόνας και να την εμφανίσουμε όταν έχει κατέβει ολόκληρη, π.χ.:

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

var img = new Image&#40;&#41;
img.onload = function&#40;&#41; &#123; document.adBanner1.src = img.src &#125;
img.src = imgs1&#91;currentAd1&#93;
Το παράδειγμα είναι κάπως απλοποιημένο. Μπορούμε φυσικά να προσθέσουμε λίγο κώδικα για την ανανέωση του alt της εικόνας, καθώς και του href του link.

Η δεύτερη τεχνική είναι ορθότερη κατά τη γνώμη μου, αν και είναι λύση ανάγκης. Αν έχουμε τη δυνατότητα να τρέξουμε το script στον server (PHP, ASP κ.λπ.) είναι καλύτερο να το προτιμήσουμε. Γιατί να κατεβάσουμε 3 ως 4K κώδικα στον client μόνο και μόνο για να διαβάσουμε 3 string? Πάντως αν δεν έχουμε επιλογή, καλό είναι να προσθέσουμε και ένα tag <noscript> ώστε οι χωρίς JavaScript χρήστες να δουν έστω μία στατική διαφήμιση.

Για την επιλογή μίας τυχαίας εικόνας μπορούμε να χρησιμοποιήσουμε τη Math.random() αντί για τη new Date().getSeconds(), όπως στα τυχαία κείμενα. Ακόμα καλύτερο αν και πιο περίπλοκο θα ήταν να χρησιμοποιήσουμε cookies ώστε να εξασφαλίσουμε ότι ο ίδιος χρήστης δε θα δει δεύτερη φορά την ίδια διαφήμιση, αν δε δει πρώτα όλες τις υπόλοιπες.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
arkoudi
Δημοσιεύσεις: 147
Εγγραφή: 15 Φεβ 2005 02:01

Σύστημα banner

Δημοσίευση από arkoudi » 15 Αύγ 2005 04:18

Mpouroume na valloule Flash banner ston scroller kai pos ?
www.mypoco.net
Μην ψαχνεις αλλο με τις ωρες...
www.mypoco.net/11mypoco-toolbar.htm Δειτε δωρεαν πανω απο 60 TV Channels και ακουστε 50 Radio Channels , web εργαλεια , Hot , Funny Links ολα στην My Poco Toolbar
15000 Downloads σε 1 μηνα απο Ελληνες χρηστες!

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Σύστημα banner

Δημοσίευση από Cmg__ » 21 Αύγ 2005 03:25


Άβαταρ μέλους
arkoudi
Δημοσιεύσεις: 147
Εγγραφή: 15 Φεβ 2005 02:01

Σύστημα banner

Δημοσίευση από arkoudi » 29 Αύγ 2005 23:11

Mpouroume na valloule Flash banner ston scroller kai pos ?

Kamia voithia... ?
www.mypoco.net
Μην ψαχνεις αλλο με τις ωρες...
www.mypoco.net/11mypoco-toolbar.htm Δειτε δωρεαν πανω απο 60 TV Channels και ακουστε 50 Radio Channels , web εργαλεια , Hot , Funny Links ολα στην My Poco Toolbar
15000 Downloads σε 1 μηνα απο Ελληνες χρηστες!

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Σύστημα banner

Δημοσίευση από ALR » 29 Οκτ 2005 00:26

Έχω μια απορία για το συγκεκριμένο Script.

Καταρχήν κάνω ένα παράδειγμα και αρχίζει από την δεύτερη εικόνα που ορίζω και όταν φτάνει ξανά στην πρώτη βγάζει κενή εικόνα , γράφει "undefined" και σταματάει εκεί.

ο Κώδικας που χρησιμοποιώ είναι αυτός :

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

<script language="JavaScript">
var imgs1 = new Array&#40;"fn000275.jpg","Untitled.jpg","lchalkidiki.jpg"&#41;
var lnks1 = new Array&#40;"http&#58;//www.in.gr","http&#58;//baba.com","http&#58;//bobo.com"&#41;
var alt1 = new Array&#40;"VIMA","baba","bobo"&#41;
var currentAd1 = 0
var imgCt1 = 10
function cycle1&#40;&#41; &#123;
  currentAd1++
  if &#40;currentAd1 == imgCt1&#41; &#123;
    currentAd1 = 0
  &#125;
  document.adBanner1.src=imgs1&#91;currentAd1&#93;
  document.adBanner1.alt=alt1&#91;currentAd1&#93;
  adLink1.href=lnks1&#91;currentAd1&#93;
  setTimeout&#40;"cycle1&#40;&#41;",5 * 1000&#41;
&#125;
</script>
<a href="link1" name="adLink1" target="_blank"><img src="image1" name="adBanner1" border="0" width="468" height="60"></a>
<script language="JavaScript">
cycle1&#40;&#41;
</script> 
Μπορεί κάποιονς να μου εξηγήσει τι κάνω λάθος ;
Επίσης δεν κατάλαβα ακριβώς τι βάζουμε έξω από το Script, στο href="link1 και img src="image1"
Πρέπει δηλαδή να δηλώσουμε στην html την πρώτη εικόνα και το πρώτο link και μετά τα υπόλοιπα τα κάνει η javascript ;

Ευχαριστώ εκ των προταίρων!

[/code]

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

Σύστημα banner

Δημοσίευση από skeftomilos » 29 Οκτ 2005 02:11

Το script απαιτεί να ορίσεις τη μεταβλητή imgCt1 ίση με τον αριθμό των εναλλακτικών banners:

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

var imgCt1 = 3
Αλλά μιας κι έχει περάσει αρκετός καιρός από τη δημιουργία αυτού του script, ας προτείνω κάτι πιο σύγχρονο. :)

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

<html>
  <head>
    <script type="text/javascript">
      var bannerImages = &#91;
        &#91;"fn000275.jpg"   ,"http&#58;//www.in.gr","VIMA"&#93;,
        &#91;"Untitled.jpg"   ,"http&#58;//baba.com" ,"baba"&#93;,
        &#91;"lchalkidiki.jpg","http&#58;//bobo.com" ,"bobo"&#93;,
      &#93;
      bannerImages.SECONDS = 5
      
      bannerImages.current = 0
      bannerImages.change = function&#40;&#41; &#123;
        var self = this
        document.getElementById&#40;'adBanner1'&#41;.src = this&#91;this.current&#93;&#91;0&#93;
        document.getElementById&#40;'adBanner1'&#41;.alt = this&#91;this.current&#93;&#91;1&#93;
        document.getElementById&#40;'adLink1'&#41;.href = this&#91;this.current&#93;&#91;2&#93;
        this.current++
        if &#40;!this&#91;this.current&#93;&#41; this.current = 0
        setTimeout&#40;function&#40;&#41; &#123;self.change&#40;&#41;&#125;, this.SECONDS * 1000&#41;
      &#125;
      window.onload = function&#40;&#41; &#123;
        bannerImages.change&#40;&#41;
      &#125;
    </script>
  </head>
  <body>
    <h2>Σύστημα banner</h2>
    <a href="javascript&#58;;" id="adLink1" target="_blank"><img src="" id="adBanner1" border="0" width="468" height="60"></a>
  </body>
</html>
- Νομίζω ότι τα data για τα banners μπαίνουν πιο εύκολα όταν είναι σε διαφορετική γραμμή το καθένα.
- Δε χρειάζεται μέριμνα για το πλήθος των links, το script καταλαβαίνει μόνο του πόσα είναι.
- Δε δημιουργεί πολλαπλές μεταβλητές στο global namespace παρά μόνο μία, την bannerImages.
- Id αντί για name (σιγά την επανάσταση ρε φίλε!).
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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