list, change picture

dimitris_pa · 23 Μαρτίου 2011

καλημερα, βρε παιδες μηπως ξερει κανεις πως να κανω μια λιστα (<option>epilogi1</option> etc) και με αυτην να αλλαζω (αρχικα) φωτογραφια ? μπορω να βαλω html, php, javascript και οτι αλλο θα το τρεξει ο server.

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

Uberalles_gr · 23 Μαρτίου 2011

Αυτό που θες γίνεται με javascript (ή jquery)

Χοντρικά με το αλλάζει κάποια τιμή στο select

>
<select onchange="my_func(this.value)">
 <option value="photo1.jpg">My Photo 1</option>
 <option value="photo2.jpg">My Photo 2</option>
 <option value="photo3.jpg">My Photo 3</option>
</select>

καλείς την συνάρτηση της javascript my_func και περνάς σαν παράμετρο το ID του option.

Η συνάρτηση my_func είναι κάπως έτσι

>
function my_func(photo)
{
 document.getElementById("change_photo").innerHTML = "<img src='"+photo+"' border='0' alt='' title=''>";
}

και πάει σε όποιο element έχει ID, change_photo και βάζει το νέο σου image.

Το element με id = change_photo είναι της μορφής

>
<div id="change_photo"><img src='my_photo.jpg' border='0' alt='My Photo' title='My Photo'></div>

dimitris_pa · 23 Μαρτίου 2011

ευχαριστω.....αλλα δεν μπορω να το πετυχω

βασικα θελω με την λιστα να αλλαζω 6 φωτογραφιες ταυτοχρονος

μηπως μπορεις να μου κανεις κανενα παραδειγμα αν εχει χρονο?

η κανα λινκ για κατεβασμα ? ξερω ζηταω πολλα αλλα εχω ενα χρονο να ασχοληθω και το χρειαζομαι.....

Uberalles_gr · 23 Μαρτίου 2011

Στείλε μου τον κώδικα σε pm να στο φτιάξω

dimitris_pa · 23 Μαρτίου 2011

Στείλε μου τον κώδικα σε pm να στο φτιάξω

σου εστειλα

Remali-R- · 23 Μαρτίου 2011

Πολύ ενδιαφέρον θέμα;

Μήπως θα μπορούσατε να στήλετε που φτίαξατε μήπως για να καταλάβουμε καλύτερα τι γίνεται;

Ευχαριστώ

dewn735 · 23 Μαρτίου 2011

Πολύ ενδιαφέρον θέμα;

Μήπως θα μπορούσατε να στήλετε που φτίαξατε μήπως για να καταλάβουμε καλύτερα τι γίνεται;

Ευχαριστώ

Ενώνοντας τα κομμάτια κώδικα του Uberalles_gr, φτιάξε μια νέα σελίδα με αυτό το περιεχόμενο:

><html>
<head>
<script type="text/javascript">
function my_func(photo)
{
 document.getElementById("change_photo").innerHTML = "<img src='"+photo+"' border='0' alt='' title=''>";
}
</script>
</head>
<body>

<!-- Μια μικρή διόρθωση εδώ -->
<select id="pic" onchange="my_func(this.value)">
 <option value="photo1.gif">My Photo 1</option>
 <option value="photo2.gif">My Photo 2</option>
 <option value="photo3.gif">My Photo 3</option>
</select>

<div id="change_photo"><img src='photo1.gif' border='0' alt='My Photo' title='My Photo'></div>

</body>
</html>

στον ίδιο φάκελο με αυτή αποθήκευσε και τρεις εικόνες με ονόματα photo1.gif, photo2.gif και photo3.gif κι έτοιμος!

Uberalles_gr · 24 Μαρτίου 2011

Γενικά, αυτό που ήθελε να κάνει ο φίλος μας dimitris_pa, ήταν να αλλάζει τις γλώσσες και αυτόματα και ενημερώνεται και η σελίδα του, δηλαδή το "Επικοινωνία" να γίνει "Contact" και κτλπ..

Του εξήγησα, ότι αυτό θα ήταν πολύ πιο εύκολο να γίνει με το να περνάς παράμετρο στο URL την γλώσσα και μετά να χρησιμοποιήσεις DEFINE για να κάνεις την δουλειά σου. Είναι πολύ πιο εύκολο και πολύ πιο γρήγορο.

Ο dimitris_pa ήθελε να αλλάζει 6 εικόνες (αρχικά), με το που διάλεγε άλλη γλώσσα. Ο javascript κώδικας θα ήταν κάπως έτσι

