Forum

Bonsoir,

Tout est dans le titre, je cherche le contrire de hover pour une feuille css en effet je voudrais que quand la souris sort de la zone il ai un evenement (que j'ai bien defini) ce serait l'équivalent d'un Onmouseout en flash (ou en html je sait plus...) mais pour un css ou quelque chose qui soit adaptable a un css !

Merci beaucoup

Édité par kk1cp Le 28/12/2007 à 17h31

Je rexplique mieux mon projet:
Voilà, je cherche à faire au passage de la souris, un changement progressif d'une image de fond définie dans le css à une autre. Des que la souris s'en irai, l'image reviendrait progressivement à la premiere. c'est l'equivalent d'un onmouseout mais je souhaite l'integrer à ce code en utilisant du javascript:

[code=html]<li class="link_subtitle">
<h6 class="sub_title2"><a href="{links.subtitle.URL}" style="display:block;" title="{links.subtitle.NAME}">{links.subtitle.NAME}</a></h6>
</li>[/code]

Avec l'utilisation du css bien sur car les images sont definies dans des classes dans la feuille de style!

Merci encore !

Édité par kk1cp Le 28/12/2007 à 19h14

tu veux un fondu des images lors du hover ?

non lors du onmouseout ! Sinon ça c'est simple !

comme sur ce lien plus bas ?



http://tecfa.unige.ch/themes/FAQ-FL/rollover/rollover.html

Ca ne serait pas en CSS mais en javascript, je crois que c'est onblur="".

Salut c'est incompatible avec firefox ça...

J'ai essayé une manière "trafiquée" en passant par une trasition deja faite en gif mais le probleme c'est que soit je met pour le gif qu'il se repete a l'infini auquel cas la transition se repete ou je met qu'une fois et il faut rafraichir pour pouvoir avoir de nouveau une transition!! (J'espere que je suis clair sinon faite le moi savoir )

[HS]Rien n'est compatible de nos jours[/HS]


Tu aurais pas un exemple car je vois pas c'est quoi personnellement j'ai trouver sur google un truc c'est lors du passage de la souris et tu l'enlève de la zone tu as une alerte c'est ça ?

Le onblur fonctionne sur tous les navigateurs, il n'y a pas de soucis, mais il faut utiliser du javascript et pas du CSS.

Mais c'est une action pour les formulaires d'après ce que j'ai lu ... (Je suis allé sur le même site que toi KONA )

+ Il est necessaire de clicker pour effectuer la fonction ou l'action or ce n'est pas ce qui m'interesse ce que je veux c'est juste quand on sors d'un element (CF Onmouseout lol)

Édité par kk1cp Le 28/12/2007 à 20h15

onMouseOut existe en javascript

Oui je sais bien je viens de l'adapter au template maintenant il me manque le code pour faire une transition alpha des 2 images mais je crois que ça n'existe que pour IE

J'ai trouvé un site qui permet un fading (=transition alpha) même avec firefox mais je n'arrives pas a le mettre en mouseout je ne comprend pas comment marche leur code...

Je vais essayer si je trouve je vous dit.

Merci.

Édité par kk1cp Le 28/12/2007 à 22h32

[code=html]<script type="text/javascript">
<!--
function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}
-->
</script>

<div onmouseout="shiftOpacity('id_img', 100)"><img src="adresseimg" alt="" id="id_img" /></div>[/code]

J'ai pas du tout testé, juste appliqué ce qu'il disait. J'ai survolé l'article, si ça marche pas je regarderai mieux.