Accueil > Forum > > > > CSS MAP et AREA
 CSS MAP et AREA
dimanche 24 août 2008 à 13:58:17 |
CSS MAP et AREA
gabs77
|
Bonjour, Je voudrais savoir si on peut combiner du CSS avec les balises AREA ??? En fait, j'ai une image PNG avec un fond transparent que j'affiche en HTML avec la baslise <img src="monimage.png" usemap="#Map"/> et ke défini des zones cliquables avec <map name="Map"> <area shape="poly" href="page2.html" coords="300,600, 400,580 470,550, 520,500, 560,450, 585,400, 600,300, 400,300, 300,400" /> </map> Je souhaite trouver une solution léger pour marquer le fait que la souris est sur un lien de la zone cliquable comme une autre image ou une coloration de fond !! bref, une idée qui fonctionne, car je ne suis pas parvenu à trouver !!! |
|
mardi 26 août 2008 à 18:49:06 |
Re : CSS MAP et AREA
jreaux62
|
Une simple "info=bulle" (alt="...") au passage de la souris sur la zone : <map name="Map"> <area shape="poly" href="page2.html" alt="acces a la page2" coords="300,600, 400,580, 470,550, 520,500, 560,450, 585,400, 600,300, 400,300, 300,400" /> </map> |
|
mardi 26 août 2008 à 19:08:26 |
Re : CSS MAP et AREA
gabs77
|
Merci jreaux62, mais je connaissais déjà cette réponse !!
Merci tout de même !!
Déjà, je viens à me demander si on peut faire du CSS avec map et area ??? car là sans y parvenir je reste douteux sur la question !!!
|
|
mercredi 27 août 2008 à 13:20:09 |
Re : CSS MAP et AREA
jreaux62
|
Dans ce cas, que veux-tu dire par " marquer le fait que la souris est sur un lien de la zone cliquable" ? Sinon, tu peux mettre : <area shape="poly" id="blabla" ... ou <area shape="poly" class="blabla" ... et ajouter le CSS correspondant a "blabla" |
|
jeudi 28 août 2008 à 09:48:31 |
Re : CSS MAP et AREA
gabs77
|
Dans ce cas, que veux-tu dire par "marquer le fait que la souris est sur un lien de la zone cliquable" ?
Je veux dire par là, une image qui s'intercale dessus ou une coloration, bref !! Désolé, si je m'explique mal !! c'est les idées qui me manquent en ce moment !! Cependant, j'ai déjà essayéavec les "id" ou les "class" mais sans succès !! Alors est ce que je m'y prends mal 
|
|
jeudi 28 août 2008 à 15:37:17 |
Re : CSS MAP et AREA
jreaux62
|
Réponse acceptée !
J'ai vu ca :
http://www.developpez.net/forums/d22187/webmasters-developpement-web/css/area-css/
Adapté aux zones "rect".
Mais pour les zones "poly" ... (?)
Et un code CSS pour modifier l'opacité :
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
|
|
jeudi 28 août 2008 à 16:40:14 |
Re : CSS MAP et AREA
gabs77
|
jreaux62,
Super le lien que tu m'a passé marche à merveille donc en fait le CSS ne marche pas sur les area/map il faut rusé avec un peu de javascript et du omousehover onmouseout et le tour est joué !!!
Merci !!
|
|
jeudi 28 août 2008 à 17:13:52 |
Re : CSS MAP et AREA
jreaux62
|
Par curiosité (et pour ceux qui se posent la meme question), peux-tu mettre ici ce que tu as fait (comment tu t'y es pris pour la zone "poly") ?
Merci.
Et content d'avoir pu aider.
|
|
jeudi 28 août 2008 à 21:27:11 |
Re : CSS MAP et AREA
gabs77
|
Réponse acceptée !
<div class="centre"> <img class="img" src="images/monimage.gif"width="500"height="500"border="0" usemap="#maMap" alt=""> <map name="maMap">
<area shape="poly" onMouseOver="afficheId('bloc');" onMouseOut="cacheId('bloc');"
href="page2.html" alt="acces a la page2"
coords="300,600, 400,580, 470,550, 520,500, 560,450, 585,400, 600,300, 400,300, 300,400" />
<area onMouseOver="afficheId('bloc');" onMouseOut="cacheId('bloc');" shape="rect" coords="460,586,672,622" href="synoptique.php" alt=""> </map> <div class="bloc1" id="bloc"> <img src="images/monimage2.gif"> </div> </div> Pour les feuilles de styles : Code : .bloc1 {display:none; position:absolute; width:150px; height:150px; left:650px; top:500px;} .centre {width:100%; height:80%; position:relative; margin-left:5px; }Et voilà pour le javascript : Code : function afficheId(baliseId){ document.getElementById(baliseId).style.visibility='visible'; document.getElementById(baliseId).style.display='block'; } function cacheId(baliseId){ document.getElementById(baliseId).style.visibility='hidden'; document.getElementById(baliseId).style.display='none'; }
|
|
jeudi 28 août 2008 à 21:28:19 |
Re : CSS MAP et AREA
gabs77
|
après c'est à adapter selon ses besoins !!
|
|
Cette discussion est classée dans : image, fond, map, css, area
 Répondre à ce message
 Sujets en rapport avec ce message
Variable dans css [ par shadow578 ]
Bonjour, Voilà j'ai un css qui m'affiche une image de fond. Ensuite j'ai un php, ou se place un formulaire et j'aimerai que quand on envoie le formula
galerie image [ par djbabou ]
Bonjour à tous ... Me revoici sur codes sources avec une nouvelle quesion: J'ai développé une galerie d'image très simple en pure css/html. En fait,
balise map html [ par djbabou ]
Bonjour a tous, J'aimerais vous poser une petite question concernant le mapping en php. J'ai une image sur une de mes pages sur laquelle j'applique
CSS : Background-repeat ne marche pas avec IE [ par mrassaa ]
Salut, J'ai créé un formulaire avec php. Dans la qui contient mon formulaire, j'ai mis une image qui doit se répéter qu'une seule fois. Grâce à Back
aide css [ par yoyo77yo ]
bonjour, J'ai une feuille php avec un div (que j'ai nommée "contenutableau")qui contient un tableau : je demande au div de flotter à droite avec une
Redimensionner le background d'un <table> [ par chewbacca156 ]
Hello !Je souhaiterais que l'image de fond de mon menu (généré dynamiquement) s'adapte à la longueur de ce dernier. Tout simplement car une image en d
Position image survolé [ par HiKwesT ]
Bonsoir, <
Prb positionnement image! [ par HiKwesT ]
Bonjour, voila j'ai creer un site en jpeg. Ce site comprend un fond d'ecran ainsi qu'un menu qui change de couleur a chaque survol!Pour le fond je n'e
echo avec imagecreatefromjpeg ?? [ par PsYk0PaT ]
Bonjour,J'ai ce bout de code qui fonctionne à merveille: $image = imageCreateFromJpeg("la_map.jpg"); $colorCyan = imageColorAllocate$image,0,255,255);
Sessions sur 2 scripts [ par guill76 ]
Salut,SI Quelqu'un pouvait m'expliquer le pb suivant et comment le résoudre:Dans le corps de mon script principal index.php , j'insere une balise ima
 Livres en rapport
|
Derniers Blogs
 GESTION D'EXCEPTION AVEC LES TASKSGESTION D'EXCEPTION AVEC LES TASKS par richardc
Nous avons vu dans un précédent article comment utiliser Task pour effectuer des opérations dans un autre thread.
Malheureusement, comme tout le monde n'est pas parfait, il se peut que cette exécution se passe mal et qu'une exception se produise.
La...
Cliquez pour lire la suite de l'article par richardc DéMARRONS AVEC LES TASKSDéMARRONS AVEC LES TASKS par richardc
Que vous le vouliez ou non, le développement multi-tâche est maintenant une obligation pour toute nouvelle application. Il est donc vital d'en comprendre les mécanismes et de s'y mettre le plus tôt possible.
En attendant le .NET Framework 4.5 avec le...
Cliquez pour lire la suite de l'article par richardc SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Forum
 CHAMPS TIMECHAMPS TIME par vargas
Cliquez pour lire la suite par vargas
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|