Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
ave
Δημοσιεύσεις: 32
Εγγραφή: 30 Ιαν 2005 08:49
Τοποθεσία: seix sou deep forest
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από ave » 13 Αύγ 2005 19:23

Πώς γίνετε κάνοντας κλικ σε μια εικόνα να αλλάζει η εικόνα στο άλλο table, χωρίς την χρήση flash??
Θέλω να αποφύγω το popup, για αυτή ας πούμε τη σελίδα .http://www.avgerinos.gr/hellenicI.html

Ευχαριστώ

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από cordis » 13 Αύγ 2005 19:31

πάρε ιδέα από την σελιδα του πατέρα μου.. http://www.msclavos.com/

έχω φτιάσει ένα div με μία αρχική εικόνα την οποία την αλλάζω όταν ο χρήστης επιλέξει κάποια άλλη. Limitation: όλες οι εικόνες πρέπει να έχουν το ίδιο μέγεθος...

ορισμός του DIV

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

<DIV align="center">
	<DIV class="fframe">
		<img src="images/sculpture_marble_aigokeros.jpg" width="640" height="480" border="0" id="fframeimg">
	</DIV>
</DIV>
ορισμός 2 link που αλλάζουν την εικόνα μέσα στο DIV

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

		<a href="#" onclick="document.all.fframeimg.src='images/sculpture_marble_aigokeros.jpg';">
				<img onclick="document.fframeimg.src='images/sculpture_marble_aigokeros.jpg';" src="images/tb_sculpture_marble_aigokeros.jpg" width="120" height="90"></a>
		<a href="#" onclick="document.all.fframeimg.src='images/sculpture_marble_zigos.jpg';">
				<img onclick="document.fframeimg.src='images/sculpture_marble_zigos.jpg';" src="images/tb_sculpture_marble_zigos.jpg" width="120" height="90"></a>
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

ave
Δημοσιεύσεις: 32
Εγγραφή: 30 Ιαν 2005 08:49
Τοποθεσία: seix sou deep forest
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από ave » 13 Αύγ 2005 19:45

Πολύ καλός ο πατέρας σου.
Όταν είχα γκαλερί στην Μύκονο δούλευα με Τηνιακούς γλύπτες. Μπορεί και να τον ξέρω.

Για το script σίγουρα αυτό πρέπει να είναι. Το βλέπω λίγο δύσκολο για μένα όμως. Το DIV πού μπαίνει ?
Αν δεν ζητώ πολλά, μήπως μπορείς να γίνεις πιο αναλυτικός?

Όπως και νάχει σε ευχαριστώ

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από cordis » 13 Αύγ 2005 20:03

είχε στείλει γλυπτά πριν 3-4 χρόνια στην Μύκονο σε gallery μιας γνωστής του.. ;)

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

δηλ στην γραμμή

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

<img src="images/sculpture_marble_aigokeros.jpg" width="640" height="480" border="0" id="fframeimg">
θα αλλάξεις το src με το url της εικόνας σου καθώς και το width και το height με τα αντίστοιχα δικάσου.

ομοίος στην γραμμή

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

<a href="#" onclick="document.all.fframeimg.src='images/sculpture_marble_zigos.jpg';"> 
            <img onclick="document.fframeimg.src='images/sculpture_marble_zigos.jpg';" src="images/tb_sculpture_marble_zigos.jpg" width="120" height="90"></a>
θα αλλάξεις τα δύο πρώτα src με το url της επόμενης μεγάλης εικόνας και το τελευταίο src με το url του εικονιδίου που την χαρακτηρίζει..
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

ave
Δημοσιεύσεις: 32
Εγγραφή: 30 Ιαν 2005 08:49
Τοποθεσία: seix sou deep forest
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από ave » 13 Αύγ 2005 20:13

Ναι ξέρω, στην «Μύκονος αρτ γκάλερι» εκεί στην μεγάλη άμμο.

Σε ευχαριστώ cordis, θα το δουλέψω την Τρίτη και θα σου στείλω να δείς.
Να περάσεις καλά 8) :beauty:

Ευγένιος

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από cordis » 13 Αύγ 2005 20:15

καλό σ/κ και καλή επιτυχία με την HTML ;)

Γιάννης.
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

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

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από iffor » 13 Αύγ 2005 21:30

@ cordis:

