Existe-t-il un moyen de programmer une image au survol de la souris qui contrôle 2 divs [une image plus grande ET un texte de description] ?

Question

Le design prévoit une galerie d'images avec des vignettes pour les différents personnages et lorsque l'on passe sur une vignette, une version plus grande de l'image apparaît et dans une div à gauche avec un en-tête et une description pour chaque personnage apparaît également.

1) Est-il possible d'avoir un rollover qui contrôle les deux divs ? (image agrandie et description)

y

2) Comment dois-je procéder pour synchroniser ce système avec un CMS ?

merci de votre lecture :)

Answer 1

Oui, stocker les informations sur le caractère dans la balise id de l'élément déclencheur. Par exemple, disons qu'il s'agit de Mickey mouse, id="mickey", peut-être utilisez-vous un prototype...

$$('.trigger').each(function (el) {el.observe('mouseover',showInfo.bind(el);});

Ensuite, la fonction showInfo affiche les divs qui contiennent l'image agrandie et l'info

function showInfo(ev) {
    // this refers to the element that has the mouse over, which has the descriptive id
    var infoContainerId = this.id+"_info";
    var imageContainerId = this.id+"_image";
    $(infoContainerId).show(); // showing the div id="mickey_info"
    $(imageContainerId).show(); // showing the div id="mickey_image"
}

Eh bien... juste un exemple...

Answer 2

Essayez ceci pour commencer, je ne sais pas quel cms vous utilisez etc. donc je ne sais pas comment répondre à cette partie :

HTML :

<a class="info" href="" onclick="return false;">
  <img src="thumb.jpg"/>
  <span><img src="large.jpg" /><br />
   description goes here</span>
</a>

CSS :

a.info              {z-index:24; position:relative; color:#999; font-size:11px; text-transform:none; font-weight:normal; text-decoration:none; border:1px solid #999; padding-left:3px; padding-right:3px; margin:5px;}
a.info:hover        {z-index:25; text-decoration:none; color:#333; border-color:#333;}
a.info span         {display:none; position:absolute; top:15px; left:15px; width:240px; color:#000; font-size:12px; background-color:#fff; padding:2px; border:1px solid #333;}
a.info:hover span   {display:block;}

Answer 3

L'utilisation de jQuery n'a pas été testée, mais il s'agirait de quelque chose comme ceci :

$('#myImageThumbnail').mouseenter(function(){

    //Set the description text
    $('#descriptionDiv').html('Insert character description here');

    //Enlarge the image
    $('#myImageThumbnail').attr('height','300');
    $('#myImageThumbnail').attr('width','200');
});

$('#myImageThumbnail').mouseleave(function(){

    //Remove the description text
    $('#descriptionDiv').html('');

    //Return image/thumbnail to original size
    $('#myImageThumbnail').attr('height','150');
    $('#myImageThumbnail').attr('width','100');
});

Si vous avez besoin d'informations dynamiques provenant d'une base de données pour la description, il vous suffit d'utiliser la fonction jQuery $.ajax et de définir la description HTML en fonction de la valeur renvoyée.