Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

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

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

Απάντηση
g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από g_p » 25 Ιαν 2011 22:18

Παιδιά γεια σας,

εχω ενα img μέσα στον html κώδικα.
Στο συγκεκριμένο image υπάρχουν κάποιοι κύκλοι στους οποίους έχω
βάλει area map.
Ο χρήστης κάνει κλικ στους κύκλους και πηγαίνει εκεί που επιθυμεί.

Γίνεται μέσα στους κύκλους δυναμικά με php να τοποθετώ κείμενο??

είναι σα να έχω ενα background-image σε ένα div και θέλω σε συγκεκριμένα pixel να τοποθετώ δυναμικά κείμενο, αυτό γίνεται??
εγώ από πριν ξέρω τισ συντεταγμένες όπου βρίσκονται οι κύκλοι, απλά γίνεται μέσω του html κώδικα και της php να τοποθετώ κείμενο μέσα σε αυτές τις περιοχές??

ευχαριστώ

papoukas
Δημοσιεύσεις: 76
Εγγραφή: 18 Ιαν 2011 23:24

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από papoukas » 29 Ιαν 2011 11:13

Παραθέτω τους ορισμούς map και area.

<map>&#8230;</map> tag
Με το tag αυτό έχουμε την δυνατότητα να ορίσουμε ένα χάρτη από ενεργές περιοχές (περιοχές με Link) με βάση συγκεκριμένη εικόνα. Είναι ένας συνδυασμός των tags img map και area. Ο συνδετικός κρίκος ανάμεσα στα img και map είναι οι ιδιότητες usemap της img και name της map. Η γενική γραφή είναι:

<img src=εικόνα usemap="#imgname" />

<map name="imgname" options_list event_list >
&#8230;.. area tag &#8230;&#8230;.
</map>
Τα option που μπορούμε να έχουμε περιγράφονται ποιο κάτω.

name, class,dir, id,lang,style,title

Τα event που υποστηρίζονται περιγράφονται ποιο κάτω. Σε όλες τις περιπτώσεις η τιμή είναι JavaScript κώδικας.

οnclick,onmouseout,onkeydown,ondblclick,onmouseover,onkeypress,onmousedown,onmouseup,onkeyup,onmousemove

<area>&#8230;</area> tag
Το tag αυτό το χρησιμοποιούμε ενός το map tag για να δημιουργήσουμε τις ενεργές περιοχές πάνω στην εικόνα. Με το tag map ορίζουμε ότι σε κάποια εικόνα θα έχουμε ενεργό χάρτη ενώ με την area δημιουργούμε τις περιοχές που θα έχουν την σύνδεση με άλλους ισοτόπους. Η γενική γραφή είναι:

<img src=εικόνα usemap="#imgname" />
<map name="imgname">

<area options_list event_list />

</map>

Τα option που μπορούμε να έχουμε περιγράφονται ποιο κάτω.

Href, nohref, alt, target,coords, shape,tabindex,accesskey, class,dir,id, name, lang,title, style

Τα event που υποστηρίζονται περιγράφονται ποιο κάτω. Σε όλες τις περιπτώσεις η τιμή είναι JavaScript κώδικας.

Οnclick,onmouseout,onkeydown,ondblclick,onmouseover,onkeypress,onmousedown,onmouseup,onkeyup,onmousemove,onblur,onfocus


Σύμφωνα λοιπόν με ατούς σε απλή html και xhtml δεν έχεις αυτή την δυνατότητα. Επομένως για να το κάνει θα πρέπει να χρησιμοποιήσεις divs.

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από g_p » 29 Ιαν 2011 15:23

Ευχαριστώ για την απάντηση, ηταν πολύ βοηθητική

Παραθέτω τον κώδικα μου και έχω κάνει attach και ενα image.
Στο image υπάρχουν τρεις κύκλοι, κάθε ένας κύκλος χρησιμοποιείται
για ένα μάθημα.

Κάνοντας κλικ στους κύκλους, σε πηγαίνουν σε κάποιο link.

Το θέμα ποιο είναι τώρα, στο site χρησιμοποιώ php,mysql και javascript.

Ο διαχειριστής του site θέλει δυναμικά να αλλάζει το κείμενο μέσα στους κύκλους!!![/b][/u].

Αυτό γίνεται???Δηλαδή πως μπορώ εγώ να δώσω εντολή να γράφει ο χρήστης μέσα στα
συγκεκριμένα όρια(pixels) ???υπάρχει τρόπος??

Ο κώδικας είναι

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

<html>
<head>
<title>Area Map test</title>
</head>

<body>

<img src="img_map.JPG" width="417" height="306" usemap="#map"/>

<map name="map" lang="de">
	<area shape="rect" coords="36,9,134,116" alt="Ancient greek" href="#" />
            <area shape="rect" coords="94,188,183,299" alt="Physics" href="#"/>
</map>

</body>
</html>
Συνημμένα
img_map.JPG
απλο image με area map
img_map.JPG (8.99 KiB) Προβλήθηκε 1612 φορές

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από nbc » 29 Ιαν 2011 20:00

Το παράδειγμά σου σε δυναμική εκδοχή.

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

