Problème au survol d'une image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème au survol d'une image

Message par alv le Mer 17 Juil 2013 - 15:08

Bonjour,
j'ai un code sur mon forum : il passe d'une image à une autre au bout de certaines secondes ou au survol des carrés verts.
Le problème est que le survol ne fonctionne pas bien. Au-dessus d'une certaine limite, le survol ne fonctionne pas, et en-dessous le survol fonctionne parfaitement. J'ai donc essayé de mettre des "z-index: 99999" dans mon code mais ça n'a rien changé.

Code :
Spoiler:

D'où vient le problème ?
Merci d'avance.


Dernière édition par alv le Mer 24 Juil 2013 - 18:43, édité 1 fois (Raison : résolu)

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par Self le Mer 17 Juil 2013 - 15:59

Bonjour.

D'après ce fameux trait orange, c'est au survol du cadre que cela fonctonne ?
Auriez vous essayer au dessus de bouton n'importe ou votre image est ?

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par alv le Mer 17 Juil 2013 - 17:15

SeLfde4Th7 a écrit:D'après ce fameux trait orange, c'est au survol du cadre que cela fonctonne ?
Oui.
SeLfde4Th7 a écrit:Auriez vous essayer au dessus de bouton n'importe ou votre image est ?
Je n'ai pas compris.

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par Self le Mer 17 Juil 2013 - 19:34

Bien essayer en passant simplement sur l'image !

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par alv le Jeu 18 Juil 2013 - 9:57

Je l'ai fait et ça ne marche pas quand je survole en haut du trait.

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par alv le Ven 19 Juil 2013 - 10:06

Up
Very Happy

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par alv le Sam 20 Juil 2013 - 9:56

Up

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par alv le Dim 21 Juil 2013 - 11:16

Up aidez moi 

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par alv le Lun 22 Juil 2013 - 10:56

Up

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par alv le Mar 23 Juil 2013 - 10:40

up (5ème)

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par Izumi375 le Mar 23 Juil 2013 - 12:46

Coucou,

D'abord pense à indenter ton code, c'est lisible pour toi mais ça décourage les gens qui viennent t'aider. Sad 

Ensuite t'as une façon tordue de concevoir ton code. dwarf 
Je dis ça parce que ton erreur vient de là. Tu as coder les petits carrés verts AVANT l'encadré "direct sport: diffusion des rencontres sportives du monde..." alors qu'ils sont dans la même div et surtout positionnés plus bas! Du coup quand tu fais un hover celui ci ne déborde pas sur le code qui est en dessous. Je doute que mon explication soit très claire mais je peux pas faire mieux...
Voilà la correction (css inclus):

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
   <style type="text/css">
   #regarderendirect{
 margin: 0px -70px -74px 0px;
 margin-left: 5px;
 }
#view1{
 /* Diapo */
 width: 440px;
 height: 220px;
 border: solid 2px #41BB1E;
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 padding: 0px;
 }
.onglet1{
 /* Vignettes et texte */
 margin: 205px 0px 0px 40px;
 }
.onglet-table1 img{
 /* Vignettes */
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 padding: 0px 0px;
 width: 0px;
 height: 18px;
 }
