Zones reactives inexistantes...
Independenza89
-
Atropa Messages postés 2051 Statut Membre -
Atropa Messages postés 2051 Statut Membre -
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?
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
- Zones téléphoniques france - Guide
- Galerie des filtres inexistantes ✓ - Forum Photoshop
- Dans les zones ci-dessous, utilisez les raccourcis clavier pour : copier le texte de la zone 1 le coller dans la zone 2 ✓ - Forum souris / Touchpad
- Affichage des zones de recherche dans l'image ✓ - Forum Windows 10
5 réponses
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>
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?
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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,
par contre le border = 0 dans la balise image c'est moche
met plutôt au début de ton css :
sinon un up après 9 heure quand quelqu'un te répond déjà c'est inutile...
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...
