11548 sujets

JavaScript, DOM et API Web HTML5

L'element This

Bonsoir a tous,

J'essaye d'utiliser l'element this pour un effet hover au survol d'une image, mais cela ne fonctionne pas. Ma div .hover contient en background une image png. Quand je desactive le display:none sur Firebug, elle se positionne tres bien. C'est juste un soucis dans mon JS. Ca ne declanche pas car je ne sais pas quelle est la procedure pour utiliser l'element this sur tous mes li.
Quelqu'un saurait m'aider svp ?
Voici mon code JavaScript :


$("#portfolio .hover").hide();
$("#first li img").hover(function() {
$(".hover", this).show();
},
function()
{
$(".hover", this).hide();
});

Modifié par fanny95 (25 Mar 2012 - 18:50)
Salut,

Pour le hover, un exemple :


onmouseover="this.style.background='#f00'" onmouseout="this.style.background='#FFF'"

Modifié par jmlapam (25 Mar 2012 - 20:37)
Ta structure HTML et le résultat que tu attends seraient plus utile pour t'aider que ton code JS.

$(".hover", this) -> renvoi un objet vide. D'ailleurs je comprends pas ton sélecteur, il est supposé faire quoi ? Afficher/masque le li courant + ta div hover ?
Modifié par jb_gfx (25 Mar 2012 - 21:08)
Modérateur
Et l'eau,

c'est simple ton souci.

en Jcuicui : 
[i]
$("#portfolio .hover").hide();

$("#first li img").hover(function() {

$(this).show();

},

function()

{

$(this).hide();

});


jmlapam a écrit :

Pour le hover, un exemple :


onmouseover="this.style.background='#f00'" onmouseout="this.style.background='#FFF'"


Je me permets de te signaler que cette manière de faire est mauvaise Smiley cligne (javascript intrusif -> mauvaise séparation du contenu et du comportement)

en JS natif (fait de tête, il se peut que je me sois trompé) :

window.onload = function(){
	var portfolio = document.getElementById('portfolio');
	var listeImagesPortfolio = portfolio.getElementsByTagName('img');

	for (var i = 0; i < listeImagesPortfolio.length; i++) {
		listeImagesPortfolio[i].style.display = 'none';
		listeImagesPortfolio[i].onmouseover = function(){
			this.style.display = 'inline';
		}
		listeImagesPortfolio[i].onmouseout = function(){
			this.style.display = 'none';
		}
	};
}

[/i][/i][/i][/i]
Modifié par niuxe (25 Mar 2012 - 23:30)
Attention cela dit, window.onload n'est pas standard. La manière standard de faire est avec addEventListener() et évidemment avec fallback en cas de besoin pour les vieilles version de IE.

Tout comme, on préfèrera un code du genre :


listeImagesPortfolio[ i ].addEventListener("onmouseout", function(){
    this.style.display = 'none';
}, true)


Puisqu'ainsi nous pourrons attacher plusieurs actions au même évènement si possible. Ce sera donc plus propre ainsi, et si quelqu'un reprend ton code, il ragera moins.

Évidemment, il faudra un fallback pour les vieux IE (6,7,8) qui utilisent leur propre version de cette fonction (.attachEvent()), mais c'est relativement simple en se créant une fonction personnelle.

Cela dit, il faut faire attention à l'utilisation du this dans un tel contexte puisque sous IE, this représentera l'objet window et non l'élément courant.

Au final, heureusement quand même qu'on a jQuery Smiley biggrin
Modifié par Vaxilart (25 Mar 2012 - 23:46)
niuxe a écrit :

Je me permets de te signaler que cette manière de faire est mauvaise (javascript intrusif - mauvaise séparation du contenu et du comportement)


Ah d'accord, je prends note, merci.
Autant pour moi, je n'ai pas tout mis mon code. C'est pour ma partie portfolio.

<ul id="first">
   <li>
      <a class="fancybox fancybox.iframe" href="fiche.php?client_num=1">
      <img class="show" src="img/portfolio/logo.jpg" />
      </a>
      <p><a href="fiche.php?client_num=1">Nom societe</a></p>
      <div class="hover"></div>
   </li>
</ul>


Je vous ai reduis le code car normalement, il y a une boucle php autour des li pour qu'il y en au plusieurs.
Au chargement de la page, le Jquery cache mes div class hover. Puis lors du hover sur une des images, la div class hover du li en question s'affiche.

Et la solution de niuxe n'est pas la bonne car lorsque je fais ca, il ne comprends pas que je veux afficher la div class hover. Comment puis je le specifier ?


#portfolio ul li { width:300px; height:220px; float:left; list-style:none; margin-bottom:20px; position:relative; }
#portfolio .hover { width:300px; height:210px; position:absolute; background:url('../img/portfolio/hover.png'); top:0; }
Modérateur
Salut,

Je comprends mieux maintenant. Bin, ton souci est toujours simple. Il suffit de se ballader dans le DOM. Ce que j'ai compris, lorsque l'on survole l'img, tu veux faire aparatire .hover ?

en jcuicui :

$("#portfolio .hover").hide();
$("#first li img").hover(function() {
$(this).closest('li').find('.hover').show(); //on pourrait très bien faire un siblings ou X next mais ce n'est pas une bonne solution [cligne]
},
function()
{
$(this).closest('li').find('.hover').hide();
});


Ca c'est pour la couche JS. En JS et CSS 2, tu peux faire un effet au lieu du simple display:none, display inline....On peut très bien le faire en CSS (li:hover .hover) !! Plus simple. Cependant, cette merde d'IE6 n'aimera pas. Mais bon faut le laisser là où il est (dans sa tombe).

@Vaxilart : Oui je suis tout à fait de ton avis. Mon exemple est fait pour les navigateurs.... Pour les autres machins, faut une surcouche....
Modifié par niuxe (26 Mar 2012 - 10:07)
Sujet clos
Aller à