Systeme de news

5 août 2009 à 18:44:40

Bonsoir, je travail sur un projet de site web et on m'a demandé quelque chose que je ne sait pas faire.
J'ai fait un schéma pour illustrer le problème :
Image utilisateur

Donc voila, j'aimerais qu'au survol des news de droites (#news1, #news2, etc...), l'image de la news s'affiche en grand dans la div #newsimg et que le texte correspondant a la news s'affiche dans la div #newstext.

Le problème etant que je n'ai pas excessivement de temps pour le faire et je ne sais pas si le javascript suffit ou si il faut utiliser aussi de l'Ajax.

Voila, j'espère que vous pourrez m'aiguiller.

Merci d'avance

Abraxasz

5 août 2009 à 19:02:38

Alors il y a un moyen pour le faire juste avec du Javascript, a condition que tes News ne soient pas vraiment des News...

Je m'explique, l'idée c'est de créer un système de "layers" grâce a la propriété CSS "z-index". Donc tu écris tes News sur différents layers ( en pratique un layer c'est un div.. ) de mêmes dimensions, et tu les positionnes ( position : absolute ) tous au même endroit mais avec des z-index différents.

Ensuite, tu créer un fonction movetop(news) qui modifiera le z-index du layer de la news concernée pour la mettre en tete...

Quelques remarques :
- dans certains langages ( XUL notamment ) il existe des objets appelés Decks ou Stacks qui implémentent ce système... Vérifie qu'il n'existe rien de similaire...

- euh ma methode fonctionne ( je l'ai testee ) mais elle n'est pas
elegante du tout ( c'est vraiment du bricolage ). De plus, cela
t'oblige a ecrire tes News dans
ta page principale au lieu de le faire des pages differentes...
donc prefere AJAX

Avrel07

5 août 2009 à 19:23:47

ok merci beaucoup, et donc au niveau d'Ajax il faut que je cherche de quel coté ?
Parce que j'ai vraiment pas le temps de me faire le tuto maintenant, c'est prévu mais une fois que j'aurais terminé mon projet.
Donc si tu pouvais juste me dire quoi utiliser, apres je me debrouille pour l'adapter a ma page

Merci

TrexXx

5 août 2009 à 19:31:05

Tiens voici ce que j'ai fait, par contre je code avec Prototype donc si y a des trucs pas clairs, demande moi, ou sinon si tu veux juste utiliser le script utilise aussi Prototype

index.php

<?php
    $pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');
    $query_news = $pdo->prepare('select * from news');
    $query_mini_news = $pdo->prepare('select * from news');
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Titre que je veux !</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
        <div id="news">
            <?php
                $query_news->execute();

                $resultat = $query_news->fetch();

                echo '<img src="' . $resultat['image'] . '" />';
                echo '<h1>' . $resultat['titre'] . '</h1>';
                echo '<p>' . $resultat['texte'] . '</p>';
           ?>
        </div>

        <div id="mini_news">
            <?php
                $query_mini_news->execute();

                while ($resultat = $query_mini_news->fetch())
                {
                    echo '<p id="' . $resultat['id'] . '"><img src="' . $resultat['image'] . '" /> <br />';
                    echo $resultat['titre'] . '</p>';
                }
            ?>
        </div>
    </body>
</html>

ajax.js

Event.observe(window, 'load', initEvent);

function initEvent()
{
    ajouterEvenementMiniNews();
}

function ajouterEvenementMiniNews()
{
    var node = $('mini_news').firstChild;

    while (node != null) {
        Event.observe(node, 'mouseover', mini_newsMouseover);

        node = node.nextSibling;
    }
}

function mini_newsMouseover(e)
{
    var element = Event.element(e);

    if (element.tagName == 'IMG') {
        element = element.parentNode;
    }

    var id = element.id;

    new Ajax.Request('ajax.php', {
        postBody: $H({id: id}).toQueryString(),
        
        onComplete: function(transport) {
            var reponse = eval(transport.responseText);

            changerNews(reponse);
        }
    });
}

function changerNews(reponse)
{
    var noeud = $('news').firstChild;

    while (noeud != null) {
        if (noeud.tagName == 'IMG') {
            noeud.src = reponse.image;
        }
        else if (noeud.tagName == 'H1') {
            noeud.firstChild.nodeValue = reponse.titre;
        }
        else if (noeud.tagName == 'P') {
            noeud.firstChild.nodeValue = reponse.texte;
        }

        noeud = noeud.nextSibling;
    }
}

ajax.php

<?php
    header('Content-type: application/x-json');

    $pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');
    $query = $pdo->prepare('select * from news where id=:id');

    if (isset($_POST['id']))
    {
        $id = htmlentities($_POST['id']);

        $query->execute(array(':id' => $id));

        $resultat = $query->fetch();

        echo '({"image": "' . $resultat['image'] . '", "titre": "' . $resultat['titre'] . '", "texte": "' . $resultat['texte'] . '"})';
    }
?>

Golmote

6 août 2009 à 2:45:01

Houlà... que de solutions compliquées...

Quelque chose comme ça ne serait-il pas plus simple ?

<div id="news">
<div id="news_image"></div>
<div id="news_texte"></div>
<div id="news_nav"></div>
<button onclick="affiche_news(1);">Afficher news 1</button>
<button onclick="affiche_news(2);">Afficher news 2</button>
<button onclick="affiche_news(3);">Afficher news 3</button>
<button onclick="affiche_news(4);">Afficher news 4</button>
</div>

<script type="text/javascript">
function news() {
  var url_imgs = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg",
    "image4.jpg"
  ],
  textes = [
    "Texte de la news 1",
    "Texte de la news 2",
    "Texte de la news 3",
    "Texte de la news 4"
  ],
  imgs = [],
  div_image = document.getElementById("news_image"),
  div_texte = document.getElementById("news_texte");
  for(var i=0,l=url_imgs.length;i<l;i++) {
    imgs[i] = new Image();
    imgs[i].src = url_imgs[i];
  }
  return function(num) {
    div_image.innerHTML = "";
    div_image.appendChild(imgs[num-1]);
    div_texte.innerHTML = textes[num-1];
  }
}
var affiche_news;
window.onload=function() {
  affiche_news = news();
}
</script>

Avrel07

9 août 2009 à 15:41:39

ok merci beaucoup, je vais voir ce que je peux faire avec ca.
Va me falloir encore un peu de temps pour comprendre le code

Merci beaucoup en tout cas et désolé de pas avoir répondu avant

Systeme de news

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Systeme de news

Systeme de news

Supprimer

Modérer

Signaler le message aux modérateurs