[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

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

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

Απάντηση
Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από ironwiller » 22 Αύγ 2011 18:53

καλησπερα.
ευχαριστω εκ των προτερων οποια απαντηση μου δωσετε.
χρειαζομαι να κατασκευασω μια αρχικη σελιδα στην οποια θελω να εχω το παρακατω αποτελεσμα οπως βλεπετε στις φωτογραφιες
δλδ οταν ο χρηστης πηγαινει πανω απο το κουμπι Ε (και οποιο κουμπι κι αν ειναι αυτο) να αλλαζει εικονα
εχω βρει κανοντας αναζητηση στον γουγλη για image swap, αυτο απλο.
απλα επειδη δεν εχω εμπειρια σε javascript οι απαντησεις που ψαχνω ειναι στα εξης ερωτηματα:
1) επειδη η σελιδα θα εχει ηδη ενα background (σταθερη εικονα οπως φαινεται και στο image που εχω ανεβασει) και τα κουμπια τα θελω στα συγκεκριμενα σημεια. πως το κανω αυτο?
2) μηπως χρειαζεται να ορισω καποιες συντεταγμενες και πως το κανω αυτο?
3) υπαρχει μηπως κατι αλλο εκτος του image swap,mouseover που εχω σκεφτει που ειναι πιο απλο?

ξανα ευχαριστω.
Εικόνα

Εικόνα
Συνημμένα
example-00.png
εικονα 1
(6.43 KiB) Μεταφορτώθηκε 301 φορές
example-01.png
εικονα 2
(6.49 KiB) Μεταφορτώθηκε 306 φορές
Τελευταία επεξεργασία από το μέλος ironwiller την 24 Αύγ 2011 19:15, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από dimsis » 23 Αύγ 2011 11:02

Η εικόνα που αλλάζει που θα βρίσκετε; στο φόντο; μέσα στον κύκλο με τα κουμπιά; σε ένα popup παράθυρο;


1) Αν έχεις φόντο μια άλλη φωτογραφία - εικόνα και βάλεις σε ένα div (ή πολλά) το σχήμα με τα κουμπιά που μας έδειξες, δεν υπάρχει πρόβλημα.

2) Θα ορίσεις position για τα divs. π.χ. position: absolute; top:500x; left:200px

3) πιο απλό δεν νομίζω

Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από ironwiller » 23 Αύγ 2011 12:09

dimsis έγραψε:Η εικόνα που αλλάζει που θα βρίσκετε; στο φόντο; μέσα στον κύκλο με τα κουμπιά; σε ένα popup παράθυρο;


1) Αν έχεις φόντο μια άλλη φωτογραφία - εικόνα και βάλεις σε ένα div (ή πολλά) το σχήμα με τα κουμπιά που μας έδειξες, δεν υπάρχει πρόβλημα.

2) Θα ορίσεις position για τα divs. π.χ. position: absolute; top:500x; left:200px

