Εικονίδια με ομαλό pop up

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

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

Απάντηση
Nikolaoupan
Δημοσιεύσεις: 205
Εγγραφή: 12 Απρ 2003 14:58

Εικονίδια με ομαλό pop up

Δημοσίευση από Nikolaoupan » 29 Ιούλ 2005 00:53

Καλησπέρα


Θέλω να τοποθετήσω σε μια άκρη στο site μου μερικά εικονίδια (10) δε 2 κάθετες στήλες των 5 εικονιδίων το καθένα. Θέλω όποιος περνάει το δείκτη του ποντικιού πάνω από κάθε εικονίδιο να ανοίγει ένα μικρό παράθυρο με 1 ή περισσότερες εικόνες, λίγο κείμενο και ένα link στο τέλος του κειμένου. Το παραθυράκι θα πρέπει να είναι ανοιχτό όσο ο επισκέπτης έχει το δείκτη του ποντικιού μέσα σε αυτό, και μόλις βγει έξω από αυτό το παράθυρο πρέπει να εξαφανίζεται. Το παράθυρο πρέπει να ανοίγει ομαλά (όχι pop up) κάτι σε javascript ή μήπως σε flash? . Πρέπει να έχω τη δυνατότητα να επιλέξω τις διαστάσεις του και τη θέση εμφάνισης του, και αν θα καλύπτει τα υπόλοιπα εικονίδια ή όχι. Από άποψη ταχύτητας κατεβάσματος τι να επιλέξω: javascript ή flash? Ξέρει κανένας αν αυτοί οι DHMTL menu makers που υπάρχουν κάνουν για τέτοια δουλειά? Κανένα πρόγραμμα έχει να προτείνει κανείς? Γιατί από γνώσεις προγραμματισμού μηδέν :) .

Nikolaoupan
Δημοσιεύσεις: 205
Εγγραφή: 12 Απρ 2003 14:58

Εικονίδια με ομαλό pop up

Δημοσίευση από Nikolaoupan » 30 Ιούλ 2005 13:21