>
function change_lang(lang)
{
 if (lang == "en")
 {
   document.getElementById("home").innerHTML = "<img border='0' src='Home.jpg' width='160' height='50' />";
   document.getElementById("tutorials").innerHTML = "<img border='0' src='Tutorials.jpg' width='160' height='50' />";
   document.getElementById("forum").innerHTML = "<img border='0' src='Forum.jpg' width='160' height='50' />";
   document.getElementById("downloads").innerHTML = "<img border='0' src='Downloads.jpg' width='160' height='50' />";
   document.getElementById("contact").innerHTML = "<img border='0' src='Contact.jpg' width='160' height='50' />";
   document.getElementById("about").innerHTML = "<img border='0' src='About.jpg' width='160' height='50' />";
 }
 else if (lang == "sp")
 {
   document.getElementById("home").innerHTML = "<img border='0' src='Home_sp.jpg' width='160' height='50' />";
   document.getElementById("tutorials").innerHTML = "<img border='0' src='Tutorials_sp.jpg' width='160' height='50' />";
   document.getElementById("forum").innerHTML = "<img border='0' src='Forum_sp.jpg' width='160' height='50' />";
   document.getElementById("downloads").innerHTML = "<img border='0' src='Downloads_sp.jpg' width='160' height='50' />";
   document.getElementById("contact").innerHTML = "<img border='0' src='Contact_sp.jpg' width='160' height='50' />";
   document.getElementById("about").innerHTML = "<img border='0' src='About_sp.jpg' width='160' height='50' />";
 }
 else if (lang == "gr")
 {
   document.getElementById("home").innerHTML = "<img border='0' src='Home_gr.jpg' width='160' height='50' />";
   document.getElementById("tutorials").innerHTML = "<img border='0' src='Tutorials_gr.jpg' width='160' height='50' />";
   document.getElementById("forum").innerHTML = "<img border='0' src='Forum_gr.jpg' width='160' height='50' />";
   document.getElementById("downloads").innerHTML = "<img border='0' src='Downloads_gr.jpg' width='160' height='50' />";
   document.getElementById("contact").innerHTML = "<img border='0' src='Contact_gr.jpg' width='160' height='50' />";
   document.getElementById("about").innerHTML = "<img border='0' src='About_gr.jpg' width='160' height='50' />";
 }
}

και ο κώδικας html θα είναι κάπως έτσι

>
<div id="apDiv2">
<a href="Home.php" target="frame"><span id="home"><img border="0" src="Home.jpg" width="160" height="50" /></span></a>
<a href="Tutorials.php" target="frame"><span id="tutorials"><img border="0" src="Tutorials.jpg" width="160" height="50" /></span></a>
<a href="http:\\"><span id="forum"><img border="0" src="Forum.jpg" width="160" height="50" /></span></a>
<a href="Downloads.php" target="frame"><span id="downloads"><img border="0" src="Downloads.jpg" width="160" height="50" /></span></a>
<a href="Contact.php" target="frame"><span id="contact"><img border="0" src="Contact.jpg" width="160" height="50" /></span></a>
<a href="About.php" target="frame"><span id="about"><img border="0" src="About.jpg" width="160" height="50" /></span></a>
</div>
<div id="apDiv3">
<select name="language" id="language" onchange="change_lang(this.value)">
<option value="en">English</option>
<option value="sp">Español</option>
<option value="gr">Ελληνικά</option>
</select>
</div>

Όπως καταλαβαίνετε, πρέπει να γράψεις ΠΟΛΥ κώδικα για να κάνεις αυτό. Και μετά εάν στο μέλλον θες να βάλεις άλλη μία γλώσσα;; Θα πρέπει να γράψεις πολύ πολύ κώδικα και να πας σε κάθε σελίδα και να κάνεις τα απαραίτητες προσθήκες

Υ.Γ. Σωστός ο dewn735, δεν θέλει id στο select αλλά value

dimitris_pa · 24 Μαρτίου 2011

Uberalles_gr το πρωτο το βαζουμε κατω απο την body και το αλλο το τροποποιουμε ?

Uberalles_gr · 24 Μαρτίου 2011

Uberalles_gr το πρωτο το βαζουμε κατω απο την body και το αλλο το τροποποιουμε ?

Σου έχω στείλει Pm

Εγώ το έτρεξα σε εμένα και παίζει μια χαρά

Remali-R- · 24 Μαρτίου 2011

Τώρα κατάλαβα...

Πολύ χρήσιμες πληροφορίες Uberalles_gr.

Μπράβο για τον κώδικα.

Είναι πολύ ευχάριστο το ότι βοήθησες και έβγαλες και τον κώδικα να τον δούμε και να μάθουμε κι εμείς.

Ευχαριστώ πολύ

dimitris_pa · 1 Απριλίου 2011

ευχαριστω!!!

Σύνδεση

list, change picture

Προτεινόμενες αναρτήσεις

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Αρχειοθετημένο

Σύνδεση