3) πιο απλό δεν νομίζω
πολυ καλημερα!
ευχαριστω για την απαντηση.
συνολικα θα εχει 1+5+(5) images. δλδ 1 Μεγαλο image το οποιο θα ειναι το background (ολη σχεδον η σελιδα και 5 images (και 5 επιπλεον τα οποια θα ειναι τα swap images)

δλδ να βαλω κανονικα σε φοντο την μεγαλη εικονα και υστερα σε divs να ορισω την θεση του καθε button?
αυτο για να παραμενει ιδιο σε αναλογια οταν θα ειναι διαφορετικες διαστασεις και οθονες, θα πρεπει να το ορισω σαν αρχικο div και μεσα αλλα divs?
μπορεις να μου προτεινεις μια μορφη?
πχ εγω σκεφτομαι το παρακατω (φυσικα με καποιες προσθηκες/βελτιωσεις στην πραξη):

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

<head>
<style>
body &#123; margin&#58; 0; padding&#58; 0; &#125;
div#back &#123; text-align&#58; center; background-image&#58;url&#40;'background.png'&#41;; &#125;
div#b1 &#123; position&#58; absolute; top&#58;500x; left&#58;400px &#125;
div#b2 &#123; position&#58; absolute; top&#58;700x; left&#58;200px &#125;
div#b3 &#123; position&#58; absolute; top&#58;700x; left&#58;600px &#125;
div#b4 &#123; position&#58; absolute; top&#58;900x; left&#58;200px &#125;
div#b5 &#123; position&#58; absolute; top&#58;900x; left&#58;600px &#125;
</style>
</head>
<body>
<div id="back">
   <div id="b1"><img src="button1"></div>
   <div id="b2"><img src="button2"></div>
   <div id="b3"><img src="button3"></div>
   <div id="b4"><img src="button4"></div>
   <div id="b5"><img src="button5"></div>
</div>
</body>
καπως ετσι?

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από dimsis » 23 Αύγ 2011 13:20

Ναι κάπως έτσι όπως το κάνεις, απλά η εικόνα του φόντου εφόσον θα είναι σταθερή μπορεί να μπει και στις δηλώσεις του stylesheet
div#back { text-align: center; background:#ffffff url('fonto.jpg') no-repeat fixed center center; }
ή ακόμα και στο body { background:#ffffff url('fonto.jpg') no-repeat fixed center center; }

edit: είδα το πρόσθεσες το background στο back ήδη.

Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από ironwiller » 23 Αύγ 2011 14:37

dimsis έγραψε:Ναι κάπως έτσι όπως το κάνεις, απλά η εικόνα του φόντου εφόσον θα είναι σταθερή μπορεί να μπει και στις δηλώσεις του stylesheet
div#back { text-align: center; background:#ffffff url('fonto.jpg') no-repeat fixed center center; }
ή ακόμα και στο body { background:#ffffff url('fonto.jpg') no-repeat fixed center center; }

edit: είδα το πρόσθεσες το background στο back ήδη.
ευχαριστω για την συμβουλη σου, καθως περιμενα δοκιμαζα και διαβαζοντας και την προταση σου νομιζω το καταφερα, δες το zip για να μου πεις.

υπαρχει τροπος οταν γινεται zoom in/out να μην χαλαει η διαταξη των κουμπιων με το φοντο? η τεχνικα δε μπορει να γινει κατι τετοιο?

ξανα ευχαριστω
Συνημμένα
test.zip
(5.28 KiB) Μεταφορτώθηκε 415 φορές

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από dimsis » 23 Αύγ 2011 15:24

Δοκίμασε το κάπως έτσι. Από τη στιγμή που και η εικόνα φόντου έχει σχέση με τις άλλες 5, τότε δεν μπορεί να μπει σαν εικόνα φόντου στο body. Εγώ νόμιζα θα ήταν κάποια άσχετη φωτογραφία σαν ταπετσαρία.
Αντιθέτως αν έχει επαναλαμβανόμενα στοιχεία όπως αυτό που είχες φτιάξει, μπορείς να κάνεις κάτι σαν το συνημμένο που σου ανεβάζω.

Έχει ακόμα κάποια θεματάκια με τον IE που πρέπει να λυθούν, αλλά δεν νομίζω πως θα σε δυσκολέψουν.
Συνημμένα
test.rar
(5.2 KiB) Μεταφορτώθηκε 411 φορές

Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από ironwiller » 23 Αύγ 2011 15:34

dimsis έγραψε:Δοκίμασε το κάπως έτσι. Από τη στιγμή που και η εικόνα φόντου έχει σχέση με τις άλλες 5, τότε δεν μπορεί να μπει σαν εικόνα φόντου στο body. Εγώ νόμιζα θα ήταν κάποια άσχετη φωτογραφία σαν ταπετσαρία.
Αντιθέτως αν έχει επαναλαμβανόμενα στοιχεία όπως αυτό που είχες φτιάξει, μπορείς να κάνεις κάτι σαν το συνημμένο που σου ανεβάζω.

Έχει ακόμα κάποια θεματάκια με τον IE που πρέπει να λυθούν, αλλά δεν νομίζω πως θα σε δυσκολέψουν.
ναι μια χαρα ειναι. (απο τοτε που δουλευω με τα cms, τα "container" τα εχω ξεχασει :P )
παρολα αυτα, τελικα θα κανω αυτο που ουσιαστικα εκανες με το container σαν background και υστερα θα κοψω καθε κομματι του "extra" φοντου και θα το βαλω σαν συγκεκριμενα σημεια. μου φαινεται οτι θα ειναι καλυτερα ετσι. κοβω τωρα τις εικονες και θα στο στειλω να το δεις ;)

ευχαριστω ξανα

Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από ironwiller » 23 Αύγ 2011 18:45

λοιπον νομιζω οτι ειμαι ετοιμος αν και οπως θα δεις απο τα πολλα images που τα εχω χωρισει σε αυτο το zip τελικα θα κανω ενα "μεγαλο" background. απλα τωρα το δοκιμασα για να δω αν γινεται.

ερωτηση:
σε αυτο το φτιαξιμο πως θα μπορουσα να εχω width=100% και τα images αριστερο και δεξι να πηγαινουν απευθειας τερμα αριστερα και δεξια αντιστοιχα ανεξαρτητα το μεγεθος της οθονης? θελει πολλες αλλαγες η ειναι κατι απλο?
Συνημμένα
testnew.zip
(220.79 KiB) Μεταφορτώθηκε 407 φορές

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από dimsis » 23 Αύγ 2011 22:50

Ωραίο γίνετε.
Για το άλλο που ρωτάς, πρέπει να κάνεις transparent png τις δυο εικόνες.
Αλλά επειδή έχεις και ένα glow effect στο κέντρο θα χρειαστεί να το κόψεις και αυτό χωριστά.

Δες λίγο τον κώδικα που ανεβάζω, κόψε καθαρές χωρίς το γκρι την αριστερή και την δεξιά εικόνα και κόψε λίγο από το ύψος του μεσαίου + τις γραμμές από το footer ώστε να κάνει repeat-x.
Από το μεσαίο μπορείς να "φας" και άλλο πλάτος από αριστερά και δεξιά...
Συνημμένα
testnew.rar
(219.38 KiB) Μεταφορτώθηκε 418 φορές

Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από ironwiller » 24 Αύγ 2011 03:52

dimsis έγραψε:Ωραίο γίνετε.
Για το άλλο που ρωτάς, πρέπει να κάνεις transparent png τις δυο εικόνες.
Αλλά επειδή έχεις και ένα glow effect στο κέντρο θα χρειαστεί να το κόψεις και αυτό χωριστά.

Δες λίγο τον κώδικα που ανεβάζω, κόψε καθαρές χωρίς το γκρι την αριστερή και την δεξιά εικόνα και κόψε λίγο από το ύψος του μεσαίου + τις γραμμές από το footer ώστε να κάνει repeat-x.
Από το μεσαίο μπορείς να "φας" και άλλο πλάτος από αριστερά και δεξιά...
μετα απο κανα 3ωρο δοκιμων.... ναι...
κατεληξα οτι μαλλον το καλυτερο ειναι το τελευταιο που ειχα ανεβασει και αυτο διοτι
παροτι ακολουθησα αυτα που ειπες και πετυχαν...οι εικονες δεν ηταν ακριβως ετσι οπως θα ηθελα να φαινοντουσταν (αριστερα + δεξια)...και η πλακα ειναι οτι αυτο που τις εκανε να φαινονται οπως θα ηθελα ειναι ο συνδιασμος που εχω στο τελευταιο ανεβασμα...
και επειδη θα ειναι απλα ενα starting page....θεωρω οτι ειναι αρκετες οι δοκιμες που εγιναν μεχρι τωρα.. ;)
θελω να σε ευχαριστησω ξανα για τον χρονο σου και για τις συμβουλες σου.
ολα τα καλυτερα. και εις το επανιδειν.,

edit:
τελικα ειπα να δω κατι που με ενοχλουσε απο χτες οποτε το εφτιαξα... :)

