Problème image qui flash (plus)

Bonjour à tous, j'ai un souci avec les images de ma page d'accueil.

J'avais fait un effet de flash lorsqu'on passe sur une image, mais depuis peu elles disparaissent et rien ne se passe.

http://www.cyrillemaurice.com/sakuracommunication/

Auriez vous une idée?
Je vous remercie beaucoup pour votre aide

Bonjour,

ton lien n'est simplement pas bon.
L'état normal appelle :

url(../images/case_impression_0.jpg)

et l'état hover ajouté en js ( bouh! ) appelle ça :

url(http://www.cyrillemaurice.com/images/case_impression_0.jpg)

Ce dernier lien, si tu essaies de l'ouvrir dans ton navigateur, affiche une 404.. Et d'après le premier lien ( si je l'affiche séparément ) ton dossier images est dans le dossier "sakuracommunication" et non pas à la racine.

Ten a écrit :
...
et l'état hover ajouté en js ( bouh! )

Et pourquoi ça ?...

Ok, je vois ou est le problème, mais dans mon fichier que je vous joins, je ne vois pas du tout ou est le souci.

<div id="flashingBoxText">
    <h1>Votre agence de communication et cr&eacute;ation web  &agrave; TOULOUSE test</h1>
	<p>
		Nous vous accompagnons et vous conseillons tout au long de vos plans<br/>
		de communication, de cr&eacute;ations graphiques et de site internet. <br/>
    <p>
</div>

<table id="tableFlashBox">
	<tr>
    	<td class="topLine" colspan="3">
        	<img src="images/filet_haut.jpg" />
        </td>
    </tr>
	<tr>
    	<td class="flashOnglet">
        	<div id="ongletFlashBox1">
            	<img src="images/bouton_light_box.jpg" />
            </div>
        	<div id="flashBox1" name="0" class="flashingBox"  onclick="document.location.href='./?p=imprimerie-toulouse'">
            </div>
            
            <div class="tooltip" id="impression_box">
            <img src="images/arrow_down.png" style="position:relative;right:-180px;top:110px; float:left"/>
            <h3 class="green">Impression print</h3>
            <p style="text-align:left"><strong>flyers</strong>, <strong>cartes de visites</strong>, <strong>documents commerciaux</strong>, <strong>
            b&acirc;ches</strong>, <strong>kak&eacute;monos</strong>, <strong>catalogues</strong>, <strong>tampons</strong>, <strong>panneaux alv&eacute;
            olaires</strong>, <strong>rev&ecirc;tements de voitures</strong>.</p></div>
            
            <br style="clear : both"/>
        </td>
        <td class="flashOnglet">
        	<div id="ongletFlashBox2">
            	<img src="images/bouton_light_box.jpg" />
            </div>
        	<div  id="flashBox2" name="0" class="flashingBox"  onclick="document.location.href='./?p=graphique'">
            </div>
            
            <div class="tooltip" id="design_box">
            <img src="images/arrow_down.png" style="position:relative;right:-180px;top:130px; float:left"/>
            <h3 class="green">Design graphiques</h3>
            <p style="text-align:left"><strong>logos</strong>, <strong>chartes graphiques</strong>, <strong>flyers</strong>, <strong>cartes de visites</strong>, <strong>documents commerciaux</strong>, <strong>b&acirc;ches</strong>, <strong>kak&eacute;monos</strong>, <strong>catalogues</strong> , <strong>tampons</strong>, <strong>panneaux alv&eacute;olaires</strong> , <strong>rev&ecirc;tements de voitures</strong>, <strong>plaquettes commerciales</strong>.
</p></div>
            
            
            
        </td>
        <td class="flashOnglet">
        	<div id="ongletFlashBox3">
            	<img src="images/bouton_light_box.jpg" />
            </div>
        	<div  id="flashBox3" name="0" class="flashingBox" onclick="document.location.href='./?p=web'">
            </div>
            <div class="tooltip" id="web_box" style="width:370px; height : 80px">
            <img src="images/arrow_down.png" style="position:relative;right:-180px;top:100px; float:left"/>
            <h3 class="green">D&eacute;monstation web</h3>
            <p style="text-align:left">Sur cette page une d&eacute;monstration de notre savoir en faire en terme de nouvelles technologies internet, 
            <strong>sites vitrines</strong>, <strong>sites &eacute;v&egrave;nementiels</strong>, <strong>Sites e-commerce</strong>.</p></div>
            
        </td>
    </tr>
    <tr>
    	<td class="flashOnglet">
        	<div id="ongletFlashBox4">
            	<img src="images/bouton_light_box.jpg" />
            </div>
        	<div id="flashBox4" class="flashingBox" onclick="document.location.href='./?p=packaging'">
            </div>
            
        </td>
        <td class="flashOnglet">
        	<div id="ongletFlashBox5">
            	<img src="images/bouton_light_box.jpg" />
            </div>
        	<div  class="flashingBox" id="flashBox5" onclick="document.location.href='./?p=referencement'">
            </div>
            
            <div class="tooltip" id="ref_box" style="width:370px; height : 80px">
            <img src="images/arrow_down.png" style="position:relative;right:-180px;top:100px; float:left"/>
            <h3 class="green">Votre espace r&eacute;f&eacute;rencement</h3>
            <p style="text-align:left">
			Nous avons d&eacute;velopp&eacute; un outil unique afin d'optimiser au maximum votre r&eacute;f&eacute;rencement.
            </p></div>
        </td>
        <td class="flashOnglet">
        	<div id="ongletFlashBox6">
            	<img src="images/bouton_light_box.jpg" />
            </div>
        	<div id="flashBox6"  class="flashingBox">
            </div>
        </td>
    </tr>
    <tr>
    	<td class="topLine" colspan="3">
        	<img src="images/filet_haut.jpg" />
        </td>
    </tr>
</table>
<div class="lastWord">
	 <p class="sakuraRed">
    	Votre agence de communication est bas&eacute;e &agrave; Toulouse,<br/>
        cependant notre champs d'action s'&eacute;tend sur la France enti&egrave;re !
    </p>
</div>
<br style="clear : both"/>

<script type="text/javascript">


	var ct;
	var aleardyin = 0;
	
	
	/*****Impression****/
	
	function recursivePrint (container)
	{
			container.html('<img src="images/blanc.jpg" style="opacity : 0.4" />');
			var image = jQuery(container).children("img");
			var wall = (Number (container.attr('name')) + 1) % 5;
				container.attr('name', wall);
				image.css({"opacity" : "0.4"});
				container.css({'background' : 'url(../images/case_impression_'+wall+'.jpg)'});
			
			
			//blanc disparait
			image.fadeTo(100, 0.8);
			setTimeout (function () {image.fadeTo(400, 0);}, 100);
			ct = setTimeout (function () {
				next = 0;
				recursivePrint (container);
			}, 1200);
	};


	/*****Desgin****/
	function recursiveDesign (container)
	{
			container.html('<img src="images/blanc.jpg" style="opacity : 0.4" />');
			var image = jQuery(container).children("img");
			var wall = (Number (container.attr('name')) + 1) % 7;
				container.attr('name', wall);
				image.css({"opacity" : "0.4"});
				container.css({'background' : 'url(../images/case_design_'+wall+'.jpg)'});
			
			
			//blanc disparait
			image.fadeTo(100, 0.8);
			setTimeout (function () {image.fadeTo(400, 0);}, 100);
			ct = setTimeout (function () {
				next = 0;
				recursiveDesign (container);
			}, 1200);
	};

	
	/*****Demonstration****/
	function recursiveDemonstration (container)
	{
			container.html('<img src="images/blanc.jpg" style="opacity : 0.4" />');
			var image = jQuery(container).children("img");
			var wall = (Number (container.attr('name')) + 1) % 6;
				container.attr('name', wall);
				image.css({"opacity" : "0.4"});
				container.css({'background' : 'url(../images/case_demonstration_'+wall+'.jpg)'});
			
			
			//blanc disparait
			image.fadeTo(100, 0.8);
			setTimeout (function () {image.fadeTo(400, 0);}, 100);
			ct = setTimeout (function () {
				next = 0;
				recursiveDemonstration (container);
			}, 1200);
	};
	
	
	/*****Communication****/
	function recursiveCommunication (container)
	{
			container.html('<img src="images/blanc.jpg" style="opacity : 0.4" />');
			var image = jQuery(container).children("img");
			var wall = (Number (container.attr('name')) + 1) % 7;
				container.attr('name', wall);
				image.css({"opacity" : "0.4"});
				container.css({'background' : 'url(../images/case_communication_'+wall+'.jpg)'});
			
			
			//blanc disparait
			image.fadeTo(100, 0.8);
			setTimeout (function () {image.fadeTo(400, 0);}, 100);
			ct = setTimeout (function () {
				next = 0;
				recursiveCommunication (container);
			}, 1200);
	};
	
	
	
	/*****referencement****/
	function recursiveReferencement (container)
	{
			container.html('<img src="images/blanc.jpg" style="opacity : 0.4" />');
			var image = jQuery(container).children("img");
			var wall = (Number (container.attr('name')) + 1) % 5;
				container.attr('name', wall);
				image.css({"opacity" : "0.4"});
				container.css({'background' : 'url(../images/case_referencement_'+wall+'.jpg)'});
			
			
			//blanc disparait
			image.fadeTo(100, 0.8);
			setTimeout (function () {image.fadeTo(400, 0);}, 100);
			ct = setTimeout (function () {
				next = 0;
				recursiveReferencement (container);
			}, 1200);
	};
	
	
	
	/*****Equipe****/
	function recursiveEquipe (container)
	{
			container.html('<img src="images/blanc.jpg" style="opacity : 0.4" />');
			var image = jQuery(container).children("img");
			var wall = (Number (container.attr('name')) + 1) % 10;
				container.attr('name', wall);
				image.css({"opacity" : "0.4"});
				container.css({'background' : 'url(../images/case_votre_equipe_'+wall+'.jpg)'});
			
			
			//blanc disparait
			image.fadeTo(100, 0.8);
			setTimeout (function () {image.fadeTo(400, 0);}, 100);
			ct = setTimeout (function () {
				next = 0;
				recursiveEquipe (container);
			}, 1200);
	};
	
	
	
	
	
	$(document).ready (function (){
	
	
	/*****Impression****/
	$("#flashBox1").mouseout(function (){
		clearTimeout(ct);
		$(this).attr ('name', 0);
		$(this).css({'background' : 'url(../images/case_impression_0.jpg)'});
		aleardyin = 0;
	});
	
	
	
	$("#flashBox1").mouseover(function (){
		if (aleardyin == 0)
		{
			aleardyin = 1;
			recursivePrint ($(this));
		}
	});

	/*******Design**********/
	$("#flashBox2").mouseout(function (){
		clearTimeout(ct);
		$(this).attr ('name', 0);
		$(this).css({'background' : 'url(../images/case_design_0.jpg)'});
		aleardyin = 0;
	});
	
	
	
	$("#flashBox2").mouseover(function (){
		if (aleardyin == 0)
		{
			aleardyin = 1;
			recursiveDesign ($(this));
		}
	});
	
	
	/*******Demonstration**********/
	$("#flashBox3").mouseout(function (){
		clearTimeout(ct);
		$(this).attr ('name', 0);
		$(this).css({'background' : 'url(../images/case_demonstration_0.jpg)'});
		aleardyin = 0;
	});
	
	
	
	$("#flashBox3").mouseover(function (){
		if (aleardyin == 0)
		{
			aleardyin = 1;
			recursiveDemonstration ($(this));
		}
	});
	
	/*******Communication**********/
	$("#flashBox4").mouseout(function (){
		clearTimeout(ct);
		$(this).attr ('name', 0);
		$(this).css({'background' : 'url(../images/case_com_global_0.jpg)'});
		aleardyin = 0;
	});
	
	
	
	$("#flashBox4").mouseover(function (){
		if (aleardyin == 0)
		{
			aleardyin = 1;
			recursiveCommunication ($(this));
		}
	});
	
	
	/*******Referencement**********/
	$("#flashBox5").mouseout(function (){
		clearTimeout(ct);
		$(this).attr ('name', 0);
		$(this).css({'background' : 'url(../images/case_referencement_0.jpg)'});
		aleardyin = 0;
	});
	
	
	
	$("#flashBox5").mouseover(function (){
		if (aleardyin == 0)
		{
			aleardyin = 1;
			recursiveReferencement ($(this));
		}
	});
	
	/*******Equipe**********/
	$("#flashBox6").mouseout(function (){
		clearTimeout(ct);
		$(this).attr ('name', 0);
		$(this).css({'background' : 'url(../images/case_votre_equipe_0.jpg)'});
		aleardyin = 0;
	});
	
	
	
	$("#flashBox6").mouseover(function (){
		if (aleardyin == 0)
		{
			aleardyin = 1;
			recursiveEquipe ($(this));
		}
	});
	
	$("#ongletFlashBox1").click(function () {
	 var table = document.getElementById('tableFlashBox');
	  $("#impression_box").show("normal");
	  $("#impression_box").css({ 'position' : 'absolute','left' : (table.offsetLeft - 185)+'px','top' : (table.offsetTop - 80)+'px'});
    });
	
	$("#ongletFlashBox1").mouseout(function () {
      $("#impression_box").fadeOut("slow");
    });
	
	$("#ongletFlashBox2").click(function () {
		var table = document.getElementById('tableFlashBox');
	  $("#design_box").show("normal");
	  $("#design_box").css({ 'position' : 'absolute','left' : (table.offsetLeft + 14)+'px','top' : (table.offsetTop - 100)+'px'});
	
	
    });
	$("#ongletFlashBox2").mouseout(function () {
      $("#design_box").fadeOut("slow");
    });
	
	$("#ongletFlashBox3").click(function () {
  		
		 var table = document.getElementById('tableFlashBox');
	  $("#web_box").show("normal");
	  $("#web_box").css({ 'position' : 'absolute','left' : (table.offsetLeft + 213)+'px','top' : (table.offsetTop - 75)+'px'});

    });
	
	$("#ongletFlashBox3").mouseout(function () {
      $("#web_box").fadeOut("slow");
    });
	
	$("#ongletFlashBox5").click(function () {
		 var table = document.getElementById('tableFlashBox');
	  $("#ref_box").show("normal");
	  $("#ref_box").css({ 'position' : 'absolute','left' : (table.offsetLeft +14)+'px','top' : (table.offsetTop + 60)+'px'});

    });
	
	$("#ongletFlashBox5").mouseout(function () {
      $("#ref_box").fadeOut("slow");
    });
	
	
	
	
	});
	
	
	
	
	
	
// Si toutes les images sont dans le même répertoire
// Chemin vers le répertoire des images
var chemin = "images/";

// Si toutes les images ont la même extension
// L'extension de toutes les images
var ext = ".jpg";

// Si toutes les images sont dans le même répertoire et ont la même extension
// Le nom de chaque image à précharger, peu importe l'ordre
var liste_images = new Array('case_impression_1','case_impression_2','case_impression_3', 'case_design_1', 'case_design_2', 'case_design_3', 'case_design_4', 'case_design_5', 'case_design_6', 'case_design_7', 'case_demonstration_1', 'case_demonstration_2', 'case_demonstration_3', 'case_referencement_1', 'case_referencement_2', 'case_referencement_3', 'case_referencement_4', 'case_votre_equipe1', 'case_votre_equipe2', 'case_votre_equipe3', 'case_votre_equipe4', 'case_votre_equipe5', 'case_votre_equipe6', 'case_votre_equipe7', 'case_votre_equipe8', 'case_votre_equipe9');

// Si les images sont dans des répertoires différents ou ont des extensions différentes, indiquer dans le tableau précédent le chemin et l'extension de chaque image

// Un tableau qui permettra le stockage 'virtuel' des images pour les précharger
document.image_chargee = new Array();


// La fonction de préchargement
function prechargement() {

// Pour chaque image
for ( i = 0; i < liste_images.length; i++ ) {

// on créé virtuellement une image
document.image_chargee[i] = new Image;

// On en indique la source en assemblant le chemin, le nom et l'extension
document.image_chargee[i].src = chemin + liste_images[i] + ext;

//Si les images sont dans des répertoires différents ou ont des extensions différentes, ne pas mettre 'chemin + liste_images[i] + extension' mais uniquement les variables nécessaires
}
}

prechargement();
// Et le navigateur place dans son cache toutes les images !!

	
	
	
	
</script>

[/i][/i][/i][/i]