begin process at 2010 02 10 06:24:31
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

PHP

 > 

Web 2.0

 > 

CSS

 > 

CSS MAP et AREA

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

Decaler une image + map [ par spiritofdivx ] J ai un probleme dans la mise en page d une image (.gif) , je voudrais savoir ce qu il faut que j ajoute a ma ligne pour qu elle soit plus a droite da étirer une image avec du css [ par eax ] bonsoir,je souhaite mettre une image en fond dans un tableau (dans la balise TD). je souhaiterai que cette image soit étirée, qu'elle prenne toute la Style de menu css [ par CCJ ] bonjour voila j'ai un petit probleme je veu que dans mon site dans une cellule d'un tableau il y ait une image et que quand je passe dessus l'image ch Image de fond [ par Vin Gazoil ] Salut a tous ! en fait, j'aimerai savoir si c'est possible qu'une image prenne toute la page malgré les différentes résolution ? si c'est possible pa Image de fond en bas à droite ... [ par shudrummer ] Bonjour tout le monde !Bon j'ai un problème dont je voudrais savoir si une solution existe, et, si possible, une solution. Alors voilà, je cherche à f image de fond [ par tennisman59 ] Salut Voila j'ai un probleme. Je voudrais afficher une image en fond alors que j'utilise des frames dans ma page index.htm qui prenne toute la place d Style CSS [ par CCJ ] Bonjour je developpe actuellement un site et j'ai uun bleme voila la partie de ma source css foireuse: td.Menu { background-image: url("Images/MenuNeu Modifier la taille d'une "background-image:url()" en CSS [ par Prototype51 ] Bonjour à tous, Je ne savais où poster cette question mais j'espère que vous pourrez quand même m'aider.J'aimerais faire un menu en CSS avec une ima php->pdf->probleme image [ par younes371 ] Bonjour, J'ai trouvé un code ds phpcs qui m a été très utile pour mon application,j'ai pu afficher les resultats de la requette dans le tableau(Numero nouvelle image-map générée dynamiquement non prise en compte [ par Qwentin ] Bonjour à tous,Je me heurte à un problème que je m'en vais vous exposer.Je développe une application en php qui génère un graph orienté (via graphviz)


Nos sponsors


Sondage...

Comparez les prix


HTC Hero
Entre 550€ et 550€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,577 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)