Css et rollover suite...

Résolu

Utilisateur anonyme -
Utilisateur anonyme - 6 janv. 2012 à 00:23

Bonjour,

je repose ma question différement:
structure du document:

<div id="global">
<div id="entete">...</div>
<div id="centre">
<div id="navigation">...</div>
<div id="dock">...</div>
<div id="contenu">...</div>
</div>
</div>

Dans la div navigation des image (image_m.png)
lorsque la souris survole une de ces images, je souhaite une image (image_d.png) dans la div dock.
compte tenu de la structure globale du document, pour être cote à cote, les div sont float.

j'ai trouvé une réponse sur ce forum qui préconise l'utilisation d'un java script, mais je n'arrive pas à mle faire fonctionrer... le site proposé en référence est en maintenance et le message indique que cela risque d'être long, malheureusement je suis très pressè...

A l'aide!

Merci
yargwen

Afficher la suite

2 réponses

prosthetiks Messages postés 1309 Statut Membre 431

Hello,

Quelque chose dans le genre ?

<html> 
<head> 
  <title></title> 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
  <script type="text/javascript"> 
    $(function(){ 
      $('#navigation a img').mouseover(function(){ 
        $('#dock img').fadeOut(); 
        var image = $(this).parent('a').attr('href'); 
        $('<img />') 
          .attr('src', image) 
          .css('display', 'none') 
          .load(function(){ 
              $('#dock').empty(); 
              $('#dock').append($(this)); 
              $('#dock img').fadeIn(); 
          }); 
        return true; 
      }); 
      $('#navigation a').click(function(){ 
        return false; 
      }); 
    }); 
  </script> 
  <style type="text/css" media="screen"> 
    body{background-color:#343434; margin:0; padding:0;text-align:center} 
    #global{ 
      width:960px; 
      background-color:#555; 
      margin:0 auto; 
      padding:20px; 
    } 
    #navigation{ 
      width:260px; 
      float:left; 
      height:500px; 
      overflow:auto; 
    } 
    #dock{ 
      margin-left:270px; 
      width:690px; 
      background-color:#888; 
      height:500px; 
    } 
  </style> 
</head> 
<body> 
  <div id="global">  
    <div id="navigation"> 
      <a href="http://lorempixel.com/500/500/people"> 
        <img src="http://lorempixel.com/240/240/people"/> 
      </a> 
      <a href="http://lorempixel.com/500/500/animals"> 
        <img src="http://lorempixel.com/240/240/animals"/> 
      </a> 
      <a href="http://lorempixel.com/500/500/food"> 
        <img src="http://lorempixel.com/240/240/food"/> 
      </a> 
      <a href="http://lorempixel.com/500/500/abstract"> 
        <img src="http://lorempixel.com/240/240/abstract"/> 
      </a> 
      <a href="http://lorempixel.com/500/500/technics"> 
        <img src="http://lorempixel.com/240/240/technics/"/> 
      </a> 
    </div>  
    <div id="dock"> 
      <img src="http://lorempixel.com/500/500/fashion"/> 
        
    </div>  
  </div>  
</body> 
</html>

Edit: Edit en souligné, ligne 21: return false au lieu de true;

Réponse 2 / 2
Utilisateur anonyme

Super! C'est exactement ce que je souhaitais!
Un grand merci

Yannos
0

Css et rollover suite...

2 réponses

Discussions similaires

Newsletters