Pages :
Salut à Tous et à Toutes,
Je suis nouveau et j'espère trouver un réponse à mon blème, qui est le suivant :

J'ai un ti script qui récupère des images dans ma DB,
Puis au lieu de simplement les afficher dans un Div classique, avec ou pas une marquee,....
J'ai utilisé jquery pour faire un ti slide sympa.

Tout devrait etre "OK", mais voilà je pense que le overflow: hidden pose un big probleme:

Dans ce Slide, j'ai donc une suite de liens gérés dans des <li> un <ul>,
Les scripts qui vont bien, .... MAIS ! :

L'exemple que j'ai trouvé sur le net utilisai une suite de <li> pré définis,
Donc pas bon pour moi, j'ai donc intégré ce code à mon propre code <php>,
pour pouvoir utilisé une Variable dans l'adresse d'image de mes <li>, compris ?

je vous livre mes codes ,

[ 1 ] la base utilisée
[ 2 ] l'intégration dans mon code <php>


--------------------------------------------------------------------------------------


Nous avons donc ceci comme Base :::

http://img152.imageshack.us/img152/7387/20090413191331.jpg









[css]

/**************************************************************

	Image Menu
	v 2.2

**************************************************************/


#imageMenu {
	position: relative;
	width: 500px;
	height: 200px;
	overflow: hidden;
}



#imageMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 200px;
	width: 1000px;
	
	}

#imageMenu ul li {
	float: left;
}

#imageMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:98px;
	height: 200px;
}

#imageMenu ul li.landscapes a {
	background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/landscapes.jpg) repeat scroll 0%;
}

#imageMenu ul li.people a {
	background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/people.jpg) repeat scroll 0%;
}

#imageMenu ul li.nature a {
	background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/nature.jpg) repeat scroll 0%;
}

#imageMenu ul li.urban a {
	background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/urban.jpg) repeat scroll 0%;
}

#imageMenu ul li.abstract a {
	background: url(http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/abstract.jpg) repeat scroll 0%;
	width: 310px;
}

.clear {
	clear: both;
}

/*************************************************************/

[/css]



et le code html simplissime :




<link href="_common/css/imageMenuindex.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_common/js/mootools.js"></script> 
<script type="text/javascript" src="_common/js/imageMenu.js"></script> 

<div align="center" border="0" cellspacing="0" cellpadding="0">
<table width="1077" align="center" border="0" 
style="background-url: ('_common/images/bgmain.gif');" height="293" cellspacing="0" cellpadding="0">
<tr>
<td width="1077"  height="293"  align="center" border="0"  colspan="4" background="_common/images/MAINTABSRV5.gif">
<div align="center" border="0" cellspacing="0" cellpadding="0">
<div  width="60" height="212"  align="center" border="0">&nbsp;</div>
<table border="0" width="830" height="212">
<tr>
			<td height="206" width="860" rowspan="2" align="center" >
			<div id="container"> 
			<div id="example"> 
			<div id="imageMenu" style="width: 860px; height: 200px"> 
				<ul> 
				<li class="urban"><a href="multimedia.php">Urban</a></li> 	
				<li class="abstract"><a href="upload.php">Abstract</a></li>			
				<li class="landscapes"><a href="account.php">Landscapes</a></li> 
				<li class="people"><a href="mailbox.php">People</a></li> 
				<li class="nature"><a href="tools.php">Nature</a></li> 
				<li class="urban"><a href="multimedia.php">Urban</a></li> 
				<li class="abstract"><a href="upload.php">Abstract</a></li> 
				<li class="landscapes"><a href="account.php">Landscapes</a></li> 
				<li class="nature"><a href="tools.php">Nature</a></li> 
				<li class="people"><a href="mailbox.php">People</a></li> 
				</ul> 
			</div> 
			<script type="text/javascript"> 
				window.addEvent('domready', function(){
				var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
					});
			</script> 
			</div> 
			</div>			
			</td>
</tr>
<table>
</div>
</td>
</tr>
</table>
</div>







ça c'est donc " La Base " ........... Maintenant Voici le code adapté à mes besoins ::::



Voici Tout D'Abord mon code <php> DANS LEQUEL j'ai intégré les css,
Parce que ces css me posent problème,
Du fait de l'utilisation d'adresses d'images que je dirai " variables ",
puisque récupérées dans ma DB, par un if ... while ... if .... blablabla ....






<?php
require_once("backend/functions.php");
dbconn();


$site_config['LEFTNAV'] = false;
$site_config['RIGHTNAV'] = false;


loggedinonly();


stdhead("");


begin_frame("");
?>

<!--
<link href="http://www.alamandra-team-host.net/domaine/shortripv3/_common/css/imageMenu.css" rel="stylesheet" type="text/css"> 
-->
<script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/mootools.js"></script> 
<script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/imageMenu.js"></script> 

<style type="text/css" >


#imageMenu {

	position: relative;

	width: 500px;
	height: 200px;

}


#imageMenu ul {

	margin: 0px;
	display: block;
	height: 200px;
	width: 1000px;
	
	}

#imageMenu ul li {
	float: left;
}

#imageMenu ul li a {
	text-indent: -1000px;
	
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;



	width:98px;
	height: 200px;
}

#imageMenu ul li.all a { background: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]'
	repeat scroll 0%;
}


</style>



<div align="center" border="0" cellspacing="0" cellpadding="0">
<table width="1077" align="center" border="0" 
style="background-url: ('http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/bgmain.gif');" height="293" cellspacing="0" cellpadding="0">
<tr>
<td width="1077"  height="293"  align="center" border="0"  colspan="4" background="http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/MAINTABSRV5.gif">
<div align="center" border="0" cellspacing="0" cellpadding="0">
<div  width="60" height="212"  align="center" border="0">&nbsp;</div>
<table border="0" width="830" height="212">
<tr>
			<td height="206" width="860" rowspan="2" align="center" >
			
			<div id="container"> 
			<div id="example"> 
			<div id="imageMenu" style="width: 860px; height: 200px"> 
				<ul> 
				
<?				
		$news = mysql_query("SELECT id, name, added, image1, image2 FROM torrents WHERE banned = 'no' AND visible='yes'");			
				
if (mysql_num_rows($news) > 0) 			{



		while ($row2 = mysql_fetch_array($news, MYSQL_NUM)) 			{
			$tor = $row2['0'];
			$altname = $row2['1'];
			$date_time=get_date_time(time()-(3600*1280)); // the 24 is the hours you want listed change by whatever you want
			$orderby = "ORDER BY torrents.id DESC"; //Order

			$limit = "LIMIT 9"; //Limit

			$where = "WHERE banned = 'no' AND visible='yes' AND torrents.id='$tor'";

			$res = mysql_query("SELECT torrents.id, torrents.image1, torrents.image2, torrents.added, categories.name AS cat_name FROM torrents LEFT JOIN categories ON torrents.category = categories.id $where AND torrents.added >='$date_time' $orderby $limit");
			$row = mysql_fetch_array($res);
			$cat = $row['cat_name'];

			$img1 = "<a href='$site_config[SITEURL]/torrents-details.php?id=$row[id]'><img border='0' src='uploads/images/$row[image1]' alt=\"$altname / $cat\" width='160' align'center'></a>";

										if ($row["image1"] != "")						{
			
$imgslide = "<li style=\"list-style-image: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]')\"><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row[id]\"></a></li>";

	
										print("". $imgslide ."");
			

																						}

																		}
				
				
					}
					
?>
				</ul> 
			</div> 
			<script type="text/javascript"> 
				window.addEvent('domready', function(){
				var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
					});
			</script> 

			</div>			
			</div>	
			</td>


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

</div>
</td>

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






<?
end_frame();




stdfoot();
?>






---------------------------------------------------------------------------------------

J'ai bien sur cherché, trifouillé, décortiqué, mais no il semble que le overflow: hidden pose problèmes :


css en link ou intégré, idem ....

j'ai trouvé à rajouter systématiquement un position: relative; AVEC mes overflow: hidden;

ce qui devrait régler un problème de compatibilité avec IE, mais no ,



Le Javascript marche parfaitement,
Les h ref et les list-styles-background aussi, tout est Ok,

A PART QUE L ON NE VOIT AUCUNE IMAGE , LOL Smiley smile Smiley smile Smiley smile


