Jquery change l'image en survol lorsque l'image et l'élément de menu 'title' sont égaux

Ceci est maintenant résolu. J'ai simplifié le code.Jquery change l'image en survol lorsque l'image et l'élément de menu 'title' sont égaux

Mon problème maintenant est que chaque fois que je survole tous les éléments de la liste (montrés ci-dessous ul.menu) puis survoler à nouveau, lors de l'inspection style = "display: none;" n'est pas supprimé après que je reviens au passage de la souris.

actuelle Html:

<ul class="menu"> 
<li class="menu-mlid-187" id="ElDorado"><a title="El Dorado" href="/el-dorado">El Dorado</a></li> 
<li class="menu-mlid-202" id="TheGrand"><a title="The Grand" href="/grand">The Grand</a></li> 
</ul>

Les images qui doivent changer lorsque chaque élément de menu est moucheté sur:

<div id="bannerContainer"> 

    <div class="view-content"> 

    <div class="views-row views-row-1 views-row-odd views-row-first">  
     <span class="field-content"> 

      <a href="/el-dorado" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="El Dorado" src="http://localhost:8888/sites/default/files/eldoradobanner.jpg" /> 
      </a> 

     </span> 
     </div> 
    </div> 

    <div class="views-row views-row-2 views-row-even views-row-last">  
     <span class="field-content"> 

      <a href="/grand" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="The Grand" src="http://localhost:8888/sites/default/files/grandbanner.jpg" /> 
      </a> 

     </span> 
    </div> 

    </div> 
<!-- default image --> 
    <div id="upload"> 
    <img width="636" height="561" title='venues' src="http://localhost:8888/sites/default/files/venues_banner.jpg" alt="" class="imagefield imagefield-field_image">      
</div> 

</div>

Mise à jour Jquery

// Dynamic mouse over menu item to display image utilizing titles 
    $('#content .menu-block-3 ul.menu a').mouseover(function(){ 
     $("#bannerContainer #upload").fadeOut('fast'); 
     var sharedtitle = $(this).attr("title");   
     $('#bannerContainer img[title = "'+sharedtitle+'" ]').fadeIn('fast'); 
    }); 
    $('#content .menu-block-3 ul.menu a').mouseout(function(){ 
     $("#bannerContainer #upload").fadeIn('fast'); 
     var sharedtitle = $(this).attr("title"); 
     $('#bannerContainer img[title = "'+sharedtitle+'" ]').fadeOut('fast'); 
    });

CSS:

/****** Venues Rollover navigation menu ******/ 
.view-ImageRollover { 
    float:left; 
    position:relative; 
    top: 0; 
} 
.view-ImageRollover .view-content { /* outer container */ 
    position: relative; 
} 
.view-ImageRollover .field-content img { /* inner container */ 
    display: block!Important; 
    float: left; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 0px; 
} 
/* default image */ 
#upload { 
    float: left; 
    z-index: 5; 
    position: absolute; 
} 
#upload .imagefield-field_image img{ 
    left:0px; 
    position: absolute; 
}

You can see dev site here.

Est-ce que quelqu'un a une idée de ce qu'est mon problème? faites-moi savoir si je ne suis pas clair. J'ai essayé d'ajouter display: block au .imagefield mais il se fait écraser par le jquery et ne reviendra pas bloquer.

Source

2010-08-18 arkjoseph

L'ID est '/ Grand', avec ce slash là-bas? –

désolé c'est une erreur. – arkjoseph

On ne sait pas ce que vous demandez. Qu'est-ce qui devrait changer sur quel mouseover? –

Donnez ce un coup

Notez que Jquery vous permet de localiser les valeurs des éléments en utilisant la syntaxe suivante: IMG [title = 'somevalue']

<html> 
<head> 
<script src='jquery.min.js' ></script> 


<script type="text/javascript"> 

$(document).ready(function() { 

    $('ul.menu a').mouseover(function(){ 
     var sharedtitle = $(this).attr("title"); 
     $('#bannerContainer img[title = "'+sharedtitle+'" ]').addClass('equal');   
    }); 


    $('ul.menu a').mouseout(function(){ 
     var sharedtitle = $(this).attr("title"); 
     $('#bannerContainer img[title = "'+sharedtitle+'" ]').removeClass('equal');  }); 


}); 


</script> 
</Head> 
<body> 


<ul class="menu"> 
<li class="menu-mlid-187" id="ElDorado"><a title="El Dorado" href="/el-dorado">El Dorado</a></li> 
<li class="menu-mlid-202" id="TheGrand"><a title="The Grand" href="/grand">The Grand</a></li> 
</ul> 


<div id="bannerContainer"> 

    <div class="view-content"> 

    <div class="views-row views-row-1 views-row-odd views-row-first">  
     <span class="field-content"> 

      <a href="/el-dorado" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="El Dorado" src="http://www.google.com/images/srpr/nav_logo14.png" /> 
      </a> 

     </span> 
     </div> 
    </div> 

    <div class="views-row views-row-2 views-row-even views-row-last">   
     <span class="field-content"> 

      <a href="/grand" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="The Grand" src="http://www.google.com/images/srpr/nav_logo14.png" /> 
      </a> 

     </span> 
    </div>  

    </div> 
<!-- default image --> 
    <div id="upload"> 
    <img width="636" height="561" title='venues' src="http://www.google.com/images/srpr/nav_logo14.png" alt="" class="imagefield imagefield-field_image">      
</div> 

</div> 
</body> 
</html>

Source

2010-08-26 00:40:50

Oh merci! vous êtes un épargnant vivant! J'étais presque sur la bonne voie, mais vous avez frappé sur place. merci brian! – arkjoseph

Malheureusement, j'ai rencontré un problème lorsque je souris sur tous les éléments, puis revenez les voir à nouveau. lors de l'inspection, jquery ajoute l'affichage: aucun juste après que je souris. Je voudrais qu'il bascule cet affichage: aucun après avoir parcouru le li – arkjoseph

Utilisez-vous le code tel que posté ou une variation? Si vous avez apporté des modifications, veuillez poster le code que vous utilisez. [Modifier la question initiale] (Le code dans ma réponse ne fait rien avec la propriété d'affichage). –

Jquery change l'image en survol lorsque l'image et l'élément de menu 'title' sont égaux

Répondre

Questions connexes