.onglet-table1 td.active, .onglet-table1 td:hover{
 /* Vignette active */
 background-image: url('http://i70.servimg.com/u/f70/17/66/41/57/diapos24.png');
 border: solid 2px #41BB1E;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 }
.onglet-table1 td{
 /* Vignettes inactives */
 background-image: url('http://i70.servimg.com/u/f70/17/66/41/57/diapos25.png');
 border: solid 2px #339966;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 width: 18px;
 height: 18px;
 }
.onglet-content1 > div{
 /* Texte */
 display: none;
 font-size: 13px;
 color: white;
 line-height: 1.8;
 text-align: justify;
 border: solid 0px;
 padding: 3px;
 width: 166px;
 height: 217px;
 margin: -205px 0px 0px 230px;
 border-radius: 0px 19px 24px 0px;
 -moz-border-radius: 0px 19px 24px 0px;
 -webkit-border-radius: 0px 19px 24px 0px;
 background-image: url('http://i70.servimg.com/u/f70/17/66/41/57/diapos22.png');
 background-repeat:no-repeat;
 }
.onglet-content1 > div.active{
 display: block;
 }
.onglet-table1{
 border-spacing: 2px;
 margin-top: -15px;
 }
 
   </style>
  </head>
  <body>
<script language="javascript" type="text/javascript">
jQuery.fn.extend({
 everyTime: function(interval, label, fn, times) {
 return this.each(function() {
 jQuery.timer.add(this, interval, label, fn, times);
 });
 },
 oneTime: function(interval, label, fn) {
 return this.each(function() {
 jQuery.timer.add(this, interval, label, fn, 1);
 });
 },
 stopTime: function(label, fn) {
 return this.each(function() {
 jQuery.timer.remove(this, label, fn);
 });
 }
});

jQuery.extend({
 timer: {
 global: [],
 guid: 1,
 dataKey: "jQuery.timer",
 regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
 powers: {
 // Yeah this is major overkill...
 'ms': 1,
 'cs': 10,
 'ds': 100,
 's': 1000,
 'das': 10000,
 'hs': 100000,
 'ks': 1000000
 },
 timeParse: function(value) {
 if (value == undefined || value == null)
 return null;
 var result = this.regex.exec(jQuery.trim(value.toString()));
 if (result && result[2]) {
 var num = parseFloat(result[1]);
 var mult = this.powers[result[2]] || 1;
 return num * mult;
 } else {
 return value;
 }
 },
 add: function(element, interval, label, fn, times) {
 var counter = 0;
 
if (jQuery.isFunction(label)) {
 if (!times)
times = fn;
 fn = label;
 label = interval;
 }
 
interval = jQuery.timer.timeParse(interval);

 if (typeof interval != 'number' || isNaN(interval) || interval < 0)
 return;

 if (typeof times != 'number' || isNaN(times) || times < 0)
times = 0;
 
times = times || 0;
 
var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});
 
if (!timers[label])
 timers[label] = {};
 
fn.timerID = fn.timerID || this.guid++;
 
var handler = function() {
 if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
 jQuery.timer.remove(element, label, fn);
 };
 
handler.timerID = fn.timerID;
 
if (!timers[label][fn.timerID])
 timers[label][fn.timerID] = window.setInterval(handler,interval);
 
this.global.push( element );
 
},
 remove: function(element, label, fn) {
 var timers = jQuery.data(element, this.dataKey), ret;
 
if ( timers ) {
 
if (!label) {
 for ( label in timers )
 this.remove(element, label, fn);
 } else if ( timers[label] ) {
 if ( fn ) {
 if ( fn.timerID ) {
 window.clearInterval(timers[label][fn.timerID]);
 delete timers[label][fn.timerID];
 }
 } else {
 for ( var fn in timers[label] ) {
 window.clearInterval(timers[label][fn]);
 delete timers[label][fn];
 }
 }
 
for ( ret in timers[label] ) break;
 if ( !ret ) {
 ret = null;
 delete timers[label];
 }
 }
 
for ( ret in timers ) break;
 if ( !ret )
jQuery.removeData(element, this.dataKey);
 }
 }
 }
});

jQuery(window).bind("unload", function() {
 jQuery.each(jQuery.timer.global, function(index, item) {
 jQuery.timer.remove(item);
 });
});
</script> -->

<script type="text/javascript">
  jQuery(document).ready(function(){
      var img = jQuery(".onglet-table1").find("td.active").find("img").attr('src');
      jQuery("#view1").css('background','url("'+img+'")');
      jQuery(".onglet-table1 td").mouseover(function(){
        jQuery(".onglet-table1").stopTime("slide");
        var system = jQuery(this).closest(".onglet1");
        system.find(".onglet-table1").find(".active").removeClass("active");
        system.find(".onglet-content1").find(".active").removeClass("active");
        var id = jQuery(this).attr("name");          
       jQuery(this).addClass("active");
        system.find(".onglet-content1").find("div[name='"+id+"']").addClass("active");
        var img = jQuery(this).find("img").attr('src');
        jQuery("#view1").css('background','url("'+img+'")')
      });
      jQuery(".onglet-table1").find("td").mouseout(function(){
        slideShoot1();
      });

      slideShoot1();
  });
  function slideShoot1(){
      var delay = 7000; //Intervalle de défilement en millisecondes
      jQuery(".onglet-table1").everyTime(delay, "slide", function(){
        var active = jQuery(this).find(".active");
        var system = jQuery(this).closest(".onglet1");
        active.removeClass("active");
        system.find(".onglet-content1").find(".active").removeClass("active");
        var i = active.attr('name');
        i++;
        if (i==9){i=1;}
        jQuery(this).find("td[name='"+i+"']").addClass("active");
        system.find(".onglet-content1").find("div[name='"+i+"']").addClass("active");
        var img = jQuery(this).find(".active").find("img").attr('src');
        jQuery("#view1").css('background','url("'+img+'")')
      });
  }
</script> <div align="center">

<table border="0" width="485" height="280"><tr><td valign="bottom"><div align="left"><img src="http://i70.servimg.com/u/f70/17/66/41/57/sportt11.png" id="regarderendirect"></div><div align="center" style="font-size: 12px; margin-left: 80px; margin-bottom: 5px"><b><span id="ChangeCouleur" style="font-size: 13px">Sport TV</span></b> devient <span class="directsport">Direct Sport</span></div>
<script language="javascript">function ChangeCouleur(){var color="#FF0000|#FF6600|#808000|#008000|#0000FF|#333333";color=color.split("|");document.getElementById("ChangeCouleur").style.color=color[parseInt(Math.random() * color.length)];}setInterval("ChangeCouleur()",500);</script><div align="right">