Καμμιά ιδέα ? :(


emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

Εικονίδια με ομαλό pop up

Δημοσίευση από emphasy » 30 Ιούλ 2005 17:39

Όχι μαλλον, σε flash γίνετε αυτό που θες αν κατάλαβα καλά, δηλάδη εσύ θες στο mouseover να εμφανίζεται ένα νεο 'κουτάκι' που θα έχει μέσα την εικόνα...

Nikolaoupan
Δημοσιεύσεις: 205
Εγγραφή: 12 Απρ 2003 14:58

Εικονίδια με ομαλό pop up

Δημοσίευση από Nikolaoupan » 30 Ιούλ 2005 17:51

Αν γίνεται σε flash υπάρχει κάποιο tutorial για να με παραπέμωετε? Έχω την εντύπωση ότι κάτι τέτοιο έχω δεί με javascript, αλλά μπορεί να κάνω και λάθος.

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

Εικονίδια με ομαλό pop up

Δημοσίευση από RADICAL » 30 Ιούλ 2005 17:55

Άν δες θές να είναι pop up τότε αναγκαστικά πρέπει να δουλέψεις με layers.
Θα φτιάξεις τα layers με το περιεχόμενο που θές μέσα στη ίδια σελίδα αλλα θα είναι hidden και με javascript με onmouseOver event θα τα κάνεις visible και θα τα εμφανίζεις όπου θές στην οθόνη. Μπορείς επίσης να ορίσεις και πιο θα καλύπτει το άλλο με το z-index.

Ένα παράδειγμα:

το layer θα είναι κάπως έτσι:

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

<div id="Layer1" style="position&#58;absolute; width&#58;200px; height&#58;115px; top&#58;50px; left&#58;30px; visibility&#58;hidden; z-index&#58;1">
 <img src="/image.jpg">
 </div>
Όπου με το top και το left καθορίζεις την απόσταση απο το πάνω και το αριστερό μέρος της οθόνης όπου θα εμφανίζεται.Το z-index καθορίσει πιο θα είναι πάνω απο το άλλο. Εάν δλδ στο δεύτερο layer δώσεις z-index=2 θα υπερκαλύψει το πρώτο(η το αντίστροφο δεν θυμάμαι) και πάει λέγοντας.

Τώρα για να εμφανίσεις το layer o κώδικας (με την βοήθεια του dreamweaver) θα είναι έτσι:

χρειάζεται καταρχάς αυτό το script στο Head:

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

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage&#40;init&#41; &#123;  //reloads the window if Nav4 resized
  if &#40;init==true&#41; with &#40;navigator&#41; &#123;if &#40;&#40;appName=="Netscape"&#41;&&&#40;parseInt&#40;appVersion&#41;==4&#41;&#41; &#123;
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; &#125;&#125;
  else if &#40;innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH&#41; location.reload&#40;&#41;;
&#125;
MM_reloadPage&#40;true&#41;;

function MM_findObj&#40;n, d&#41; &#123; //v4.01
  var p,i,x;  if&#40;!d&#41; d=document; if&#40;&#40;p=n.indexOf&#40;"?"&#41;&#41;>0&&parent.frames.length&#41; &#123;
    d=parent.frames&#91;n.substring&#40;p+1&#41;&#93;.document; n=n.substring&#40;0,p&#41;;&#125;
  if&#40;!&#40;x=d&#91;n&#93;&#41;&&d.all&#41; x=d.all&#91;n&#93;; for &#40;i=0;!x&&i<d.forms.length;i++&#41; x=d.forms&#91;i&#93;&#91;n&#93;;
  for&#40;i=0;!x&&d.layers&&i<d.layers.length;i++&#41; x=MM_findObj&#40;n,d.layers&#91;i&#93;.document&#41;;
  if&#40;!x && d.getElementById&#41; x=d.getElementById&#40;n&#41;; return x;
&#125;

function MM_showHideLayers&#40;&#41; &#123; //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for &#40;i=0; i<&#40;args.length-2&#41;; i+=3&#41; if &#40;&#40;obj=MM_findObj&#40;args&#91;i&#93;&#41;&#41;!=null&#41; &#123; v=args&#91;i+2&#93;;
    if &#40;obj.style&#41; &#123; obj=obj.style; v=&#40;v=='show'&#41;?'visible'&#58;&#40;v=='hide'&#41;?'hidden'&#58;v; &#125;
    obj.visibility=v; &#125;
&#125;
//-->
</script>
και μετά στο εικονίδιο βάζεις:

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

<img src="image2.jpg" onMouseOver="MM_showHideLayers&#40;'Layer1','','show'&#41;">

Με τον ίδιο τρόπο λοιπόν μπορείς να φτιάξεις και άλλα layers και να τα καλέις με το onMouseOver="MM_showHideLayers('ToLayerPouThes','','show')"

Εκεί που λεεί show μπορείς να βάλει και hide για να το κρύψεις.

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

Εγώ θα σου πρότεινα να ρίξεις μια ματιά σε αυτό το script:

http://javascript.internet.com/navigati ... ction.html

Ανοίγει popup παράθυρα βάζοντας απλά class="popup" στο link που θές χωρίς να βάζεις onClick events κλπ.
Εικόνα

Nikolaoupan
Δημοσιεύσεις: 205
Εγγραφή: 12 Απρ 2003 14:58

Εικονίδια με ομαλό pop up

Δημοσίευση από Nikolaoupan » 30 Ιούλ 2005 19:06

Radical ευχαριστώ πάρα πολύ για την αναλυτικότατη απάντηση.

Στο link που μου έδωσες δεν βλέπω κάποιο demo. Είμαι σίγουρος ότι κάνω κάποια στοκιά, αλλά δεν ξέρω τι :)

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

Εικονίδια με ομαλό pop up

Δημοσίευση από RADICAL » 30 Ιούλ 2005 19:17

το demo είναι τα 3 links που έχει πάνω απο το script

JavaScript Source
Script Search
Web Reference

Είναι ψαρώτικο γιατί δεν λέει πουθενά demo ξέρω γω. Και γώ τα ψαχνα. :wink:

Πάντως είναι απλά popup μην φανταστείς τπτ.

