[Résolu] Cacher une image linké avec du js

Bonjour tout le monde,

alors voilà, je cherche à camoufler des images linkées mise en page via un tableau html, donc pas de class et pas d'id, donc pas de css correctif.

Du coup je me dis : existe-t-il une fonction type getElementbyId qui me permettrait de réinjecter un petit

style="display:none;"

en réexploitant le title de mon lien, que voici :

<a title="fr_BE sp1" href="http://www.google.fr" name="&amp;lid=Default_Right4"><img height="123" width="483" border="0" alt="fr_BE sp1" src="/images/catalog/content/282500.jpg"></a>

Merci d'avance !
Modifié par JimmyWJimmy (17 Nov 2010 - 13:46)

Salut,

Pour cela il faut un id à ton image

<img src="url" id="mon_image" />

idem pour ton lien

<a href="toto" id="lien" onclick="cacher('mon_image');">lien</a>

La fonction

function cacher(champ)
{
  var e = getElementById(champ);
  e.style.display = "none";
}

Un truc du genre ....

Avec jQuery :

$("#lien").click( function() {
	$("#mon_image").toggle("fast");
});

Modifié par Hayreon (16 Nov 2010 - 18:20)

Merci pour ta réponse,

mais si je pouvais mettre une id dans mon lien et dans monimage, je mettrai directement la balise style

Il me faut une soluce, sans toucher le lien d'exemple.

...Si c'est possible...

Avec Jquery tu peux faire un truc comme ça :

$(function() {
  $('img').each(function() {
    t = $(this).attr('title');
    if(t == 'fr_BE sp1')
      $(this).css('display', 'none');
  });
});

Hello,

ça me semblait top comme solution, malheureusement en faisant un test en local : no results

<a title="fr_BE sp1" href="http://www.google.fr" name="&amp;lid=Default_Right4"><img height="123" width="483" border="0" alt="fr_BE sp1" src="http://www.mediacircus.com/wp-content/uploads/2009/04/obama-shame.jpg"></a>

<script>
$(function() { 
  $('img').each(function() { 
    t = $(this).attr('title'); 
    if(t == 'fr_BE sp1') 
      $(this).css('display', 'none'); 
  }); 
}); 
</script>

sur le même lien j'ai aussi tenté ça (exploitation de l'alt img):

$(function() { 
  $('img').each(function() { 
    t = $(this).attr('alt'); 
    if(t == 'fr_BE sp1') 
      $(this).css('display', 'none'); 
  }); 
}); 

et ça (title de a)

$(function() { 
  $('a').each(function() { 
    t = $(this).attr('title'); 
    if(t == 'fr_BE sp1') 
      $(this).css('display', 'none'); 
  }); 
}); 

une idée ?

jb_gfx a écrit :
Avec Jquery tu peux faire un truc comme ça :

$(function() {
  $('img').each(function() {
    t = $(this).attr('title');
    if(t == 'fr_BE sp1')
      $(this).css('display', 'none');
  });
});

C'est vachement impressionnant. Je note tout de même qu'il y a une solution en CSS, qui hélas prend beaucoup plus de lignes de code:

a[title="fr_BE sp1"] {display:none;}

Et si on doit être compatible avec Papy IE6 qui ne supporte pas cette syntaxe de sélecteur, on peut utiliser la même syntaxe de sélecteur avec une librairie JS telle que jQuery:

jQuery('a[title="fr_BE sp1"]').hide();

Bien sûr dans l'absolu il faut avoir un code HTML plus propre que ça! Ces astuces sont uniquement valables si tu n'as pas de contrôle sur le code HTML.

JimmyWJimmy a écrit :
pas de class et pas d'id, donc pas de css correctif

Il serait temps de <del>réviser</del> apprendre les sélecteurs CSS 2.1.
http://www.w3.org/TR/CSS2/selector.html (spec, anglais)
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php (tutoriel, français)
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx (support dans IE par version, anglais)

et son visage devint rouge.. de honte ^^

Ok no comment, la soluce CSS fonctionne impeccablement, de même pour le JQuery objectif IE6.

@jb_gfx : ta fonction marchait aussi très bien, c'était ma librairie qui était en défaut.

Merci à tous !

Dédicace à Florent V : &#9829;

lol@ Florent V