Voci une tite image :

http://img152.imageshack.us/img152/3362/20090413192751.jpg



Voilà , si un boss du code pass par là et m'aide à résoudre ce cruel probleme,
Ben c Tip Top , quoi Smiley smile
Modifié par alamandra (21 Apr 2009 - 15:31)
Quelques précisions supplémentaires ::


J'ai aussi tenté de balancer une variable dans mon CSS,

en utilisant une piste qui semblait très intérressante et trouvée ICI

un ti .htaccess, la variable $img défini suivant l'exemple, meuuuu no senior, ça marche po ... Smiley smile
ESSAI ULTIME !!!!!!

La Méthode dont je parlai, passer les css en php, ... le .htaccess ....
Bref ! la Définition d'une variable DANS LE CSS à l'air de fonctionner, ou bien un truc m'échappe,

Enfin, les images sont pas formatées, mais AFFICHEES !

Voici mon dernier code ::::::::::



<?php
require_once("backend/functions.php");
dbconn();


$site_config['LEFTNAV'] = false;
$site_config['RIGHTNAV'] = false;


loggedinonly();


stdhead("");


begin_frame("");




$fondimage = 'http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]';
?>


<link href="http://www.alamandra-team-host.net/domaine/shortripv3/_common/css/imageMenu.css" rel="stylesheet" type="text/css"> 

<script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/mootools.js"></script> 
<script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/imageMenu.js"></script> 
<!--
<style type="text/css" >


#imageMenu {

	position: relative;

	width: 500px;
	height: 200px;

}


#imageMenu ul {

	margin: 0px;
	display: block;
	height: 200px;
	width: 1000px;
	
	}

#imageMenu ul li {
	float: left;
}

#imageMenu ul li a {
	text-indent: -1000px;
	
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;



	width:98px;
	height: 200px;
}

#imageMenu ul li.all a { background: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]'
	repeat scroll 0%;
}


</style>
-->


<div align="center" border="0" cellspacing="0" cellpadding="0">
<table width="1077" align="center" border="0" 
style="background-url: ('http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/bgmain.gif');" height="293" cellspacing="0" cellpadding="0">
<tr>
<td width="1077"  height="293"  align="center" border="0"  colspan="4" background="http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/MAINTABSRV5.gif">
<div align="center" border="0" cellspacing="0" cellpadding="0">
<div  width="60" height="212"  align="center" border="0">&nbsp;</div>
<table border="0" width="830" height="212">
<tr>
			<td height="206" width="860" rowspan="2" align="center" >
			
			<div id="container"> 
			<div id="example"> 
			<div id="imageMenu" style="width: 860px; height: 200px"> 
				<ul> 
				
<?				
		$news = mysql_query("SELECT id, name, added, image1, image2 FROM torrents WHERE banned = 'no' AND visible='yes'");			
				
if (mysql_num_rows($news) > 0) 			{



		while ($row2 = mysql_fetch_array($news, MYSQL_NUM)) 			{
			$tor = $row2['0'];
			$altname = $row2['1'];
			$date_time=get_date_time(time()-(3600*1280)); // the 24 is the hours you want listed change by whatever you want
			$orderby = "ORDER BY torrents.id DESC"; //Order

			$limit = "LIMIT 9"; //Limit

			$where = "WHERE banned = 'no' AND visible='yes' AND torrents.id='$tor'";

			$res = mysql_query("SELECT torrents.id, torrents.image1, torrents.image2, torrents.added, categories.name AS cat_name FROM torrents LEFT JOIN categories ON torrents.category = categories.id $where AND torrents.added >='$date_time' $orderby $limit");
			$row = mysql_fetch_array($res);
			$cat = $row['cat_name'];

			$img1 = "<a href='$site_config[SITEURL]/torrents-details.php?id=$row[id]'><img border='0' src='uploads/images/$row[image1]' alt=\"$altname / $cat\" width='160' align'center'></a>";

										if ($row["image1"] != "")						{
			
$fondimage = 'http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]';

$imgslide = "<li class=\"all\" style=\"list-style-image: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]')\"><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row[id]\"></a></li>";

	
										print("". $imgslide ."");
			

																						}

																		}
				
				
					}
					
