Διαφορετικό banner διαφήμισης ανάλογα με το μέγεθος οθόνης

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
dynamikhgynaika
Δημοσιεύσεις: 26
Εγγραφή: 01 Μαρ 2012 17:08

Διαφορετικό banner διαφήμισης ανάλογα με το μέγεθος οθόνης

Δημοσίευση από dynamikhgynaika » 24 Ιαν 2015 02:49

Γεια σας,

θα ήθελα να ρωτίσω αν είναι εφικτό το παρακάτω.

Έστω ότι έχουμε ένα wordpress θέμα responsive το οποίο αλλάζει το στήσιμό του site αναλογα με το μέγεθος οθόνης που προβάλεται. Είναι δυνατόν να προβάλεται διαφορετικό μέγεθος διαφήμισης ανάλογα με το μέγεθος της οθόνης (δεν αναφέρομαι σε adsense διαφημίσεις.) π.χ. θα ήθελα να προβάλει μια εικόνα 300Χ250 αν πρόκειται για κινητό έως 500 πίξελ ή μια διαφορετική εικόνα 720Χ90 αν πρόκειται για οθόνη υπολογιστή π.χ. από 700 έως 1500 πίξελ πλάτος. Γίνεται αυτό; Αν ναι με ποιον κώδικα; Έχω την εντύπωση ότι αυτό δεν πρέπει να είναι ιδιαίτερα δύσκολο, ωστόσο αν κανείς δεν έχει ιδέα τότε φαίνεται βουνό
Δυναμική Γυναίκα
Ένα blog με άποψη για όλα τα γυναικεία θέματα

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Διαφορετικό banner διαφήμισης ανάλογα με το μέγεθος οθόνης

Δημοσίευση από giannis17 » 24 Ιαν 2015 02:56

Γίνεται πολύ εύκολα με απλή css (media queries)

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

@media screen and (max-width: 500px) {
    .adbanner{
        background: #fff url('ad_mobile.jpg') no-repeat fixed center;
        width: 300px;
        height: 250px;
    }
}
@media screen and (min-width: 700px) {
    .adbanner{
        background: #fff url('ad_desktop.jpg') no-repeat fixed center;
        width: 720px;
        height: 90px;
    }
}
αν έβαζες την εικόνα σε img θα έπρεπε να την αλλάζεις με javascript αντ' αυτού την βάζουμε σαν background στο element με κλάση .adbanner και του δίνουμε στάνταρ μέγεθος από το css.
"There is only one problem with common sense; it’s not very common."
– Milt Bryce

dynamikhgynaika
Δημοσιεύσεις: 26
Εγγραφή: 01 Μαρ 2012 17:08

Διαφορετικό banner διαφήμισης ανάλογα με το μέγεθος οθόνης

Δημοσίευση από dynamikhgynaika » 24 Ιαν 2015 12:10

Οκ. Ευχαριστώ πολύ. Τελικά δεν ηταν και τόσο δύσκολο. Αν αντί για imageς έχουμε κώδικες από affiliate banners διαφόρων μεγεθών τότε πώς το κάνουμε; Με αυτό τον τρόπο ή αλλιώς;
Δυναμική Γυναίκα
Ένα blog με άποψη για όλα τα γυναικεία θέματα

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Διαφορετικό banner διαφήμισης ανάλογα με το μέγεθος οθόνης

Δημοσίευση από giannis17 » 24 Ιαν 2015 13:29

όχι για να αλλάζεις κώδικα αντί για φωτογραφία θέλεις javascript

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

<script>
if &#40;window.innerWidth < 500&#41; &#123;
  // κώδικας για mobile
&#125; else &#123;
  // κώδικας για desktop
&#125;
</script>
και το βάζεις μέσα στο element που θες να φαίνεται το banner
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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