Προς το περιεχόμενο

Hyperlink σε νέο "μικρό" παράθυρο.

Daimon

Από τον Daimon
στο Web Design - Development

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

Daimon Experienced

Daimon

Δημοσ.
Δημοσ.

Θέλω στη ιστοσελίδα μου να κάνω ένα HYPERLINK σε μια εικόνα που θα ανοίγει ένα παράθυρο, αλλα μικρό (δηλαδή, αυτόματα ένα νέο παράθυρο με διάστασης 300x300).

 

Πως μπορώ να το κάνω?

BonJovi Proficient

BonJovi

Δημοσ.
Δημοσ.

Μπορείς να δοκιμάσεις το εξής:

 

><a href="#" onclick="window.open( 'eikona.jpg', 'WindowName', 'width = 300, height = 300, left = ' + ( screen.availWidth / 2 - ( 300 / 2 ) ) + ', top = ' + ( screen.availHeight / 2 - ( 300 / 2 ) ) + ', resizable = 1'  ); return false;">Link</a>

 

όπου eikona.jpg η εικόνα που θα ανοίγει το παράθυρο (αν θες βάζεις και κάποιο html αρχείο) και WindowName το όνομα του παραθύρου.

Daimon Experienced

Daimon

Δημοσ.
  • Μέλος
Δημοσ.

μάλλον, αυτό που θέλω να κάνω, δεν πρόκειται να το κατορθώσω ποτε, αφού πλέον όλα τα browsers κάνουν block τα POP-UP windows :P

 

για την ακρίβεια, ήθελα να κάνω HYPERLINK σε ένα FLASH mp3 PLAYER με διάστασης 200x250, δηλαδή όταν πατούσα click σε μια εικόνα, να μου άνοιγε ένα νέο παράθυρο του browser μου με διάστασης του player και να μπορούσα καθώς surfara στο site, να ακούω τα τραγουδια :D

Daimon Experienced

Daimon

Δημοσ.
  • Μέλος
Δημοσ.

Για την ακρίβεια, ναι το δοκίμασα αυτό που πρότεινες, αλλα ανοίγει ένα νέο παράθυρο ιδιου μεγέθους με το προηγουμενου (για την ακρίβεια, ένα νέο TAB ανοίγει στο Firefox). :/

Daimon Experienced

Daimon

Δημοσ.
  • Μέλος
Δημοσ.
Γιατί δεν το βάζεις σε ένα hidden div που όταν θα κάνεις κλικ σε κάποιο σύνδεσμο θα το εμφανίζει με javascript?

 

Επειδή είμαι ερασιτέχνης (aka noob :P) πάνω σ'αυτο το θέμα, μπορείς να με βοηθήσεις πως να το κάνω? (εάν είναι εύκολο).

thanocaster Mentor

thanocaster

Δημοσ.
Δημοσ.

Λοιπόν...

 

Ας πούμε ότι έχεις ένα html αρχείο οργανωμένο με divs. Επίσης, στον ίδιο φάκελο που έχεις το html αρχείο έχεις και ένα αρχείο css.

 

Φτιάξε στο html αρχείο ένα div με id='popup' (<div id='popup'>Εδώ το περιεχόμενο του div</div>) . Στη συνέχεια βάλε στο css την εξής παράγραφο:

 

>
div#popup {
position: fixed;
width: 300px;
height: 300px;
top: 20px;
left: 20px;
}

Σημείωση: Στα δυο τελευταία πεδία (top και left) βάλε τις τιμές που θέλεις εσύ. Είναι οι αποστάσεις του div από την πάνω αριστερά γωνία κατά y και κατά x. Αν δεν ξέρεις τί τιμές να βάλεις πειραματίσου λίγο.

 

Πρέπει τώρα να φτιάξεις μια συνάρτηση με javascript που θα αλλάζει το visibility όταν θα πατάς σε έναν σύνδεσμο. Βάλε στο <head> της σελίδας το εξής script:

 

>
<script type="text/javascript">
function toggle(){
     if (document.getElementById('popup').style.display == 'none') {
         document.getElementById('popup').style.display = 'block';
     } else {
         document.getElementById('popup').style.display = 'none';
     }
 }
</script>

Σε όποιον σύνδεσμο λοιπόν καλέσεις αυτήν την συνάρτηση, αυτός θα ανοιγοκλείνει το div με id="popup". Ο σύνδεσμος δηλαδή θα έχει αυτή τη μορφή:

 

>
<a href="javascript: toggle('popup')"> Άνοιξε/κλείσε το popup!</a>

Daimon Experienced

Daimon

Δημοσ.
  • Μέλος
Δημοσ.

hm... σκούρα τα πράγματα :P

 

δεν ξέρω αν τα κατάφερα η όχι, πάντως αυτό που ήθελα δεν έγινε :P

 

btw, ty για το ενδιαφέρον

Daimon Experienced

Daimon

Δημοσ.
  • Μέλος
Δημοσ.

:/

έβαλα ακριβώς έτσι όπως τα έγραψες για να πειραματιστώ, μετά σκάλισα λίγο τις μεταβλητές αλλα τίποτα :/

http://daimon.890m.com/test/test.html

επίσης το .CSS το ονόμασα style και έβαλα ακριβώς ότι μου είπες

 

 

 

το SITE μου http://daimon.890m.com/index.html

εκεί πάνω δεξιά που λέω FLASH Mp3 Player, θέλω όταν το πατάω να ανοίγει το player σε παράθυρο 250x200

thanocaster Mentor

thanocaster

Δημοσ.
Δημοσ.

...

Αφού δουλεύει κανονικά. Στο ανοιγοκλείνει το από πάνω div. Αν δηλαδή μέσα στο div πετάξεις μια εικόνα, και δώσεις στο css position fixed και opacity 0.7, θα έχεις ένα πολύ όμορφο αποτέλεσμα...

 

ΥΓ> Για κάποιο λόγο το site σου δε μου ανοίγει...

Daimon Experienced

Daimon

Δημοσ.
  • Μέλος
Δημοσ.

το κάνει που και που :P (free web hosting βλέπεις).

 

όταν μπορέσεις, τσέκαρε το και πες μου εάν καλά παο η όχι..

thanocaster Mentor

thanocaster

Δημοσ.
Δημοσ.

Χμμμ... Εμένα το test.html δουλεύει και με Safari και με Firefox...

 

Όταν πατάς στο "Άνοιξε/κλείσε το popup!" δεν ανοιγοκλείνει από πάνω το div? Δηλαδή δεν εξαφανίζεται-εμφανίζεται το "

Εδώ το περιεχόμενο του div"?

thanocaster Mentor

thanocaster

Δημοσ.
Δημοσ.

Τώρα το είδα...

 

Δεν φορτώνεις πουθενά το css. Βάλε μέσα στο header του test.html αυτό:

 

>
<link href="style.css" rel="stylesheet" type="text/css">

 

Πάντως το κολπάκι δουλεύει στη σελίδα σου κανονικά...

 

ΥΓ> Έχεις και pm...

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

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

Προς την λίστα θεμάτων
  • Δημιουργία νέου...