?>
				</ul> 
			</div> 
			<script type="text/javascript"> 
				window.addEvent('domready', function(){
				var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
					});
			</script> 

			</div>			
			</div>	
			</td>


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

</div>
</td>

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






<?
end_frame();




stdfoot();
?>




ET le CSS :::





#imageMenu {
	position: relative;
	width: 500px;
	height: 200px;
	overflow: hidden;
}



#imageMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 200px;
	width: 1000px;
	
	}

#imageMenu ul li {
	float: left;
}

#imageMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:98px;
	height: 200px;
}


#imageMenu ul li.all a { 

	background: url('fondimage')
	repeat scroll 0%;
}


.clear {
	clear: both;
}

/*************************************************************/




ET le .htaccess ::::





AddType application/x-httpd-php .css

php_value auto_prepend_file /_common/css/imageMenu.css





.......... Je continu à creuser peut etre le path dans le .htaccess devrait etre absolu ....
Bon Confirmation....ça marche de passer une variable dans un css, apparemment ....

Mais le résultat est à la hauteur du bon vouloir des navigateurs,

Ci dessous 3 exemples, et 3 résultats différents avec IE, FF, et GC ::::


AVEC IE :::
http://img2.imageshack.us/img2/8375/rresultatie.gif


AVEC FF :::
http://img2.imageshack.us/img2/4909/rsultatfirefox.gif


AVEC GC :::
http://img259.imageshack.us/img259/3756/resultatgooglechrome.gif
Modifié par alamandra (13 Apr 2009 - 20:43)
ALLEZ ENCORE UNE DERNIERE INFO :::::


J'obtiens la meme interpretation du code

Par les 3 navigateurs !

J'ai viré l'appell au CSS et placé direct les css dans mon code php directement,

DONC :*

... Plus de .CSS ET Voici le dernier code qui donne le meme résultat,

EXACTEMENT avec les 3 navigateurs IE FF GC :::::::::




<?php
require_once("backend/functions.php");
dbconn();


$site_config['LEFTNAV'] = false;
$site_config['RIGHTNAV'] = false;


loggedinonly();


stdhead("");


begin_frame("");




$fondimage = 'http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]';
?>

<!--
<link href="http://www.alamandra-team-host.net/domaine/shortripv3/_common/css/imageMenu.css" rel="stylesheet" type="text/css"> 
-->
<script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/mootools.js"></script> 
<script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/imageMenu.js"></script> 



<style type="text/css" >


#imageMenu {

	position: relative;
	overflow: hidden;
	width: 500px;
	height: 200px;

}


#imageMenu ul {

	margin: 0px;
	display: block;
	height: 200px;
	width: 1000px;
	
	}

#imageMenu ul li {
	float: left;
}

#imageMenu ul li a {
	text-indent: -1000px;
	
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;



	width:98px;
	height: 200px;
}

#imageMenu ul li.all a { background: url('fondimage')
	repeat scroll 0%;
}


</style>



<div align="center" border="0" cellspacing="0" cellpadding="0">
<table width="1077" align="center" border="0" 
style="background-url: ('http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/bgmain.gif');" height="293" cellspacing="0" cellpadding="0">
<tr>
<td width="1077"  height="293"  align="center" border="0"  colspan="4" background="http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/MAINTABSRV5.gif">
<div align="center" border="0" cellspacing="0" cellpadding="0">
<div  width="60" height="212"  align="center" border="0">&nbsp;</div>
<table border="0" width="830" height="212">
<tr>
			<td height="206" width="860" rowspan="2" align="center" >
			
			<div id="container"> 
			<div id="example"> 
			<div id="imageMenu" style="width: 860px; height: 200px"> 
				<ul> 
				
<?				
		$news = mysql_query("SELECT id, name, added, image1, image2 FROM torrents WHERE banned = 'no' AND visible='yes'");			
				
