Le contraire de hover en css
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
Reprise du message précédent
[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.
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
Sinon est ce que ceci est correct:[code=html]<a href="{links.subtitle.URL}" onmouseout="javascript:blendimage('blenddiv','blendimage','images/mini_block.gif',1000)"
onmouseover="javascript:blendimage('blenddiv','blendimage','images/mini_block.gif',1000)"
style="display:block;width:156px;height:23px;" title="{links.subtitle.NAME}">{links.subtitle.NAME}</a>[/code]
merci de corriger sinon.
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
[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>
<style type="text/css">
.link_subtitle{
width:156px;
height:24px;
display:block;
background:#E3F2FB url(IMAGE1.gif) no-repeat;
padding-top:1px;
text-align:center;
}
.link_subtitle_over{
width:156px;
height:24px;
display:block;
background:#99CFF0 url(IMAGE2.gif) no-repeat;
text-align:center;
}
</style>
<body>
<div onmouseover="this.className='link_subtitle_over';" onmouseout="this.className='link_subtitle';" />
<a href="lien" style="display: block;width: 156px;height: 24px; text-align:center" title="titredulien">LIEN PAGE1
</a>
</div>
</body>
[/code]
Merci ! Je vous conseille de tester la page en creeant les images données et vous verrez !
Édité par kk1cp Le 29/12/2007 à 00h31
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
<div onmouseover="this.className='link_subtitle_over';" onmouseout="shiftOpacity('id_img', 1000)">
<img src="mini_block.gif" alt="" id="id_img" />
</div>
Dans ce cas ci c'est l'objet <img> qui a l'ID (id_img) donc il se fera appliqué la transition shiftOpacity('id_img', 1000)" quand la souris sera partie.
Ceci est bien joli mais moi ce que je veux c'est que quand la souris part qu'il n'y ai que l'arriere plan qui transite donc cela reviendrait a mettre l'id a l'arriere plan mais celui ci est defini dans le style (pour que le lien soit affichable sur l'image)... Comme ceci:
<div onmouseover="this.className='link_subtitle_over';" onmouseout="this.className='link_subtitle';" />
<a href="lien" style="display: block;width: 156px;height: 24px; text-align:center" title="titredulien">LIEN PAGE1
</a>
</div>
Dans ce cas il n'i a pas de ID car si je le met au div le lien aussi se transite et moi je ne veux que l'arriere plan ... celui ci est dans le css mais on ne peut pas mettre d'ID a une image dans le css... voila! j'y tient vraiment ça fait plusieurs heures que je suis dessus!!
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
Donc j'ai ta confirmation que ça ne marchera pas comme ça il faut obligatoirement contourner le probleme ...
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
a.link_subtitle{
width:156px;
height:24px;
display:block;
background:#E3F2FB url(mini_block.gif) no-repeat;
padding-top:1px;
text-align:center;
}
a.link_subtitle:hover {
width:156px;
height:24px;
display:block;
background:#99CFF0 url(mini_block2.gif) no-repeat;
text-align:center;
}
</style>
</head>
<body>
<div onmouseout="shiftOpacity('id_img', 1000)" style="width:156px;" />
<a href="lien" class="link_subtitle" id="id_img" title="titredulien">LIEN PAGE1</a>
</div>
</body>
</html>[/code]
Ca marche à peu près avec ça.
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
<div onmouseout="shiftOpacity('id_img', 1000)" />
<a href="lien" class="link_subtitle" id="id_img" title="titredulien">LIEN PAGE1</a>
</div>
</div>[/code]
Là c'est mieux y a un arrière plan mais ça déconne toujorus au niveau de la transition du lien...
kk1cp Membre non connecté
-
Booster Mortier
- Voir le profil du membre kk1cp
- Inscrit le : 11/12/2005
J'ai ceci au départ:
[code=html]<a href="javascript:blendimage('blenddiv','blendimage','IMAGE1.gif',200)">Image 1</a> -
<a href="javascript:blendimage('blenddiv','blendimage','IMAGE2.gif',400)">Image 2</a> [/code]
je voudrais que qu'an la souris survole le lien qu'elle execute l'action javascript "blendimage" (pour comment, c'est reglé puique ça marche quand on click)
J'ai essayé ceci mais ça ne marche pas pourquoi?
[code=html]<a href= "LIEN" Onmouseover="blendimage('blenddiv','blendimage','IMAGE1.gif',200)">Image 1</a> -
<a href="LIEN" Onmouseover="blendimage('blenddiv','blendimage','IMAGE2.gif',400)">Image 2</a>[/code]
une aide de mise en forme html lol merci !
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie