Substitution d'image et affichage d'un flux RSS

Nicosmos · Message par **Nicosmos** » 19 févr. 2006, 10:08

Bonjour !

Je suis en train de refaire mon site aux normes. Je n'arrive pas à trouver un code de substitutuion d'image (changement d'image au passage de la souris) qui soit aux normes HTML ...

Je cherche également un code HTML, également aux normes, permettant d'afficher les dernieres entrées d'un fil RSS (les titres des derniers billets d'un blog, dans ce cas). Mais c'est facultatif et moins urgent ...

jpbardiau · Message par **jpbardiau** » 19 févr. 2006, 11:02

Pour ta première question : image réactive sur Alsacreations appliqué sur la page d'accueil de mon site.

Nicosmos · Message par **Nicosmos** » 19 févr. 2006, 11:09

Oki, merci ... Il n'y a pas un moyen sans CSS (j'en fais pas encore ..) ?

Thomas · Message par **Thomas** » 19 févr. 2006, 11:13

JavaScript mais c'est moins intéressant car ça marchera pas chez tout le monde.

jpbardiau · Message par **jpbardiau** » 19 févr. 2006, 11:14

C'est possible en javascript mais je n'en connais pas plus.
De toute façon, les CSS, il faudra t'y mettre : c'est indispensable

Nicosmos · Message par **Nicosmos** » 19 févr. 2006, 11:24

De toute façon, les CSS, il faudra t'y mettre : c'est indispensable

Ok, alors je vais faire ca avec le code d'Alasacréations ...

(parce que j'avais trouvé un code, que j'ai utilisé sur cette page : http://nicosmos66.free.fr/creations/, mais il n'est pas aux normes ...)

calimo · Message par **calimo** » 19 févr. 2006, 11:28

Toto a écrit :JavaScript mais c'est moins intéressant car ça marchera pas chez tout le monde.

Euh... les CSS non plus hein

(même si moins de monde les désactive).

Nicosmos · Message par **Nicosmos** » 19 févr. 2006, 11:30

Il faut créer un fichier style.css dans la racine de la page, c'est ca ?
Il y a le code, mais c'est pas écrit où l'insérer ...

Ya t'il un code à mettre sur la page elle même, qui dit quelle feuille de style utiliser ?

Message par **Benoit** » 19 févr. 2006, 11:35

Nicosmos a écrit :Je n'arrive pas à trouver un code de substitutuion d'image (changement d'image au passage de la souris) qui soit aux normes HTML ...

Du point de vue HTML il n'y a rien de spécial à ces images. Après, pour ajouter l'effet tu utilises soit une astuce CSS (déplacer les marges de l'image pour faire apparaître une zone différente de celle-ci) soit un remplacement d'image par JavaScript (changer l'attribut SRC).

Je cherche également un code HTML, également aux normes, permettant d'afficher les dernieres entrées d'un fil RSS (les titres des derniers billets d'un blog, dans ce cas). Mais c'est facultatif et moins urgent ...

Là encore, ce n'est pas de HTML que tu as besoin mais d'un code sur le serveur (en PHP par exemple) qui va récupérer ces informations et les intégrer dans ta page. Il doit également y avoir des manières de le faire en JavaScript avec XMLHttpRequest (comme on ajoute les brèves ici en haut) mais c'est certainement beaucoup plus lourd.

jpbardiau · Message par **jpbardiau** » 19 févr. 2006, 12:02

Nicosmos a écrit :Il faut créer un fichier style.css dans la racine de la page, c'est ca ?
Il y a le code, mais c'est pas écrit où l'insérer ...

Ya t'il un code à mettre sur la page elle même, qui dit quelle feuille de style utiliser ?

Exemple (d'après Alsacreation)
Code CSS

Code : Tout sélectionner

a.img { display: block;
    width: 100px;
    height: 83px;
    background-image: url(images/img_01.png);
    background-repeat: no-repeat;
    }

a.img:hover { background-image: url(images/img_02.png);
    }

.cont_img { position: absolute;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 83px;
    top: 419px;
    }

dans lequel on définit deux classes : la classe .img avec deux images (img_01 et img_02) et la classe .cont_img pour le positionnement.
Ce code est à coller en l'adaptant dans un éditeur de texte et à sauver en style.css (par exemple)

Code HTML
dans le <head> :

Code : Tout sélectionner

<link rel="stylesheet" href="style.css" type="text/css">

dans le <body> :

Code : Tout sélectionner

<a class="img cont_img" title="titre" href="lien"></a>

calimo · Message par **calimo** » 19 févr. 2006, 14:58

Benoit a écrit :
Je cherche également un code HTML, également aux normes, permettant d'afficher les dernieres entrées d'un fil RSS (les titres des derniers billets d'un blog, dans ce cas). Mais c'est facultatif et moins urgent ...
Là encore, ce n'est pas de HTML que tu as besoin mais d'un code sur le serveur (en PHP par exemple) qui va récupérer ces informations et les intégrer dans ta page. Il doit également y avoir des manières de le faire en JavaScript avec XMLHttpRequest (comme on ajoute les brèves ici en haut) mais c'est certainement beaucoup plus lourd.

On en a un sur la page d'accueil des extensions : http://extensions.geckozone.org/Accueil/
On utilise MagpieRSS pour analyser le flux, puis on l'insère dans la page. Si tu veux, je peux te donner le code (mais la sortie de Magpie est vraiment pratique donc je ne pense pas que ce soit hyper utile)

Nicosmos · Message par **Nicosmos** » 19 févr. 2006, 18:17

a.img { display: block;
width: 100px;
height: 83px;
background-image: url(images/img_01.png);
background-repeat: no-repeat;
}

a.img:hover { background-image: url(images/img_02.png);
}

.cont_img { position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 83px;
top: 419px;
}

Ok. Et pour mettre plusieurs images différentes avec cet effet, il faut changer "img" par d'autres choses à chaque fois ?

jpbardiau · Message par **jpbardiau** » 19 févr. 2006, 18:36

Oui, il faut chaque fois créer de nouvelles classes avec des noms différents.

Nicosmos · Message par **Nicosmos** » 19 févr. 2006, 19:13

Ca marche presque !

Le résultat : http://nicosmos66.free.fr/defaut.html

Le problème : les boutons de "Blog" à "Contact" devraient être alignés horizontalement avec "Accueil" et collés contre la droite ...

jpbardiau · Message par **jpbardiau** » 19 févr. 2006, 19:30

Nicosmos a écrit :Ca marche presque !

Le résultat : http://nicosmos66.free.fr/defaut.html

Le problème : les boutons de "Blog" à "Contact" devraient être alignés horizontalement avec "Accueil" et collés contre la droite ...

Les inconvénients d'une mise en page par tableau. La deuxième catégorie de classe que j'ai indiqué plus haut sert justement à positionner avec précision

Code : Tout sélectionner

.cont_img { position: absolute;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 83px;
    top: 419px;
    }

Geckozone

Substitution d'image et affichage d'un flux RSS

Substitution d'image et affichage d'un flux RSS

Re: Substitution d'image et affichage d'un flux RSS

Re: Substitution d'image et affichage d'un flux RSS

Qui est en ligne ?