Faire apparaître une image sur un lien

[SISSI740]

bonjour,

voilà je recherche comment faire apparaîre des images sur les titres des messages pour que lorsqu'on passe avec la souris sur le lien du titre,
on voit apparaitre l'image en miniature comme dans ce site : exemple

Je pense qu'il faut utiliser un script, mais vu que je ne sais pas comment ça s'appelle en langage informatique, je ne sais où chercher
Auriez-vous un script à me donner ?

Merci beaucoup de votre aide.
bonne journée

[SISSI740]

up

[Invité]

bonsoir,

Essaie de voir dans les javascripts appelés "toggle visibility.

[SISSI740]

ok merci beaucoup de m'avoir répondu
au moins je sais où chercher maintenant
j'espère y arriver car je suis pas trés douée en informatique
bonne soirée

[SISSI740]

désolé de vous embêter encore
mais j'ai beau chercher je ne trouve pas
tout est en anglais et je ne suis pas doué dans cette langue
y a-t-il une âme charitable qui pourrait m'aider svp
je suis complètement perdu
merci beaucoup pour votre aide

[vpeybernes]

En gros ça serai une sorte d'infobulle image ?
Et c'est bien sur le titre des sujet, et non des forum ?

J'ai peur que celà soir assez complexe.
Comment voudriez vous définir cette image ?
Car le problème c'est que en dehors des icone de sujet, qui nous donne des possibilité assez limité, il n'existe pas de moyen de lier une image à un sujet dans la liste des sujet.

A moins peut être d'entrer en description du sujet l'url de l'image et d'arriver à la faire lire par un script pour l'intégrer dans une balise img.
Mais ça va encore être un peut tordu comme méthode

[SISSI740]

merci de m'avoir répondu
oui je pensais aussi que c'est assez complexe vu que je n'ai rien trouvé sur le net
en fait je pensais mettre l'url de l'image directement dans le titre du message car c'était pour faire apparaitre ces images en survolant les liens des titres des messages dans un forum
je sais pas si je suis assez clair

[vpeybernes]

Oui c'est ce dont je parlai.
Dans le titre c'est pas un bon plan. Parce que l'URL sera afficher et meller au titre.
Assez difficile à extraire du coup.
Le mieux je pense est d'utiliser la description du forum.
Et à la réflexion je me demande même si on peut pas arriver à bidouiller un truc avec le template pour ce passer de script. Par contre pour le coup ça s'appliquerai à toute les section du site.

[SISSI740]

voici un aperçu du forum où j'aimerais placer mes images :


mais voilà j'aimerais que sur chaque tutoriel soit placé une image
ça fait beaucoup je pense
vous pensez que c'est possible ou pas ?

[vpeybernes]

Oui je pense que c'est possible. Mais ça demandera un petit travail d'élaboration. Je sais pas encore quelle méthode sera la plus efficace.

Je pense que l'url dans la description du sujet et chargement de l'image et affichage au passage de souris sera le moins lourd pour le chargement des page..

[SISSI740]

Et vous sauriez pas comment je pourrais faire ça exactement
car moi j'y connais rien en informatique
encore merci pour votre aide

[vpeybernes]

En fait chez moi il est 2h30 du mat (je sais pas pour vous).
Donc je ne m'y attaquerai pas ce soir.

A moins que vous débordiez d'envies créatives et que vous souhaitiez le coder vous même (avec de l'aide bien entendu). Dans ce cas je vous conseil ces tuto :

• Tout sur JavaScript
  
• Débuter avec jQuery
  

Il faudra aussi identifier la variable de la description du sujet dans le template.

[SISSI740]

chez moi aussi il est 2 h 30 lol
ne vous inquiètez pas, je ne suis pas si pressée
ça peut attendre
dès demain, je consulterais vos liens
merci encore de m'avoir consacré de votre temps
bonne nuit

[SISSI740]

up

[SISSI740]

voilà je suis allé voir vos liens, mais j'y comprends rien
je n'arrive pas à le faire moi-même
donc si vous êtes toujours d'accord pour m'aider je veux bien
merci d'avance

[vpeybernes]

J'y travail déjà.

[vpeybernes]

Bon il semblerai que j'ai quelque chose.

Première chose à faire si ce n'est pas déjà fait, activer les description des sujet dans le PA > Général > Messages & e-mail > Configuration

Enssuite on va modifier le template général topics_list_box.
Déjà au tout début tu vas ajouter ce script :

Code:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".description").each(function(){
  var content = jQuery(this).html();
  var detector = /\[img\](.*)\[\/img\]/ ;
  var url = detector.exec(content );
  content = content.replace(url[0],"<div class='topicImage'><img src='"+url[1]+"'/></div>");
  jQuery(this).html(content);
});

jQuery("div.topictitle").mouseover(function(){
  jQuery(this).parent().find(".topicImage").fadeIn(1500);
});
jQuery("div.topictitle").mouseout(function(){
  jQuery(this).parent().find(".topicImage").fadeOut(1500);
});
});
</script>

Puis il va faloir que tu trouves la portion de code suivante :

Code:

<!-- BEGIN switch_description -->
   <span class="genmed">
      <br />
      {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
   </span>
<!-- END switch_description -->

Et que tu la modifies comme ceci :

Code:

<!-- BEGIN switch_description -->
   <div class="description genmed">
      {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
   </div>
<!-- END switch_description -->

Tu peut enregistrer et publier le template.

Après il va faloir ajouter ce petit bout de code dans ta CSS :

Code:

.topicImage {
position : absolute ; display : none ;

background : #FFFFFF ;
border : solid 1px;
padding : 10px ;
}

en dehors de position : absolute ; display : none ;tu peux personnaliser le reste. C'est ce qui définie la mise en forme de ton image. .topicImage correspond à un div dans le quel ce trouve l'image.

Enfin pour insérer l'image, il faudra que tu l'insère avec un BBcode dans la description du topic (le champs en dessous du titre).

Code:

[img]url_de_l'image[/img]

Voila, j'espère que tout marchera bien.

[SISSI740]

super !!! ça marche !!!!
milles mercis pour votre aide
vous êtes génial !!!
sans vous j'y serais jamais arrivé
Bonne continuation
et bonne soirée
bizz

[vpeybernes]

Super.
C'était avec plaisir.
Bonne continuation à toi.

[Ea]

Bonjour, Où en est votre problème ? Est il résolu ? _____________________ Si vous n'avez pas eu de solutions, relancer régulièrement votre sujet (toutes les 24 heures au minimum). Et pensez à expliquer votre problème règulièrement, à chercher par vous même et montrez que vous cherchez de votre côté et pas que vous attendez simplement d'une réponse. _____________________ Lorsqu'un sujet est résolu : Cliquez sur le bouton de votre premier message du sujet. Cochez en dessous de la zone de message Enfin validez avec le bouton Pour remercier ceux qui vous ont aidés vous pouvez cliquer sur A bientôt sur ForumActif