Hello!!!
Μια ερώτηση, δεν θα ήταν καλύτερα να κάνεις preload τις εικόνες του DIV στο site του πατέρα σου?
Στο ρωτάω αυτό γιατί κάποιος με 56-αρα σύνδεση όπως εγώ ( δυστυχώς no money - no funny... για γρηγορότερη σύνδεση... ) κάνοντας κλίκ πάνω στην εικόνα νομίζει στην αρχή ότι κάτι δεν πάει καλά...
Αργεί σχετικά η εικόνα μετά το κλίκ να φορτώσει!

Πάντα φιλικά!
μια νέα αρχή ξεκίνησε...
ένας καινούριος δρόμος άνοιξε...
redpanda.gr

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

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από skeftomilos » 14 Αύγ 2005 13:33

Όταν ο κώδικας έχει document.all σημαίνει ότι τρέχει μόνο στον Internet Explorer. :-? Επίσης όταν το href είναι "#" σημαίνει ότι χωρίς JavaScript τα links είναι νεκρά. :-?

Ένα πολύ απλό παράδειγμα που δουλεύει σε όλους τους browsers, ακόμα και χωρίς JavaScript:

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

<html>
  <head>
    <script type="text/javascript">
      window.onload = function&#40;&#41; &#123;
        var re = /\bgalerry-link\b/i
        for &#40;var i = 0, link; link = document.links&#91;i&#93;; i++&#41; &#123;
          if &#40;re.test&#40;link.className&#41;&#41; &#123;
            link.image = new Image&#40;&#41;
            link.image.src = link.href
            link.onclick = function&#40;&#41; &#123;
              document.getElementById&#40;'galerry-target'&#41;.src = this.image.src
              return false
            &#125;
          &#125;
        &#125;
      &#125;
    </script>
  </head>
  <body>
    <h2>Image_Gallery</h2>
    <img id="galerry-target" src="nebula01.jpg"><br>
    <br>
    <a class="galerry-link" href="nebula01.jpg">Nebula 1</a><br>
    <a class="galerry-link" href="nebula02.jpg">Nebula 2</a><br>
    <a class="galerry-link" href="nebula03.jpg">Nebula 3</a><br>
  </body>
</html>
Τώρα αν δε φαίνεται και πολύ απλό δε φταίω εγώ! :) Είναι το απλούστερο αν θέλουμε και image preloading. Πάντως το τμήμα μέσα στο body είναι αρκετά απλό και εύκολα επεκτάσιμο. Αρκεί κάθε link εικόνας να έχει class="galerry-link".

Live Example

Το demo χωράει πολύ βελτίωση. Π.χ. ένδειξη τρέχοντος link, εμφάνιση λεζάντας, ένδειξη Loading... αν χρειάζεται, title στα links κλπ.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από cordis » 14 Αύγ 2005 14:34

βασικά γι' αυτό το έβαλα εδώ.. για να μου το κάνεις καλύτερο.. :P :P

όσο για το preload, ναι.. πρέπει να γίνει..
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

ave
Δημοσιεύσεις: 32
Εγγραφή: 30 Ιαν 2005 08:49
Τοποθεσία: seix sou deep forest
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από ave » 14 Αύγ 2005 18:21

Ευχαριστώ Skeftomilos, απλό και όμορφο, μπράβο.

Τώρα, πώς κεντράρονται αυτά, και πώς φεύγει η μπλε κορνίζα?

(γυρίσαμε στα εύκολα)

ave
Δημοσιεύσεις: 32
Εγγραφή: 30 Ιαν 2005 08:49
Τοποθεσία: seix sou deep forest
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από ave » 14 Αύγ 2005 19:01

Και κάτι άλλο, που προσπάθησα μάταια.
Σε text με link σε άλλη στήλη, πώς γίνετε το ίδιο, και όταν κάνεις κλικ να ανοίγει το βιογραφικό του ας πούμε (se .gif or why not text) εκεί που είναι το μεγάλο image??

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από cordis » 14 Αύγ 2005 19:18

skeftomilos έγραψε:Όταν ο κώδικας έχει document.all σημαίνει ότι τρέχει μόνο στον Internet Explorer. :-?
γι' αυτό είχα βάλει και το onclick="document.fframeimg.src... ;)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

ave
Δημοσιεύσεις: 32
Εγγραφή: 30 Ιαν 2005 08:49
Τοποθεσία: seix sou deep forest
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από ave » 14 Αύγ 2005 20:58

http://www.avgerinos.gr/beachI.html

Μέχρι εδώ έφτασα. Προτού ξαναδουλέψω όλα τα images στο photoshop, μήπως μπορει δίπλα από το μεγάλο image να υπάρχει κελί όπου να αλάζει μαζί με το εκάστοτε image και να έχει text, πού θα μπορούσαν (τα text) να έχουν links ή άλλα actions ???

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

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από skeftomilos » 15 Αύγ 2005 07:10