if (mysql_num_rows($news) > 0) 			{



		while ($row2 = mysql_fetch_array($news, MYSQL_NUM)) 			{
			$tor = $row2['0'];
			$altname = $row2['1'];
			$date_time=get_date_time(time()-(3600*1280)); // the 24 is the hours you want listed change by whatever you want
			$orderby = "ORDER BY torrents.id DESC"; //Order

			$limit = "LIMIT 9"; //Limit

			$where = "WHERE banned = 'no' AND visible='yes' AND torrents.id='$tor'";

			$res = mysql_query("SELECT torrents.id, torrents.image1, torrents.image2, torrents.added, categories.name AS cat_name FROM torrents LEFT JOIN categories ON torrents.category = categories.id $where AND torrents.added >='$date_time' $orderby $limit");
			$row = mysql_fetch_array($res);
			$cat = $row['cat_name'];

			$img1 = "<a href='$site_config[SITEURL]/torrents-details.php?id=$row[id]'><img border='0' src='uploads/images/$row[image1]' alt=\"$altname / $cat\" width='160' align'center'></a>";

										if ($row["image1"] != "")						{
			
$fondimage = 'http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]';

$imgslide = "<li class=\"all\" style=\"list-style-image: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]')\"><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row[id]\"></a></li>";

	
										print("". $imgslide ."");
			

																						}

																		}
				
				
					}
					
?>
				</ul> 
			</div> 
			<script type="text/javascript"> 
				window.addEvent('domready', function(){
				var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
					});
			</script> 

			</div>			
			</div>	
			</td>


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

</div>
</td>

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






<?
end_frame();




stdfoot();
?>




RESULTAT IDENTIQUE pour les 3 navigateurs,

LE JAVASCRIPT fonctionne ...... MAIS ! ...... TOUJOURS PO D'IMAGES EN VUE ..... Sniffff




http://img216.imageshack.us/img216/8805/resultatidentique.gif
Allez une toute derniere ET BASTA, j'attends votre Aide, SVP ....

J'ai reussi a faire APPARAITRE 1 IMAGE !!!

Hehe.........bon OK, c de la triche j'ai juste ajpute une balise <img>.........ET j'ai rajoute les dimensions de l'image en Live ....



$imgslide = "<li class=\"all\" style=\"list-style-image: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]')\" width=\"320\" height=\"200\">><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row[id]\">
<img src=\"http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]\" width=\"320\" height=\"200\"></a></li>";





http://img245.imageshack.us/img245/4412/resultat1image.gif
Modifié par alamandra (13 Apr 2009 - 21:34)
Houps !! j' ais passé du temps mais rien trouvé de bien sérieux ...
ce qui est curieux, est que certains objets sont bien en ligne mais pas tous,
moi j'aurais préféré aller fouiner moi-même Smiley eek

Par contre des chargement de variables de ce type


	$img1 = "<a href='$site_config[SITEURL]/torrents-details.php?
id=$row  '><img border='0' src='uploads/images/$row  ' alt=\"$altname / 
$cat\" width='160' align'center'></a>";


je préféres

$img1 = "<a href='".$site_config[SITEURL]."/torrents-details.php?
id=".$row."  '>
<img border='0' src='uploads/images/".$row."  ' 
alt=\"".$altname." / ".$cat."\" width='160' align'center'></a>";




mais bon c' est au cas ou pour le reste je verrais ça demain, heu... vu l'heure vers midi Smiley murf

Mais essais de nous mettre le tout en ligne dans un répertoire bidon, et mets nous un lien !
Modifié par FoxLeRenard (14 Apr 2009 - 04:43)
yessssssss merci d'avoir pris du temps pour t epencher sur ce bleme plutot difficile à bien ficeler !
je vais de ce pas preparer un extrait de page sur mon root, " hors " mes htaccess, lol ... a plus tard ...
au Fait !!!! j'ai encore progréssé !
la premiere serie de <li> d 'images definis avec du overflow hidden en 98px par 200 px,
representant la pârtie gauche de chaque image qui est comme l'onglet sur lequel passer la souris et qui declenche l ouverture du slide contenant l autre serie d image , en <li> et definies dans la css,
ET BIEN , j'ai l'affichage de cette premiere serie de <li> " tronquee " !
mais les <li> " slides " sont vides .... mais on progresse ... le code c est des fois l illumination
instantanee ou bien .... un peu de galere .... oufff oufff
*****************
EDIT :::: OUI ! en effet, demander la valeur de ".$toto." est preferable, oups un code mal controle, desole ....
EDIT 02 ::: voici une page de test visible sans logger :::::
>>>>> http://www.alamandra-team-host.net/domaine/shortripv3/aaatest.php <<<<<
http://img13.imageshack.us/img13/2819/resultatporgression4ima.jpg
le premier slide <li> a 98px X 200px est bien présent " il est defini direct dans le code php, j'ai repris les attributs css des 2 types d'elements principaux
LE second <li> qui lui est a 500px X 200px fonctionne MAIS on ne vois que la bgcolor,
#FFFFFF, pas la version de l image entierre
Le Javascript lui fait sa job.
----------------------------------------------------------------------------------------
----------------------------------------------------------
| Voici les attributs css recuperes pour la <li> :::: |
----------------------------------------------------------------------------------------
$fondimage = '\"http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row Smiley image1 \" width=\"500\" height=\"200\"';

