...Mon niveau en javascript étant proche du néant...
Donc si c'est le cas suis les liens de
telnes (d'ailleurs il doit y avoir d'autres modules javascript pour jquery)
Sinon tu peux tester le code ci-dessous qui fait à peu près ce que tu demandes à partir d'un tableau php :
<?php
header('Content-type: text/html; charset=UTF-8');
$tab_news[0]['text'] = 'Avatar AB';
$tab_news[0]['image'] = 'http://www.laquadrature.net/wiki/images/4/48/Quadrature_black-out_HADOPI_50x50px_fixed_texte.png';
$tab_news[1]['text'] = 'Avatar Stopher';
$tab_news[1]['image'] = 'http://lindev.fr/public/images/bt-agents-color.jpg';
$tab_news[2]['text'] = 'Avatar Albat';
$tab_news[2]['image'] = 'http://albat.fr.free.fr/phpfrance/coccinelle_v3.png';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function Message(tab,id_message,id_photo)
{
var id_mes = document.getElementById(id_message);
var id_pho = document.getElementById(id_photo);
var tab_news_js = tab;
// nombre d'éléments du tableau
var nb_tab_news_js = tab_news_js.length;
// Si les éléments cibles existent et le tableau a plus d'un élément
if (id_mes && id_pho && nb_tab_news_js > 1)
{
var Img_preload_src = new Array();
// préchargement des images
for (var i=0; i < nb_tab_news_js; i++)
{
if (typeof tab_news_js[i]['image'] != 'undefined')
{
Img_preload_src[tab_news_js[i]['image']] = new Image();
Img_preload_src[tab_news_js[i]['image']].src = tab_news_js[i]['image'];
}
}
function Boucle(inc)
{
//je défini l'indice en fonction de la position dans le tableau
var inc = inc < nb_tab_news_js ? inc : 0;
// Je nettoie l'élément cible du texte
var noeuds = id_mes.childNodes.length;
for (var i = 0; i < noeuds; i++)
{
id_mes.removeChild(id_mes.firstChild);
}
// Je prend l'adresse de la photo enregistrée dans le tableau; il faudrait remplacer adresse_image_vide.jpg par l'adresse d'une image transparente (au cas ou l'image ne serait pas renseignée dans le tableau php)
var image = typeof tab_news_js[inc]['image'] != 'undefined' ? tab_news_js[inc]['image'] : 'adresse_image_vide.jpg' ;
// Je cherche le texte enregistré dans le tableau
var texte = typeof tab_news_js[inc]['text'] != 'undefined' ? tab_news_js[inc]['text'] : '';
// je crée un noeud texte avec le texte récupéré
texte = document.createTextNode(texte);
// J'insère la photo dans l'élément cible
id_pho.src = image;
// J'insère le noeud texte dans l'élément cible
id_mes.appendChild(texte);
//j'incrémente
inc++;
//J'appelle la fonction Boucle toutes les quatre secondes
setTimeout(function(){Boucle(inc)},'4000');
}
Boucle(0);
}
}
// Fonction de chargement onload
function AddLoad_JS(func) {
if (window.addEventListener)
{
window.addEventListener("load", func, false);
}
else if (document.addEventListener)
{
document.addEventListener("load", func, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", func);
}
}
// Chargement onload de la fonction Message avec ses paramètres tab_news, id news_texte, et id news_photo
AddLoad_JS(function(){Message(<?php echo (isset($tab_news) && is_array($tab_news))? json_encode($tab_news) : 'new Array' ?>, 'news_texte', 'news_photo')});
</script>
<style type="text/css">
.conteneur td {
width : 200px;
}
.conteneur {
height : 100px;
width : 400px;
border : 3px solid black;
}
</style>
</head>
<body>
<table class = "conteneur">
<tr>
<td id = "news_texte">
<?php if (isset($tab_news[0]['text'])) echo $tab_news[0]['text'];?>
</td>
<td>
<img id = "news_photo" src="<?php if (isset($tab_news[0]['image'])) echo $tab_news[0]['image']; else echo 'adresse_image_vide.jpg'?>" />
</td>
</tr>
</table>
</body>
</html>
Par contre il n'y a pas de boutons pour la navigation manuelle et j'ai pas le temps de les intégrer pour l'instant.
[quote="babyboy6492"]...Mon niveau en javascript étant proche du néant...[/quote]
Donc si c'est le cas suis les liens de [b]telnes[/b] (d'ailleurs il doit y avoir d'autres modules javascript pour jquery)
Sinon tu peux tester le code ci-dessous qui fait à peu près ce que tu demandes à partir d'un tableau php :
[php]<?php
header('Content-type: text/html; charset=UTF-8');
$tab_news[0]['text'] = 'Avatar AB';
$tab_news[0]['image'] = 'http://www.laquadrature.net/wiki/images/4/48/Quadrature_black-out_HADOPI_50x50px_fixed_texte.png';
$tab_news[1]['text'] = 'Avatar Stopher';
$tab_news[1]['image'] = 'http://lindev.fr/public/images/bt-agents-color.jpg';
$tab_news[2]['text'] = 'Avatar Albat';
$tab_news[2]['image'] = 'http://albat.fr.free.fr/phpfrance/coccinelle_v3.png';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function Message(tab,id_message,id_photo)
{
var id_mes = document.getElementById(id_message);
var id_pho = document.getElementById(id_photo);
var tab_news_js = tab;
// nombre d'éléments du tableau
var nb_tab_news_js = tab_news_js.length;
// Si les éléments cibles existent et le tableau a plus d'un élément
if (id_mes && id_pho && nb_tab_news_js > 1)
{
var Img_preload_src = new Array();
// préchargement des images
for (var i=0; i < nb_tab_news_js; i++)
{
if (typeof tab_news_js[i]['image'] != 'undefined')
{
Img_preload_src[tab_news_js[i]['image']] = new Image();
Img_preload_src[tab_news_js[i]['image']].src = tab_news_js[i]['image'];
}
}
function Boucle(inc)
{
//je défini l'indice en fonction de la position dans le tableau
var inc = inc < nb_tab_news_js ? inc : 0;
// Je nettoie l'élément cible du texte
var noeuds = id_mes.childNodes.length;
for (var i = 0; i < noeuds; i++)
{
id_mes.removeChild(id_mes.firstChild);
}
// Je prend l'adresse de la photo enregistrée dans le tableau; il faudrait remplacer adresse_image_vide.jpg par l'adresse d'une image transparente (au cas ou l'image ne serait pas renseignée dans le tableau php)
var image = typeof tab_news_js[inc]['image'] != 'undefined' ? tab_news_js[inc]['image'] : 'adresse_image_vide.jpg' ;
// Je cherche le texte enregistré dans le tableau
var texte = typeof tab_news_js[inc]['text'] != 'undefined' ? tab_news_js[inc]['text'] : '';
// je crée un noeud texte avec le texte récupéré
texte = document.createTextNode(texte);
// J'insère la photo dans l'élément cible
id_pho.src = image;
// J'insère le noeud texte dans l'élément cible
id_mes.appendChild(texte);
//j'incrémente
inc++;
//J'appelle la fonction Boucle toutes les quatre secondes
setTimeout(function(){Boucle(inc)},'4000');
}
Boucle(0);
}
}
// Fonction de chargement onload
function AddLoad_JS(func) {
if (window.addEventListener)
{
window.addEventListener("load", func, false);
}
else if (document.addEventListener)
{
document.addEventListener("load", func, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", func);
}
}
// Chargement onload de la fonction Message avec ses paramètres tab_news, id news_texte, et id news_photo
AddLoad_JS(function(){Message(<?php echo (isset($tab_news) && is_array($tab_news))? json_encode($tab_news) : 'new Array' ?>, 'news_texte', 'news_photo')});
</script>
<style type="text/css">
.conteneur td {
width : 200px;
}
.conteneur {
height : 100px;
width : 400px;
border : 3px solid black;
}
</style>
</head>
<body>
<table class = "conteneur">
<tr>
<td id = "news_texte">
<?php if (isset($tab_news[0]['text'])) echo $tab_news[0]['text'];?>
</td>
<td>
<img id = "news_photo" src="<?php if (isset($tab_news[0]['image'])) echo $tab_news[0]['image']; else echo 'adresse_image_vide.jpg'?>" />
</td>
</tr>
</table>
</body>
</html>[/php]
Par contre il n'y a pas de boutons pour la navigation manuelle et j'ai pas le temps de les intégrer pour l'instant.