Επίσης το σε πιό σημείο της οθόνης θα ανοίξει το ορίζεις πειράζοντας τα top και left που έχει στο κώδικα μέσα στο head.
Εικόνα

Nikolaoupan
Δημοσιεύσεις: 205
Εγγραφή: 12 Απρ 2003 14:58

Εικονίδια με ομαλό pop up

Δημοσίευση από Nikolaoupan » 30 Ιούλ 2005 19:30

Τη στιγμή που ήρθα να κάνε edit το μήνυμά μου, μου είχες ήδη απαντήσει! Θα του ρίξω μια ματιά.
Ευχαριστώ και πάλι. :D

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

Εικονίδια με ομαλό pop up

Δημοσίευση από skeftomilos » 31 Ιούλ 2005 09:30

Η μέθοδος window.open() που χρησιμοποιείται στο script κανονικά επιστρέφει ένα αντικείμενο window που αφορά το νέο παράθυρο. Όμως ... αν υπάρχει popup-blocker στον browser του χρήστη, η μέθοδος επιστρέφει null! Οπότε καλό είναι να ελέγχουμε την επιστρεφόμενη τιμή για να ελέγξουμε αυτή την περίπτωση και να κάνουμε την κατάλληλη ενέργεια.

Πάντως νομίζω ότι με τον όρο ομαλό pop up ο Nikolaoupan δεν εννοεί πραγματικό παράθυρο σαν το window.open(), αλλά ψευδοπαράθυρο, όπως το πρώτο παράδειγμα του Radical με τα layers. Με τη διαφορά ότι ο κώδικας που βγάζει το Dreamweaver γι αυτή τη δουλειά είναι απελπιστικά περίπλοκος στον όψη (γιατί είναι highly optimized for size).

Nikolaoupan θα μπορούσα να γράψω εδώ ένα μικρό script που να κάνει αυτό που θέλεις, αλλά δυστυχώς η περιγραφή που δίνεις είναι πολύ γενική. :think:
Θέλω όποιος περνάει το δείκτη του ποντικιού πάνω από κάθε εικονίδιο να ανοίγει ένα μικρό παράθυρο με 1 ή περισσότερες εικόνες, λίγο κείμενο και ένα link στο τέλος του κειμένου.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Nikolaoupan
Δημοσιεύσεις: 205
Εγγραφή: 12 Απρ 2003 14:58

Εικονίδια με ομαλό pop up

Δημοσίευση από Nikolaoupan » 31 Ιούλ 2005 10:14

Πράγματι αυτό που έχω στο μυαλό μου είναι ένα ψευδοπαράθυρο, και όχι ένα "κανονικό" pop up window. Δυστυχώς, δεν πρόλαβα να εφαρμόσω τον κώδικα του Radical, αλλά νομίζω πως έχει καταλάβει τι θέλω.

Αυτό που θέλω είναι το "ομαλό παράθυρο" που θα εμφανίζεται μόλις ο δείκτης του ποντικιού περάσει πάνω από ένα link (στη δική μου περίπτωση το link θα είναι ένα μικρό γραφικό) να απεικονίζει HTML, με την οποία μπορώ να κάνω να εμφανίζεται μέσα σε αυτό το παράθρυο ότι θέλω (φωτογραφίες, με κείμενο και links). Η περιγραφή που έδωσα στο πρώτο post μου δεν είναι και η καλύτερη. Αυτό που θέλω δεν πρέπει να προυποθέτει click στο γραφικό για να εμφανιστεί το παράθυρο, αλλά ένα απλό πέρασμα πάνω από αυτό με το δείκτη του ποντικιού. Επίσης δεν θέλω να έχει τα "άκομψο" κόψιμο των pop up παραθύρων του ΙΕ.

Σήμερα το πρώί ένας φίλος μου μου πρότεινε και ως εναλλακτική πρόταση της λύσης που postare ο Radical τη χρήση ενός DHTML menu builder, όπου ως αρχικό menu θέτω το γραφικό που θέλω, και ως submenu βάζω HTML. Για την ακρίβεια μου πρότεινε το Sothink DHTMLMenu. Δεν το έχω κατεβάσει, οπότε δεν ξέρω αν μπορεί να εφαρμοστεί αυτό που θέλω με το παραπάνω πρόγραμμα.