$imgslide = "<li style=\"background: url('$fondimage'); position: relative; width:98px; height: 200px; text-indent: -1000px; border-right: 2px solid #fff; cursor:pointer; display: block;\"><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row Smiley id \"><img src=\"$fondimage\"></a></li>";

print("". $imgslide ."");
----------------------------------------------------------------------------------------
*************
----------------------------------------------------
| Voici les attributs css recuperes pour <ul> |
--------------------------------------------------------------------------------------
<ul id="imageMenu" style="margin: 0px; display: block; height: 200px; width: 1000px">
--------------------------------------------------------------------------------------


si j'ai cerne le comportement de java et des css,
il y a un lezard avec les 2 slide a generer pour chaque image

ET LES 2 METHODES GENIALES POUR INTEGRE une var a un css...(cf liens plus bas)
Sont Soit foireuses, SOIT c moi qui deraille...


LIEN vers exemple Integration var a css ::::
.1..1.

premiere <li>
------------------
| l'un est |
---------------------------------------------------
[b]#imageMenu ul li.all a { background: url($fondimage)
repeat scroll 0%;
}

--------------------------------------------------
2ieme <li>
------------------
| l'autre est |
------------------------
#imageMenu {

position: relative;
overflow: hidden;
width: 500px;
height: 200px;

}

------------------------
ya surement un truc qui me depasse , Smiley ravi Smiley ravi Smiley eek
J'ai donc VIRE l appell au fichier CSS en dernier lieu ...... [/b]
Modifié par alamandra (14 Apr 2009 - 06:06)
Ok je suis dessus mais il me manques des éléments, au moins un important,
toi tu as tout sous la main, alors trouves moi ce qui bloque tout tes javascript,

opéres en mettant tout dans un répertoire, (les PHP HTML CSS et JS) et recherche les élémeents contenant "doThing"

moi j'en ais pas ?? Smiley eek
C' est un peut du bricolage, il me manque un élément qui parait lui aussi trés imprtant
"$fondimage"

J'ais complétement isolé les LI mais je n'ais pas assez d'éléments pour voir ce que tu as bricolé, j'ais donc un hTML de 150 lignes ... mais quelle galére !

Tu as mis dans ton message d'origine, un exemple écran qui t'a servi de base,
as tu un lien ou il est ?? ça m'aiderait beaucoup Smiley confused
Modifié par FoxLeRenard (14 Apr 2009 - 14:56)
Salut,
Pour moi ça marche 100% il te suffit de l'adapter en ne "bidouillant" pas les deux javascript Copyright (c) 2006 Valerio Proietti


<html>
<script type="text/javascript" src="js/mootools.js"></script> 
<script type="text/javascript" src="js/imageMenu.js"></script> 
<BODY bgColor=#606070 scroll=no >
<style>
#imageMenu {	position: relative;	width: 500px;	height: 200px;
	overflow: hidden;}
#imageMenu ul {	list-style: none;	margin: 0px;	display: block;
 height: 200px; width: 1000px;	}
#imageMenu ul li {	float: left;}
#imageMenu ul li a {	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;	cursor:pointer;
	display:block;	overflow:hidden;	width:98px;	height: 200px;}
#imageMenu ul li.landscapes a {
 background: url(images/landscapes.jpg) repeat scroll 0%;}