Η μπλε κορνίζα φεύγει με border="0", αλλά αυτό το έβαλες βλέπω. Για να συνοδεύεται η κάθε εικόνα από περιγραφικά σχόλια θα χρειαστεί πολύ πιο περίπλοκη JavaScript, ή αλλιώς ... καθόλου JavaScript! Δεν ξέρω αν το σκεφτήκατε αλλά εμένα τώρα μου ήρθε: IFrame! :D

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

<html>
  <head>
    <script type="text/javascript">
      window.onload = function&#40;&#41; &#123;
        var re = /\.gif$|\.png$|\.jpg$/i
        for &#40;var i = 0, link; link = document.links&#91;i&#93;; i++&#41; &#123;
          if &#40;re.test&#40;link.href&#41;&#41; &#123; link.image = new Image&#40;&#41;; link.image.src = link.href &#125;
        &#125;
      &#125;
    </script>
  </head>
  <body>
    <h2>Image_Gallery</h2>
    <iframe name="galerry-target" src="nebula01.jpg" width="350" height="280"
      frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe><br>
    <br>
    <a href="nebula01.jpg" target="galerry-target">Nebula 1</a><br>
    <a href="nebula02.jpg" target="galerry-target">Nebula 2</a><br>
    <a href="nebula03.jpg" target="galerry-target">Nebula 3</a><br>
  </body>
</html>
Live Demo 2

Το script κάνει μόνο preload, οπότε δεν είναι και εντελώς απαραίτητο. Οι εικόνες καταλήγουν μέσα στο IFrame, αλλά τα href των links μπορούν να αλλάξουν ώστε να δείχνουν σε μικρές σελίδες που θα περιέχουν από μία εικόνα και την περιγραφή της. :)

Live Demo 3 (μικρό πρόβλημα στον Firefox)

Αλλαγή θέλουν φυσικά οι διαστάσεις του IFrame ώστε να χωράνε οι εικόνες ή τις σελίδες που θα εμφανίζονται σε αυτό.

Αν οι πληροφορίες βρίσκονται σε κάποια database, το επόμενο λογικό βήμα είναι να αντικατασταθούν όλες αυτές οι όμοιες σελιδούλες με ένα PHP script. Δηλαδή τα links θα γίνουν έτσι:

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

<a href="showpic.php?id=1" target="galerry-target">Nebula 3</a>
Μόνο που την PHP θα πρέπει να την αναλάβει άλλος! :roll: Αν τα data είναι σε flat αρχεία txt ή xml τότε μπορεί να γίνει και με JavaScript αλλά θέλει δουλειά (xmlhttpRequest).

Ένα άλλο παραπλήσιο script για image gallery υπάρχει εδώ: http://www.freestuff.gr/forums/viewtopic.php?t=16829
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

ave
Δημοσιεύσεις: 32
Εγγραφή: 30 Ιαν 2005 08:49
Τοποθεσία: seix sou deep forest
Επικοινωνία:

Αλλαγή εικόνας με κλικ στην ίδια σελίδα

Δημοσίευση από ave » 15 Αύγ 2005 15:08

http://www.avgerinos.gr/erosI.html

Δούλεψα σε αυτή την σελίδα, ήταν δύσκολο, αλλά πολύ καλό. Ευχαριστώ.

Το πρόβλημα παραμένει με τις κορνίζες, αλλά από ότι βλέπω επειδή είναι links.
Τα borders είναι παντού 0. Δεν έχω πουθενά αυτό το χρώμα στο .css και δεν μπορώ να αλλάξω την γραμματοσειρά. Τι συμβαίνει ?

Το html της νέας σελίδας..

<html>
<head>
<title>ErosI</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-7">
<style type="text/css" href="style.css">
body {
margin: 0px;
padding: 0px;
background: #3B3937;
text-align: left;
color:#938372;
}
img {
float: right;
}
</style>
</head>
<body>
<img src="images/EI_05.jpg" border="0">
<h5>"Eyclid's Tavern"</h5><br>
<h4>Digigraphy<br>
Plate size 30 x 24 cm<br>
Paper size 45 x 36 cm<br>
on Hahnemuehle Torchon<br>
100% cotton rag paper<br>
Edition of 45<br>
code EI-05<br>
<a&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;.</a></h4>
</body>
</html>

βεστ

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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