εικόνα με ενεργές περιοχές

[mythodea]

Καλησπέρα παίδες...

 

Έχω το εξής πρόβλημα: θέλω να φτιάξω σε μια ιστοσελίδα μία εικόνα (π.χ. χάρτης ) η οποία να περιλαμβάνει πάνω της ενεργές περιοχές και υπερσυνδέσεις. Δηλαδή, η εικόνα αυτή μπορεί να είναι μια αεροφωτογραφία της Αθήνας και αυτό που θέλω είναι μόλις πάω ε το ποντίκι πάνω από την περιοχή της Ακρόπολης να εμφανίζεται ένα μήνυμα κάτω από τον κέρσορα που να λέει "Ακρόπολη" και με το που κάνω κλικ πάνω στην περιοχή της Ακρόπολης, να με "πετάει" κάπου αλλού

[kostas0928]

Με ένα flashaki γίνεται σε 2 λεπτά αυτό. Και έχεις και μεγάλη ελευθερία σχεδίασης.

 

Αν δε θες να το κάνεις με flash τοτε φαντάζομαι οτι θα πρέπει να κάνεις ένα Div με z-index μεγαλύτερο απο αυτό της εικόνας (ωστε να βρίσκεται ένα Layer πάνω απ την εικόνα )

και εκεί μέσα να βάλεις ότι πληροφορία θέλεις. Δεν είναι δύσκολη λύση κι αυτή αλλα αν ξέρεις flash πιστεύω βολεύει καλύτερα και θα έχεις και καλύτερο αποτέλεσμα.

[macabre_sunsets]

Ψάξε για imagemapping.

 

http://htmlhelp.com/reference/html40/special/area.html

http://www.echoecho.com/htmllinks07.htm

[mythodea]

Σας ευχαριστώ παιδιά για τις γρήγορες απαντήσεις... Έφτιαξα κι εγώ τον παρακάτω κώδικα λοιπόν για έναν χάρτη της Ελλάδος, αλλά δεν μου εμφανίζει τα μηνύματα που του 'χω βάλει να μου εμφανίζει στον κέρσορα όταν τον πηγαίνω πάνω από τις ενεργές περιοχές. Οι σύνδεσμοι βέβαια λειτουργούν κανονικά. Επίσης, θα ήθελα να μου εμφανίζεται και ένα περίγραμμα της ενεργής περιοχής κάθε φορά που πηγαίνω τον κέρσορα πάνω της

 

><P><OBJECT data="ellada.gif" type="images/gif" usemap="#map1">
    <MAP name="map1">
      <P>Navigate the site:
      <A href="guide.html" shape="rect" coords="0,0,118,28">Attiki</a> |
      <A href="shortcut.html" shape="rect" coords="118,0,184,28">Thessalia</A> |
      <A href="search.html" shape="circle" coords="184,200,60">Kriti</A> |
      <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Sterea Ellada</A>
    </MAP>
    </OBJECT>

[kostas0928]

Για βάλε αυτό στα styles σου :

>a:hover{ border:1px solid #000; }

Αυτό πρέπει να βάζει περίγραμμα στο ενεργό rectangle αφου είναι <a>.

 

 

Δε θελεις να εμφανίζεις κείμενο και γραφικά πάνω στο χάρτη ? Μόνο τις ενεργές περιοχές θέλεις ?

[_tasos]

Έχεις σκεφτεί να δουλέψεις με Google Maps; Δεν εννοώ το maps.google.com αλλά το Google Maps API. Εκεί με javascript μπορείς να δημιουργείς ένα χάρτη και να αποφασίζεις ποια σημεία θέλεις να δείχνεις. Σε κάθε σημείο μπορείς να εμφανίσεις μία φούσκα με πληροφορίες, κτλ.

[kostas0928]

Έχεις σκεφτεί να δουλέψεις με Google Maps;

 

Απο το πρώτο post εγώ κατάλαβα οτι θέλει να το φτιάξει για μια οποιαδήποτε εικόνα και όχι ειδικά για χάρτη.

[gtroza]

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap

 

δες αυτό_____

 

.