#imageMenu ul li.people a {
 background: url(images/people.jpg) repeat scroll 0%;}
#imageMenu ul li.nature a {
 background: url(images/nature.jpg) repeat scroll 0%;}
#imageMenu ul li.urban a {
 background: url(images/urban.jpg) repeat scroll 0%;}
#imageMenu ul li.abstract a {
 background: url(images/abstract.jpg) repeat scroll 0%; width: 310px;}
.clear {	clear: both;}
</style>
<div align="center" border="0" cellspacing="0" cellpadding="0">
<table width="1077" align="center" border="0" 
style="background-url: ('_common/images/bgmain.gif');" height="293" cellspacing="0" cellpadding="0">
<tr>
<td width="1077"  height="293"  align="center" border="0"  colspan="4" >
<div align="center" border="0" cellspacing="0" cellpadding="0">
<div  width="60" height="212"  align="center" border="0">&nbsp;</div>
<table border="0" width="830" height="212">
<tr>
<td height="206" width="860" rowspan="2" align="center" >
<div id="container"> 
<div id="example"> 
<div id="imageMenu" style="width: 860px; height: 200px"> 
<ul> 
<li class="urban"><a href="multimedia.php">Urban</a></li> 	
<li class="abstract"><a href="upload.php">Abstract</a></li>		
<li class="landscapes"><a href="account.php">Landscapes</a></li> 
<li class="people"><a href="mailbox.php">People</a></li> 
<li class="nature"><a href="tools.php">Nature</a></li> 
<li class="urban"><a href="multimedia.php">Urban</a></li> 
<li class="abstract"><a href="upload.php">Abstract</a></li> 
<li class="landscapes"><a href="account.php">Landscapes</a></li> 
<li class="nature"><a href="tools.php">Nature</a></li> 
<li class="people"><a href="mailbox.php">People</a></li> 
</ul> 
</div> 
<script type="text/javascript"> 
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});});
</script> 
</div></div></td></tr><table></div></td></tr></table></div>
</body></html>

Modifié par FoxLeRenard (14 Apr 2009 - 16:07)
Salut a toi l'ami Smiley smile

Voici d'ou vient " ma base " ::: http://www.phatfusion.net/imagemenu/

En effet, avec des images pre definis ça marche tres bien,
Tout se complique lorsque l'on veut utiliser des images recuperees dans une DB, donc avec un var,
car il y a une definition de <li> dans le css, qui demande un background url qui est fixe,
Et moi j'ai besoin d'un <li> qui change a chaque nouvelle image recherchee et affichee

c'est pour cela que je cherchai a utiliser une var dans le css, $fondimage
$fondimage etant defini dans mon header, au debut de mon bout de code


$fondimage = '\"http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row  \" width=\"500\" height=\"200\"';



$fondimage etant re defini a chaque tour de boucle, puisqu'il correspond a chaque nouvelle image recherchee, trouvee et affichee


je viens de t'envoyer le code de la page de test + la page de reference du code de base
sur laquelle tu peux recuperer motools.js + le pack imagemenu.zip



le body onload="doThing()" fait reference à un petit script qui produit des effets neon sur du texte, il est utilise par ma page index ! c'est pour cela que tu n'as trouve aucune reference dans ma page de test

les autres scripts :::
-----------------------


dropdown.js correspond a mon menu deroulant

theme.css est utilise pour mon theme general

java_klappe.js un ti script pour des ouverture fermeture de boites

scripts.js correspond a des functions que j'utilise pour mon panel de bbcode
ma previsualisation, ......

overlib.js est utilise pour quelques onmouseover
lytebox.js + lytebox.css est une version allegee et sans conflict de lightbox


rollovers.js
highlight_functions.js ces 2 là sont appelles ponctuellement
pour des tites functions sur texte




imageMenu.js + motools.js + imageMenu.css sont les 3 derniers implantes
et correspondent à mon probleme actuel pour ce bloc de slide d'images


A ma connaissance il n'y a pas de conflits entre les js

je t'envoi copie de ce message sur ton email aussi.


je t'envoi un, 2ieme email avec les fichiers de base plus ma page de test + mon header