<table border="0" style="margin-right: -45px">
 <tr>
 <td width="430" style="text-align: right; vertical-align: bottom; padding-right: 40px; padding-bottom: 15px;"><div style="background: url('http://i70.servimg.com/u/f70/17/66/41/57/diapos10.png') no-repeat scroll center transparent;" id="view1">
<font size="2">  </font><div class="onglet1">
<font size="2">

<div class="onglet-content1">

<font size="2">        </font><div class="active" name="1">

<br><div align="center"><img src="http://i70.servimg.com/u/f70/17/66/41/57/sportt10.png"><br>
<br><b>Diffusions des<br>rencontres sportives<br>du monde entier gratuitement</b></div>

</div><font size="2">        </font><div class="" name="2">

<table width="100%" border="0"><tr><td><div align="center"><span style="font-variant: small-caps;"><b>-<span style="font-size: 5px"> </span>Direct Sport, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>1<span style="font-size: 5px"> </span>-<br>RMC Live</b></span></div>
<hr style="width: 100px; height: 1px; border-color: gray">
Suivez tous les matchs de l'ASSE, de la Ligue 1 et des compétitions europé­ennes en commentaires audio et/ou texte.
</td></tr><tr><td><div align="right"><a href="http://cartonvert.forumloire.com/t91-direct-sport-canal-1-rmc-live#128"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos21.png" width="89" height="19" style="margin-right: 5px"></a></div>
</td></tr></table>

</div><font size="2">        </font><div class="" name="3">

<table width="100%" border="0"><tr><td><div align="center"><span style="font-variant: small-caps;"><b>-<span style="font-size: 5px"> </span>Direct Sport, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>2<span style="font-size: 5px"> </span>-<br>Streaming matchs</b></span></div>
<hr style="width: 100px; height: 1px; border-color: gray">
Regardez toutes les dif­fusions des rencontres sportives du monde en­tier dont les matchs de l'ASSE et de la Ligue 1.
</td></tr><tr><td><div align="right"><a href="http://cartonvert.forumloire.com/t96-direct-sport-canal-2-streaming-matchs#133"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos21.png" width="89" height="19" style="margin-right: 5px"></a></div>
</td></tr></table>

</div><font size="2">        </font><div class="" name="4">

<table width="100%" border="0"><tr><td><div align="center"><span style="font-variant: small-caps;"><b>-<span style="font-size: 5px"> </span>Direct Sport, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>3<span style="font-size: 5px"> </span>-<br>ASSE Replay</b></span></div>
<hr style="width: 100px; height: 1px; border-color: gray">
Regardez et revivez tous les buts de l'ASSE en championnat, match par match.
</td></tr><tr><td><br><div align="right"><a href="http://cartonvert.forumloire.com/f17-direct-sport-canal-3-asse-replay#i_post"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos21.png" width="89" height="19" style="margin-right: 5px"></a></div>
</td></tr></table>

</div><font size="2">        </font><div class="" name="5">

<table width="100%" border="0"><tr><td><div align="center"><span style="font-variant: small-caps;"><b>-<span style="font-size: 5px"> </span>Direct Sport, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>4<span style="font-size: 5px"> </span>-<br>Streaming infos</b></span><br>Canal Football Club</div>
<hr style="width: 100px; height: 1px; border-color: gray">
Tenez-vous au courant de toute l'actualité de l'ASSE et de la Ligue 1, par Canal Football Club.
</td></tr><tr><td><div align="right"><a href="http://cartonvert.forumloire.com/t103-direct-sport-canal-4-streaming-infos-canal-football-club#140"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos21.png" width="89" height="19" style="margin-right: 5px"></a></div>
</td></tr></table>

</div><font size="2">        </font><div class="" name="6">

<table width="100%" border="0"><tr><td><div align="center"><span style="font-variant: small-caps;"><b>-<span style="font-size: 5px"> </span>Direct Sport, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>4<span style="font-size: 5px"> </span>-<br>Streaming infos</b></span><br>L'Equipe 21</div>
<hr style="width: 100px; height: 1px; border-color: gray">
Tenez-vous au courant de toute l'actualité de l'ASSE et de la Ligue 1, par L'Equipe 21.
</td></tr><tr><td><div align="right"><a href="http://cartonvert.forumloire.com/t102-direct-sport-canal-4-streaming-infos-l-equipe-21#139"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos21.png" width="89" height="19" style="margin-right: 5px"></a></div>
</td></tr></table>