<?php
$CFG = array&#40;
    'image'  => 'img_map.JPG',
    'fsize'  => 12,
    'fcolor' => '255,255,255',
    'map'    => array&#40;
        array&#40;'cords'=>'36,9,134,116'  , 'alt'=>'Ancient', 'text'=>'Ancient', 'url'=>'#'&#41;,
        array&#40;'cords'=>'94,188,183,299', 'alt'=>'Physics', 'text'=>'Physics', 'url'=>'#'&#41;,
        &#41;,
    &#41;;
    
$img = imagecreatefromstring&#40;file_get_contents&#40;$CFG&#91;'image'&#93;&#41;&#41;;

if &#40;@$_REQUEST&#91;'img'&#93; == '1'&#41;
&#123;
    $FGC = explode&#40;',', $CFG&#91;'fcolor'&#93;&#41;;
    $fgc = imagecolorallocate&#40;$img, $FGC&#91;0&#93;, $FGC&#91;1&#93;, $FGC&#91;2&#93;&#41;;

    foreach &#40;$CFG&#91;'map'&#93; as $MAP&#41; 
    &#123;
        $CORDS = explode&#40;',', $MAP&#91;'cords'&#93;&#41;;
        imagettftext&#40;$img, $CFG&#91;'fsize'&#93;, 0, $CORDS&#91;0&#93;, $CORDS&#91;1&#93;, $fgc, 'DejaVuSans.ttf', $MAP&#91;'text'&#93;&#41;;
    &#125;
    
    header&#40;'content-type&#58; image/jpeg'&#41;;
    imagejpeg&#40;$img&#41;;
    exit;
&#125;
else
&#123;
    $img_tag = sprintf&#40;'<img src="%s?img=1" width="%d" height="%d" usemap="#map"/>', basename&#40;__FILE__&#41;, imagesx&#40;$img&#41;, imagesy&#40;$img&#41;&#41;;
    
    $map_tag = '<map name="map" lang="de">'."\n";
    
    foreach &#40;$CFG&#91;'map'&#93; as $MAP&#41; 
    &#123;
        $map_tag .= sprintf&#40;'    <area shape="rect" coords="%s" alt="%s" href="%s" />'."\n", $MAP&#91;'cords'&#93;, $MAP&#91;'alt'&#93;, $MAP&#91;'url'&#93;&#41;; 
    &#125;
    
    $map_tag.= '</map>';
&#125;
?>
<html>
<head>
<title>Area Map test</title>
</head>

<body>

<?php echo $img_tag; ?>

<?php echo $map_tag; ?>

</body>
</html>

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από g_p » 30 Ιαν 2011 19:27

Ευχαριστώ πολύ για την απάντηση,

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

ωστόσο έχω ενεργοποιήσει την gd για τα images.

Πρέπει να κάνω κάποια άλλη ρύθμιση για να δουλέψει??

ευχαριστώ

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από nbc » 30 Ιαν 2011 21:08

Βεβαιώσου ότι υπάρχει το img_map.JPG και το DejaVuSans.ttf

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από g_p » 30 Ιαν 2011 23:16

αυτό το πρόγραμμα τι κάνει ακριβώς??

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από Akina » 31 Ιαν 2011 15:15

g_p έγραψε: Ο διαχειριστής του site θέλει δυναμικά να αλλάζει το κείμενο μέσα στους κύκλους!!![/b][/u].
Αυτό γίνεται???Δηλαδή πως μπορώ εγώ να δώσω εντολή να γράφει ο χρήστης μέσα στα
συγκεκριμένα όρια(pixels) ???υπάρχει τρόπος??
βάζεις ένα div μετά το area, που έχει μέσα όσα input text είναι και τα μαθήματα σου,κανεις απαλοιφή το style τους και position εκεί που πρέπει να είναι το txt σου ...

για φαίνεται πιο όμορφο πρόσθεσε κάτι τέτοιο :

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

<input type="text" onblur="if &#40;this.value == ''&#41; &#123;this.value = 'Physics';&#125;" onfocus="if &#40;this.value == 'Physics'&#41; &#123;this.value = '';&#125;" value="Physics" >
τώρα για να τα αποθηκεύεις αυτά θέλει ajax form me onclick event

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από g_p » 03 Φεβ 2011 21:43

ευχαριστώ για την απάντηση,

εγώ χρησιμοποιώ javascript,php ka mysql
μπορώ να συνδυάσω και ajax??

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

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από cordis » 04 Φεβ 2011 15:17

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

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Area Map se img και τοποθέτηση text δυναμικά, γίνεται??

Δημοσίευση από g_p » 06 Φεβ 2011 15:37

cordis έγραψε:η ajax είναι javascript.
Οπότε μπορώ να τη συνδυάσω άνετα με mysql,
μια χαρά

με την ajax κινδυνεύει κανείς από επιθέσεις μέσω internet?
δεν έχω εμπειρία στην ajax, είμαι άσχετος
απλά κάποιος που τη χρησιμοποιεί πρώτη φορά
πρέπει να είναι προσεκτικός με κάτι σχετικά με ασφάλεια??

ευχαριστώ

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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