RIEN n'est utile pour ce probleme dans les 3/4 de mon header,
Ne pers pas ton temps avec tous ces div, et tables et tds imbriques,
Ce n'est que la definition de mon theme



la seule partie a voir est tout à la fin de mon header

le meme code de ma page de test est INTEGRE a mon header

PUISQUE cette page de test, n'est QU UN DECOUPAGE de cette partie de mon header
Decoupage effectue pour poster sur ce Forum


MERCI MERCI MERCI INFINIMENT en tout cas d'avoir passe du temps pour m'aider !

C genial,


Mais bien sur le code de base encore une fois,
Fonctionne avec des images pre definies,

Mais c est une autre " galere " dans mon cas, donc, avec des images issues d'une DB

et affichees par une boucle


A+ ::) Smiley smile Smiley smile
salut a toi patidou !

ben cette mise en page avec des tableaux vient de mon exemple de base

ICI :::: http://www.phatfusion.net/imagemenu/


Pi mon theme general, utilise aussi un max de tableau et cells en tout genre

le css c'est extraordinaire, c sur, mais une galere lorsqu il s'agit de coder tout un theme en css

Enfin pour " un petit bricoleur genial, mais bricoleur...." Smiley smile Smiley smile Smiley smile
Patidou a écrit :
C'est quoi cette mise-en-page avec des tableaux? Beurk! Smiley cligne



Bonjour l'Ami,
j'aprécis toujours tes interventions, mais il faut resté clair sur certains points, beaucoup ici, défendent cette théorie, et dans mes pages a moi tu ne trouvera pas beaucoup de TABLE et de GIF transparents, mais quelques-un quand cela me parait justifié !

Par contre l'exemple que l'on traite actuelement est un module utilisé partout, et que je trouve NUL !! car hyper tordu, imbriquant des DIV et TABLE a outrance,

Mais quand je lis tout le lien que tu poste ici, je trouve comme exemple sité comme model du genre une page avec 40 DIV imbriqués et un trentaine de LI UL etc... bref on se croirait dans les méandres des TABLE Smiley eek
Modifié par FoxLeRenard (14 Apr 2009 - 17:43)
Modérateur
Bonjour,

Juste en passant, plusieurs versions jquérifiées du menu de Phatfusion sont disponibles sur la toile, et parfois le code s'en trouve amélioré...
Ici par exemple Smiley smile

Si ça peut faire avancer le bidule... Smiley cligne

Cdt,
Sylvain
ça a l'air sympa comme modif, MAIS !
cela ne resoud toujours rien , tous ces exemples utilisent des images deja predefinis,
PAS des images issues d'une DB , et donc, par essence, possiblement differentes a chaque fois
ME fais je bien comprendre ? ouffff ouffff
le background url('toto.jpg') et toto1.jpg et toto2.jpg c est tres bien tout ça mais PAS Pour moi,
moi je veux utiliser $row Smiley image1 a la place de toto et toto1 et toto2......
comment utiliser cette variable dans le css ?
J'ai tyrouve et teste differentes methodes, par un htacess et un rewrite engine ....

Mais no, css et son super power , pour l'instant ne m'autorise pas a utiliser une var....

Snifff, Snifff, allez vais me foutre à la riviere, ma vie est foutu .... hihihihihihi .....
alamandra a écrit :
harrrghhhh le forum " reecrit mon instruction

$row(image1) remplacer les ( par des [


Tu as reçu mon mail ?
j'ais besoins du même mais en ZIP, j'suis alergique au RAR Smiley confused
A++
Voilà pourquoi dasn mon dernier exemple,
j'ai carrement vire l'appell au fichier .css
j'ai tente d'integrer les definitions des <li> direct dans le code html et php

$fondimage = 'http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row Smiley image1 ';



$imgslide = "<li><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row Smiley id \"><li class=\"all\" style=\"background: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row Smiley image1 ') repeat scroll 0%; overflow: hidden; position: relative; width:98px; height: 200px; text-indent: -1000px; border-right: 2px solid #fff; cursor:pointer; display: block;\"></li></a></li>";


la premiere serie de <li> c ok ça marche
c est la serie en 98 x 200

et qui doit se cacher pour afficher la deuxieme serie de <li> en 500 x 200
Pages :