Zones reactives inexistantes...

Independenza89 -
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention - 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:

Zones reactives inexistantes...
Affichage des zones de recherche dans l'image rechercher dans l'image - Guide
Carte des zones navigo - Accueil - Transports & Cartes
Zones téléphoniques france - Guide
Dans les zones ci-dessous, utilisez les raccourcis clavier pour : copier le texte de la zone 1 le coller dans la zone 2 - Forum Autoit / batch
Galerie des filtres inexistantes ✓ - Forum Photoshop

5 réponses

Réponse 1 / 5

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

Bonsoir,

regarde ce tutoriel qui t'aidera grandement :

https://openclassrooms.com/fr/courses

Réponse 2 / 5

Independenza89 Messages postés 3 Date d'inscription Statut Membre Dernière intervention

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>

Réponse 3 / 5

Independenza89 Messages postés 3 Date d'inscription Statut Membre Dernière intervention

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>

Réponse 4 / 5

Independenza89 Messages postés 3 Date d'inscription Statut Membre Dernière intervention

Up :)

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 Statut Membre Dernière intervention 274

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...

Discussions similaires

"Votre administrateur IT a limité l'accès (...)"

Copier coller impossible

Problème Copier/coller zone de texte

copie automatique zone texte

Alignement zone de texte

Votre réponse

Discussions similaires