Comment peut-on effectuer un échange div double sur le rollover?

Je suis à la recherche de conseils pour y parvenir. Compte tenu de ce qui suit:Comment peut-on effectuer un échange div double sur le rollover?

[Div A (contient une image)]
[Div B (contient une liste horizontale de 8 ou plus des liens de texte)]
[Div C (contient du texte)]

En roulant sur n'importe quel lien dans la Div B, comment puis-je faire permuter les contenus respectifs de Div Div A et Div C vers quelque chose de différent qui correspond au contenu de ce lien? Par exemple, si l'on retournait un lien Div B appelé "Dogs", alors Div A remplacerait son contenu et afficherait une image d'un chien et Div C remplacerait son contenu et afficherait du texte sur chiens. Après avoir roulé sur ce lien, les nouveaux contenus Div A et Div C resteront en place jusqu'à ce qu'un nouveau lien soit renversé.

J'espère que cela est logique. Est-ce que quelqu'un a des conseils sur la meilleure façon d'accomplir cela?

Source

2009-09-23 Anonymous

D'où proviennent les contenus de div A et C? C'est - comment décidez-vous ce qu'il faut mettre en eux? –

Le contenu de la division A et de la division C est basé uniquement sur le dernier basculement du lien. Comme le premier lien Div B pourrait être "Dogs", alors Div A serait initialisé pour contenir une image d'un chien et Div C serait initialisé pour contenir du texte sur les chiens. Cependant, si le lien Div C "Cats" était retourné, alors Div A cacherait/enlèverait l'image d'un chien et afficherait plutôt une image d'un chat, et Div C cacherait/enlèverait le texte sur les chiens et afficherait plutôt du texte à propos des chats ... jusqu'à ce qu'un autre lien soit passé. –

Hmm. .. cela devrait être assez simple avec jQuery (par rapport à certaines des autres réponses ici):

Si vous n'êtes pas familier avec jQuery, le $() est un raccourci pour appeler jQuery(), et en utilisant

$(document).ready(function() { 
    // put all your jQuery goodness in here. 
});

est un moyen de s'assurer que jQuery se déclenche au bon moment. En savoir plus sur ce here. Donc d'abord, ajoutez une classe (par exemple .dogs) à chaque élément <a> dans votre liste #divB. Ensuite, donnez à chacune des images correspondantes la même classe, et contenez chacun de vos blocs de texte dans #divC dans les divs avec la même classe. Le code HTML ressemblerait à quelque chose comme ceci:

<div id="divA"> 
    <img src="dogs.jpg" class="dogs" /> 
    <img src="flowers.jpg" class="flowers" /> 
    <img src="cars.jpg" class="cars" /> 
</div> 
<div id="divB"> 
    <ul> 
     <li><a href="dogs.html" class="dogs">Dogs</a></li> 
     <li><a href="flowers.html" class="flowers">Flowers</a></li> 
     <li><a href="cars.html" class="cars">Cars</a></li> 
    </ul 
</div> 
<div id="divC"> 
    <div class="dogs"><p>Text about dogs.</p></div> 
    <div class="flowers"><p>Text about flowers.</p></div> 
    <div class="cars"><p>Text about cars.</p></div> 
</div>

Ensuite, utilisez le jQuery suivant, mettre cela dans la section <head> de votre doc HTML:

$(document).ready(function() { 
    $('a.dogs').hover(function() { 
     $('#divA img').hide("fast"); 
     $('#divA img.dogs').show("fast"); 
     $('#divC div').hide("fast"); 
     $('div.dogs').show("fast"); 
    }); 
});

Nous disons lorsque le document est prêt, lorsque vous survolez l'élément <a> avec la classe .dogs, exécutez une fonction. Cette fonction va cacher toutes les images dans #divA et afficher immédiatement l'image avec la classe .dogs. Ensuite, il cachera tous les divs dans le #divC et affichera immédiatement la div avec la classe .dogs.

Vous pouvez faire la même chose deux fois plus pour .flowers et .cars, ou peu importe.Gardez à l'esprit qu'il existe des moyens plus efficaces de le faire, si vous souhaitez approfondir votre recherche sur jQuery, mais ce sera une bonne façon de commencer à vous aider à comprendre exactement ce que fait jQuery. Et cela garde le script HORS du corps HTML, aussi!

Source

2009-09-23 17:46:54 rhodesjason

Oh et n'oubliez pas de joindre le jQuery ci-dessus dans étiquettes. – rhodesjason

Merci, cela semble assez clair! Je suis définitivement un novice de jQuery, donc je vais essayer car cela a du sens pour moi. Une fois que je connaîtrai les bases, je chercherai des moyens plus efficaces de le faire ... Merci encore à tout le monde! –

Bonne chance - espérons que cela fonctionne. – rhodesjason

Vous pouvez modifier le contenu d'un div avec quelque chose comme ceci:

<script type="text/javascript"> 
    function over() { 
     var a = document.getElementById('a'); 
     var c = document.getElementById('c'); 

     a.style.backgroundImage = "url(/path/to/image)"; 
     c.innerHTML = "<b>Dogs rock</b>"; 
    } 
</script> 

<div id="a"></div> 
<div id="b" onmouseover="over();"></div> 
<div id="c"></div>

Ensuite, tout ce que vous devez faire est d'ajouter tout autre div de vous voulez et écrire du code pour les changer de façon appropriée. Définissez l'état initial de A et C en utilisant css, ou appelez simplement la fonction over() au chargement de la page.

Source

2009-09-23 16:24:19 Seth

En supposant que les href des points à une ressource qui contient le contenu à la fois, mais vous ne pouvez pas injecter la sortie complète de la liaison en un seul élément, quelque chose comme cela pourrait fonctionner:

$('#divB a').mouseover(function() { 

    //get images from link, inject into divA 
    $('#divA').html('<strong>Loading...</strong>') 
       .load($(this).attr('href') + ' img'); 

    //get divs from link, inject into divC 
    $('#divC').html('<strong>Loading...</strong>') 
       .load($(this).attr('href') + ' div'); 
});

Source

2009-09-23 16:28:19 karim79

Comment peut-on effectuer un échange div double sur le rollover?

Répondre

Questions connexes