Sujet Précédent Sujet Suivant

Zones reactives inexistantes...

Fermé
Independenza89 - Modifié par Independenza89 le 18/04/2013 à 23:58
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 - 19 avril 2013 à 14:25
Bonjour,

Je suis novice en codage, avec de la patience, de la reflexion et beaucoup de tutos, j'arrive a peu prêt a m'en sortir...a peu pret car j'essaie de mettre au point une page d'intro sur mon site mais je n'arrive pas du tout a faire ce que je voudrai bien faire.

J'essaie de mettre 2 zones réactives qui permettrons aux utilisateur d'être rediriger vers 1 des 2 pages.
Le probleme c'est que ces zones reactives ne fonctionnent pas, j'ai beau passer la souris partout a l'ecran d'intro, il n'y a aucune zone "clicable" .


Pouvez vous m'aider a résoudre le problème? 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Bienvenue</title>  
</head>  

<body>  
<style>  
html, body, #bg, #bg table, #bg td {  
 height:100%;  
 overflow:hidden;  
 width:100%;  
}  
#bg {  
 height:200%;  
 width:200%;  
 left:-50%;  
 top:-50%;  
 position:absolute;  
 z-index:-200;  
}  
#bg td {  
 text-align:center;   
 vertical-align:middle;   
}  
#bg img {  
 min-height:50%;   
 min-width:50%;   
}  
</style>  
<div id="bg">  
 <table cellspacing="0" cellpadding="0">  
 <tr>  
 <td>  
 <img src="bggs3.jpg" alt="test" border="0" usemap="#Map">  
 </td>  
 </tr>  
 </table>  
</div>  

<map name="Map" id="Map">  
  <area shape="rect" coords="64,333,426,472" href="CHOIX PAGE 1" />  
  <area shape="rect" coords="513,331,894,471" href="CHOIX PAGE 2" />  
</map>  
</body>  
</html>



A voir également:

5 réponses

Réponse 1 / 5
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
18 avril 2013 à 23:22
Bonsoir,

regarde ce tutoriel qui t'aidera grandement :

https://openclassrooms.com/fr/courses
0
Réponse 2 / 5
Independenza89 Messages postés 3 Date d'inscription jeudi 18 avril 2013 Statut Membre Dernière intervention 19 avril 2013
Modifié par Independenza89 le 19/04/2013 à 00:03
merci du conseil, j'ai lu et modifié. Mais cela ne marche toujours pas. J'ai cherché egalement Map This qui visiblement pourrait resoudre ca en 2sec mais liens mort et google....les 4/5 liens testé sont mort aussi... 

<div id="bg"> 
 <table cellspacing="0" cellpadding="0"> 
 <tr> 
 <td> 
 <img src="bggs3.jpg" alt="test" border="0" usemap="#ma_map"> 
 </td> 
 </tr> 
 </table> 
</div> 
<p> 
<map name="ma_map" id="id_map"> 
  <area shape="rect" coords="47,246,426,471" href="index.php" alt="Vers Index" /> 
</map> 
</p> 
</body> 
</html>
0
Réponse 3 / 5
Independenza89 Messages postés 3 Date d'inscription jeudi 18 avril 2013 Statut Membre Dernière intervention 19 avril 2013
19 avril 2013 à 00:17
J'ai refais une page, et visiblement si j'insere une image et que je creer des zones reactive ca fonctionne.

Cependant, le code que j'ai mis au dessus était pratique: il permettait a la page de s'afficher correctement sur les ecrans des utilisateurs.
Est il possible de centrer verticalement et horizontalement automatiquement une image en fonction de l'ecran et de la resolutions du visiteur? 

<body>
<img src="mon_fond.jpg" width="1280" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="89,569,507,721" href="google.fr" alt="Google" />
</map>
</body>
0
Réponse 4 / 5
Independenza89 Messages postés 3 Date d'inscription jeudi 18 avril 2013 Statut Membre Dernière intervention 19 avril 2013
19 avril 2013 à 09:22
Up :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
Modifié par Atropa le 19/04/2013 à 14:29
bonjour,

oui c'est possible à condition que l'écran soit plus grand ou de la taille de l'image... sinon réduire la taille de l'image demande de modifier également la map de l'image donc de le faire en javascript et ça peut être plus ou moins complexe.

sinon en css, 

#monimage { 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    margin-top : -384px; //valeur négative correspondant à la moitié de la hauteur 
    margin-left : -640px; // valeur négative correspondant à la moitié de la largeur 
}


par contre le border = 0 dans la balise image c'est moche

met plutôt au début de ton css : 

img {
    border: none;
}


sinon un up après 9 heure quand quelqu'un te répond déjà c'est inutile...
0

Discussions similaires

Copier coller impossible
coulondou -
jeanmarc -

43 réponses
"Votre administrateur IT a limité l'accès (...)"
Utilisateur anonyme -
Malekal_morte- -

14 réponses
Trojan/ Votre administrateur informatique a limité l'accès
PedroMawa -
Malekal_morte- -

6 réponses
"Votre administrateur informatique a limité l'accès à certaines zones"
Asah -
fabul -

1 réponse
Votre administrateur IT a limité l'accès ... Suite a virus
Isaruss -
Malekal_morte- -

10 réponses