JS lien via innerHTML non cliquable

Fermé

Cutya Hair - Modifié par Cutya Hair le 25/10/2011 à 01:00
Cutya Hair - 28 oct. 2011 à 16:06

Bonjour,

Je crée un lien dans une div via innerHTML sur un mouseover, mais ce lien (qui à l'air cliquable vu le pointer), n'a pas l'air actif... Quand je clique, rien ne se passe...

<script type="text/javascript"> 
    conthour = document.getElementById('conthour'+id); 
    unevar = conthour.innerHTML.length; 
    if(unevar == 14)     { 
     conthour.innerHTML = '<a href="accueil.php">Accueil</a>'; 
    } 
</script>

C'est limite si le lien clignote sous la souris :s

A voir également:

JS lien via innerHTML non cliquable
Lien url - Guide
Verifier un lien - Guide
Créer un lien pour partager des photos - Guide
Image cliquable html ✓ - Forum Réseaux sociaux
Cliquez sur ce lien. en n'utilisant que le clavier, quel mot obtenez-vous ? ✓ - Forum souris / Touchpad

6 réponses

Réponse 1 / 6

Cutya Hair
25 oct. 2011 à 13:47

P'tit up :)

Cutya Hair
25 oct. 2011 à 16:25

Personne ? :(

Cutya Hair
25 oct. 2011 à 18:09

je désespère lol

Cutya Hair
26 oct. 2011 à 23:49

Personne à la hauteur de mon problème ? :p

Cutya Hair
27 oct. 2011 à 15:44

?? :(

Réponse 2 / 6

le père
27 oct. 2011 à 16:09

Bonjour

J'ai essayé chez moi, ça a l'air de marcher. À condition de :
- donner une valeur à la variable id
- avoir un div qui s'appelle effectivement 'conthour'+id
- que la taille du contenu initial du div soit effectivement de 14.
- que le script ne soit appelé qu' après la création du div en question
Ça donne ça :

<html>
<head>
<title>titre</title>
</head>
<body>
texte avant<div id="conthour2">12345678901234</div>texte après
<script type="text/javascript"> 
   var id=2;    
    conthour = document.getElementById('conthour'+id); 
    unevar = conthour.innerHTML.length; 
    if(unevar == 14)     { 
     conthour.innerHTML = '<a href="accueil.php">Accueil</a>'; 
    } 
</script> 
</body>
</html>

Mais tu parles de créer le lien sur un mouseover : comment se présente ton code ? Car le javascript que tu montres n'est pas appelé par un mouseover

Réponse 3 / 6

Cutya Hair
28 oct. 2011 à 00:41

Aaaaah merciii d'avoir répondu !! :) Je commençais à être désespérée lol ^^

Ben j'ai changé mon code, mais le problème reste le même : en fait le lien apparaît bien avec le javascript, et quand j'amène la souris dessus pour cliquer, le pointeur devient bien une main qui montre un lien, sauf que le lien se met à clignoter, comme un bug d'affichage, et en cliquant dessus rien ne se passe, c'est ça que je ne comprend pas :s

<!DOCTYPE html>
<html>
<!--

  Created using /
  Source can be edited via /untitled/edit

-->
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .madiv
  {
    width: 180px;
    height: 20px;
    border: 1px dotted orange;
  }
</style>
</head>

<body>

  <p id="hello" onclick="javacript: affiche();">Hello World</p>
  <div id="parent">
    <div id="conthour14" class="madiv">
    </div>
    <div id="conthour15" class="madiv">
    </div>
    <div id="conthour16" class="madiv">
    </div>
  </div>

<script>
	var hello = document.getElementById('hello');
	var parent = document.getElementById('parent');
	parent.addEventListener('mouseover', function(yo)
		{
		  hello.innerHTML = 'ID : '+yo.target.id;
		  myid = yo.target.id;
		  datest = document.getElementById(myid);
		  datest.innerHTML = '<a href="http://ww.google.com">Google</a>';
		},
		false);
	parent.addEventListener('mouseout', function(ya)
		{
		  mytid = ya.target.id;
		  darest = document.getElementById(mytid);
		  darest.innerHTML = '';
		},
		false);
</script>

</body>
</html>

Voici le code complet concernant ce que je veux faire, testé cette fois-ci avec JSBin, j'espère que vous pourrez m'aider ^^'

Réponse 4 / 6

le père
Modifié par le père le 28/10/2011 à 09:53

J'ai fait une petite modification pour compter les appels à mouseout

<script>  
  var cnt=0;  
 var hello = document.getElementById('hello');  
 var parent = document.getElementById('parent');  
 parent.addEventListener('mouseover', function(yo)  
  {  
    hello.innerHTML = 'ID : '+yo.target.id+' '+cnt;  
    myid = yo.target.id;  
    datest = document.getElementById(myid);  
    datest.innerHTML = '<a href="http://ww.google.com">Google</a>';  
  },  
  false);  
 parent.addEventListener('mouseout', function(ya)  
  {  
    mytid = ya.target.id;  
    darest = document.getElementById(mytid);  
    darest.innerHTML = '';  
      cnt++;  
  },  
  false);  
</script>

Conclusion : quand ton curseur clignote, c'est que tu passes ton temps à appeler mouseout.
Je ne comprends pas pourquoi, mais je suppose que quand tu exécutes datest.innerHTML = '<a href="http://ww.google.com">Google</a>'; pendant le mouseon, un événement mouseout est appelé lors de la suppression de l'ancien contenu, puis à nouveau un mouseon quand le nouveau contenu apparaît.

J' ai fait l'essai, ça na va pas mieux en mettant directement onmouseover et onmouseout dans les div conthourxx

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

Posez votre question

Réponse 5 / 6

le père
Modifié par le père le 28/10/2011 à 10:30

Après réflexion et quelques essais...
Ce n'est pas la suppression de l'ancien contenu qui provoque l'événement mouseout. C'est simplement parce que ton nouveau contenu étant un élément HTML, ce n'est plus l'élément conthourxx qui a le focus, mais ce nouvel élément. Donc il y a bien un événement mouseout pour conthourxx ; cet événement provoque la destruction du <a> à peine créé, et conthourxx retrouve le focus : la boucle est bouclée...
Il serait sûrement plus simple d'utiliser les CSS pour obtenir le même résultat.

<!DOCTYPE html>
<html>
<!--

  Created using /
  Source can be edited via /untitled/edit

-->
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .madiv
  {
    width: 180px;
    height: 20px;
    border: 1px dotted orange;
  }
  .madiv a {
   color: #FFFFFF;
   text-decoration: none;
  } 
  .madiv a:hover {
   color: #0000FF;
   text-decoration: underline;
  } 

</style>

</head>

<body>

  <p id="hello" onclick="javacript: affiche();">Hello World</p>
  <div id="parent">
    <div id="conthour14" class="madiv"><a href="http://ww.google.com">Google</a>
    </div>
    <div id="conthour15" class="madiv"><a href="http://ww.google.com">Google</a>
    </div>
    <div id="conthour16" class="madiv"><a href="http://ww.google.com">Google</a>
    </div>
  </div>
</body>
</html>

Mais il y a un inconvénient : le lien ne réagit que si on passe dessus, c'est à dire dans la partie gauche des cases, pas n'importe où.

Réponse 6 / 6

Cutya Hair
28 oct. 2011 à 16:06

Ahh ok, c'est pour ça que je ne voyais pas l'erreur niveau syntaxe, c'est plus du côté technique là :)
Je te remercie de te donner ce mal pour m'aider, je débute en JS et je cherche à faire un système de sélection de zone (contenant plusieurs div) avec les évènements mouseover et click. Je ne sais pas encore comment m'y prendre donc une première étape était pour moi d'apprendre à utiliser le mouseover comme il faut, mais en bloquant là-dessus je me suis dit que ça servait à rien d'essayer d'apprendre plus si je bloque déjà sur la première étape lol

En tout cas merci :)

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"

lien copié

Rajout de lien sur plusieurs pages

Comment retrouver des lien copier sur sont téléphone

transformer un photo simple en un lien

Discussions similaires

Newsletters