γιατι αλλαζοντας την θεση στα div παροτι το εχουμε ορισει απο το style σε ποιο σημειο θα βρισκεται αλλαζει και την "καλυψει" του ενος div απο το αλλο?
συγκεκριμενα ειχα θεμα με το leftimage div οπου επειδη ηταν πριν απο το main div επεφτε πισω, το μετεφερα μετα το main div και ολα οκ

τελικα εβαλα image στο logo-bg γιατι δε μου δουλευε να το βαλω σαν div και να τα κεντραρω οπως ηθελα, παντως ειναι μια χαρα

το ζορι ηταν να φτιαξω βασικα την εικονα στο main div ωστε να ταιριαζει στις αποχρωσεις των εικονων στα πλαγια αλλα οκ ;)

το toolbar + footer θα αλλαξω το μεγεθος μετα ;)
Συνημμένα
testfinal.zip
(689.27 KiB) Μεταφορτώθηκε 414 φορές

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από dimsis » 24 Αύγ 2011 20:34

Μια χαρά έγινε, nice work!
Λίγο μικρά μου πέφτουν για την ανάλυση μου τα γράμματα στα buttons, αλλά οκ διαβάζονται και έτσι.

keep coding !

Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

[Solved] Javascript για πολλαπλα image swap buttons σε συγκεκριμενα σημεια

Δημοσίευση από ironwiller » 25 Αύγ 2011 01:16

dimsis έγραψε:Μια χαρά έγινε, nice work!
Λίγο μικρά μου πέφτουν για την ανάλυση μου τα γράμματα στα buttons, αλλά οκ διαβάζονται και έτσι.

keep coding !
:D
ευχαριστω για τη βοηθεια ..ξανα
ναι βασικα αυτα θα τα μεγαλωσω απλα επειδη τα ειχα παρει απο illustrator σε 72dpi ειναι ετσι

κ εσυ το ιδιο :)

Απάντηση

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

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

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