Κάτι άλλο που με απασχολεί είναι το loading των περιεχομένων των ψευδοπαραθύρων που φέρουν την HTML να μην γίνεται όταν φορτώνει και η σελίδα, αλλά όταν περνά κανείς το δείκτη του ποντικιού πάνω από το γραφικό, διότι αν έχω δέκα γραφικά με τις παραπάνω ρυθμίσεις και 5 Kb να είναι το κάθε "ψευδοπαράθυρο" θα έχω ακόμη 50 Kb για φόρτωμα σε κάθε επίσκεψη σε αυτή τη σελίδα.

Δεν ξέρω αν μπορεί να σε βοηθήσει αυτή η περιγραφή, θα ήταν καλύτερο αν είχα βρεί ένα παράδειγμα για να σας δείξω τι θέλω. Θα ψάξω και αν βρω τίποτα θα το ποστάρω εδώ!

Σας ευχαριστώ όλους για το ενδιαφέρον σας :D

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

Εικονίδια με ομαλό pop up

Δημοσίευση από skeftomilos » 31 Ιούλ 2005 18:17

Νομίζω ότι εντόπισα ένα πρόβλημα στο εφέ που θέλεις να πετύχεις. Το layer που θα εμφανίζεται πάνω από τα εικονίδια θα έχει φαντάζομαι μεγαλύτερες διαστάσεις από αυτά. Ωραία λοιπόν παγιδεύσαμε το συμβάν onmouseover και εμφανίσαμε το layer, πότε αυτός θα εξαφανιστεί; Όταν Φύγει το mouse από πάνω του προφανώς (onmouseout). Αυτό όμως θα κάνει πολύ δύσκολη εώς αδύνατη για το χρήστη την εμφάνιση popup για ορισμένα από τα εικονίδια. Στην καλύτερη περίπτωση θα είναι σκέτη δοκιμασία νεύρων, ή κάνω λάθος; :-?

Ίσως είναι καλύτερα να γίνεται η εμφάνιση των πληροφοριών όχι πάνω απο τα εικονίδια αλλά σε μία συγκεκριμένη περιοχή της οθόνης. Ή διαφορετικά να εμφανίζονται με click αντί για mouseover.

Όσο για το φόρτωμα των εικόνων αργότερα είναι κάτι που γίνεται. Όμως η εμφάνιση ενός mouseover popup με την εικόνα να φορτώνει μου φαίνεται ότι δε θα εκτιμηθεί από τους χρήστες. :(
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6228
Εγγραφή: 30 Νοέμ 2004 03:09

Εικονίδια με ομαλό pop up

Δημοσίευση από fafos » 31 Ιούλ 2005 18:38


Nikolaoupan
Δημοσιεύσεις: 205
Εγγραφή: 12 Απρ 2003 14:58

Εικονίδια με ομαλό pop up

Δημοσίευση από Nikolaoupan » 31 Ιούλ 2005 19:34

Ευχαριστώ για τις προτάσεις skeftomilos και για το παράδειγμα fafos. Δεν έχω καταλήξει ακόμα για το αν είναι χρηστικό ή όχι για τους επισκέπτες. Αν θεωρηθεί κουραστικό δεν θα το βάλω :D . Οι παρατηρήσεις σου είναι σημαντικές και φέρνουν στο επίκεντρο τον κύριο διαμορφωτή των websites, που δεν είναι άλλος από τον επισκέπτη.

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Εικονίδια με ομαλό pop up

Δημοσίευση από milianos » 31 Ιούλ 2005 19:41

Ενα καλό και απλό script γιαυτή την δουλειά ειναι και το Js overLIB. Εθεσα το ίδιο θέμα και την προηγούμενη εβδομάδα σε κάποιον άλλο φίλο.

Εδω μπορείς να δείς μια απλή εφαρμογή με μερικές απο τις δυνατότητες του

παράδειγμα

και εδω να κατεβάσεις το overLIB

Απάντηση

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

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

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