Transformer paragraphe > Liens

Bonjour a tous , voila j'ne sais pas si c jouable, mais voila j'aimerais savoir si il est possible de modifier les caratéristiques d'une balise html (pour mon exemple p) en liens clicable via les feuilles de style ?

Pour plus de détail j'aimerais apporter une transition de 2s à un bloc "p class="invisibilité" avec pour propriété css "Visibility:hidden" . C'est a dire j'aimerais que ce bloc transitionne vers un espace vide.

merci a tous pour votre aide
Modifié par worms30 (07 Aug 2011 - 14:32)

svp aurriez vous une petite réponse pour moi merci a tous
Modifié par worms30 (07 Aug 2011 - 21:16)

non, soit plus explicite.

Salut a toi ptitvincent et merci pour ton aide, en faite j'ai un bloc p comme ceci:

<p class="invisibility">
Wie geht's les samis ? Hans apporte moi une Wurschtsalad avec un picon bitte, s'il te plaît.
  Voss ? Une Carola et du Melfor ? Yo dû, espèce de Knäckes, ch'ai dit un picon !
</p>

et j'aimerais que ce bloc dispaisse au survol . Il me semble que la propriété css :hover n'est applicable qu'aux liens "a". Donc comment faire pour rendre cette Eléments "p" clicable au meme titre que "a" ? Merci encore pour ton aide et désolé du retard j’étais partie en vacance

Non, la propriété :hover est valable pour tout objet - mais seuls les navigateurs modernes y réagiront, cependant je n'ai pas la liste dans la tête, là tout de suite.


Ceci dit, attention à ne pas confondre "cliquable" et "réagissant au survol"

Bonjour,

worms30 a écrit :
Il me semble que la propriété css :hover n'est applicable qu'aux liens "a".

Seulement pour IE6.
Tu peux donc l'appliquer sur ton p et trouver une autre solution si t'as besoin que ton site soit compatible IE6.

Edit: grillé !
Modifié par Mabelle (15 Aug 2011 - 18:42)

Merci a tout les deux pour vos réponses, comment détourner les probleme liée à ie et est il possible de rendre mon bloc p clicable au meme titre qu'un liens ?

Désolé si je multiplie mes questions mais puisqu'on y est ^^

merci a vous

Ta demande n'est pas claire. Est-ce que tu veux cacher le paragraphe au survol de la souris, ou au clic de la souris?

En effet, je préférerais apporter cet effet apres un simple clic de souris . Est ce possible ?

Oui, avec une petite dose de Javascript. C'est le langage destiné pour ce type d'effet.

ooups!!! j'en suis pas encore ici, je trouverais une solution alternative

merci a toi l'ami

Salut worms,

Moi je te propose une solution avec jquery je t'explique vite fais ce qu'il faut faire :

Premièrement c'est écrire ceci dans le header de ta page, Qui va charger la librairie jquery au chargement de ta page.

		<script	type="text/javascript"
				src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
		</script>

Ensuite égualement dans le header tu vas lié le fichier javascript ou tu vas écrire ce que l'ont souhaite faire

		<script	type="text/javascript"
				src="js/script.js">
		</script>

Ensuite dans ton code html là où tu le souhaites:

<a href="#" id="pwet">
cliquer pour afficher !
</a>
<p id="cacherOuPas">
prout !
<p>

Et enfin dans le fichier script.js tu écris

$(document).ready(function() 
{
    $("#cacherOuPas").hide(); //on cache le div avec l'id cacherOuPas
    
    $("#pwet").click(function()  //si on clique sur pwet
    { 
      $("#cacherOuPas").slideToggle(1000); // on fait ca !
    });
});

Enfin cette méthode a néanmoins des lacunes car quand on clique sur le lien on revient au dessus de la page. Pour éviter ce comportement il y a divers solutions plus ou moins propres ^^

J'espère t'avoir aidé.

A bientôt

Gili a écrit :

Enfin cette méthode a néanmoins des lacunes car quand on clique sur le lien on revient au dessus de la page. Pour éviter ce comportement il y a divers solutions plus ou moins propres ^^

...

$("#pwet").click(function(e)
    {  
      $("#cacherOuPas").slideToggle(1000);
      e.stopPropagation();
    }); 

Modifié par jb_gfx (15 Aug 2011 - 20:58)

Coooooool merci jb, décidément on en apprend tout les jours

jb_gfx a écrit :

...

Si tu t'ennuies tu peux critiquer mon site si tu veux (non ce n'est pas du racolage)

Encore merci pour tout ces conseils et methodes ^^

jb_gfx a écrit :

$("pwet").click(function(e)
    {  
      $("#cacherOuPas").slideToggle(1000);
      e.stopPropagation();
    }); 

Perso j'aurais plutôt utilisé preventDefault() qui me semble plus approprié :

$("pwet").click(function(e) {  
      $("#cacherOuPas").slideToggle(1000);
      e.preventDefault();
}); 

Un peu de doc sur preventdefault, stopPropagation, et stopImmediatePropagation :
http://dev-tricks.com/event-preventdefault-and-event-stoppropagation-and-event-stopimmediatepropagation/