</div><font size="2">        </font><div class="" name="7">

<table width="100%" border="0"><tr><td><div align="center"><span style="font-variant: small-caps;"><b>-<span style="font-size: 5px"> </span>Direct Sport, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>4<span style="font-size: 5px"> </span>-<br>Streaming infos</b></span><br>RMC Sport</div>
<hr style="width: 100px; height: 1px; border-color: gray">
Tenez-vous au courant de toute l'actualité de l'ASSE et de la Ligue 1, par RMC Sport.
</td></tr><tr><td><div align="right"><a href="http://cartonvert.forumloire.com/t99-direct-sport-canal-4-streaming-infos-rmc-sport#136"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos21.png" width="89" height="19" style="margin-right: 5px"></a></div>
</td></tr></table>

</div><font size="2">        </font><div class="" name="8">

<table width="100%" border="0"><tr><td><div align="center"><span style="font-variant: small-caps;"><b>-<span style="font-size: 5px"> </span>Direct Sport, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>4<span style="font-size: 5px"> </span>-<br>Streaming infos</b></span><br>Radios locales</div>
<hr style="width: 100px; height: 1px; border-color: gray">
Tenez-vous au courant de toute l'actualité de l'ASSE, par Radio Scoop et Loire FM.
</td></tr><tr><td><div align="right"><a href="http://cartonvert.forumloire.com/t98-direct-sport-canal-4-streaming-infos-radios-locales#134"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos21.png" width="89" height="19" style="margin-right: 5px"></a></div>
</td></tr></table>

</div>
</div>



 <table class="onglet-table1">
 
<tr>
 <td class="active" name="1"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos10.png"></td>
 
 <td class="" name="2"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos11.png"></td>
 <td class="" name="3"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos12.png"></td>
 <td class="" name="4"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos14.png"></td>
 <td class="" name="5"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos15.png"></td>
 <td class="" name="6"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos16.png"></td>
 <td class="" name="7"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos18.png"></td>
 <td class="" name="8"><img src="http://i70.servimg.com/u/f70/17/66/41/57/diapos23.png"></td>
 </tr>
 
</table>

</font></div></div>

</td></tr></table>

</div></td></tr></table></div>

<span style="font-size: 12px"><b>> Regardez et vivez en intégralité et en exclusivité TOUTES LES RENCONTRES SPORTIVES DU MONDE ENTIER dont les MATCHS DE L'ASSE et de la LIGUE 1. Tout ceci <u>EN DIRECT</u>, <u>ENTIÈREMENT GRATUIT</u> et <u>EN ILLIMITÉ</u>, depuis le forum <span  class="cartonvert">Carton Vert</span>.</b>
<br><br><font color="green"><b>Accès réservé aux membres ayant au moins posté 5 MESSAGES sur le forum. <a href="http://cartonvert.forumloire.com/register">Devenez membre du forum</a>, <a href="http://cartonvert.forumloire.com/f3-presentations-anniversaires">présentez-vous</a> puis postez un minimum de 5 messages.</b></font></span><br>

<font color="#C9C9C9"><del>                   </del></font>

<br><span style="font-size: 11px"><img class="sprite-icon_minipost" src="http://illiweb.com/fa/empty.gif" border="0"><a href="http://cartonvert.forumloire.com/f15-direct-sport-canal-1-rmc-live" style="text-decoration: none"><span class="directsport" style="font-size: 11px">Direct Sport</span>, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>1. RMC Live</a>, <img class="sprite-icon_minipost" src="http://illiweb.com/fa/empty.gif" border="0"><a href="http://cartonvert.forumloire.com/f16-direct-sport-canal-2-streaming-matchs" style="text-decoration: none"><span class="directsport" style="font-size: 11px">Direct Sport</span>, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>2. Streaming matchs</a>, <img class="sprite-icon_minipost" src="http://illiweb.com/fa/empty.gif" border="0"><a href="http://cartonvert.forumloire.com/f17-direct-sport-canal-3-asse-replay" style="text-decoration: none"><span class="directsport" style="font-size: 11px">Direct Sport</span>, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>3. ASSE replay</a>, <img class="sprite-icon_minipost" src="http://illiweb.com/fa/empty.gif" border="0"><a href="http://cartonvert.forumloire.com/f18-direct-sport-canal-4-streaming-infos" style="text-decoration: none"><span class="directsport" style="font-size: 11px">Direct Sport</span>, <span style="font-size: 11px">canal</span><span style="font-size: 2px"> </span>4. Streaming infos</a></span>
  </body>
</html>

Enjoy pig

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au survol d'une image

Message par alv le Mer 24 Juil 2013 - 18:40

Merci beaucoup, c'est parfait !
Ton explication était claire.

résolu

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum