Jquery изменить изображение при наведении, когда изображение и пункт меню 'title' совпадают друг с другом - PullRequest
Новая
       11

Jquery изменить изображение при наведении, когда изображение и пункт меню 'title' совпадают друг с другом

0 голосов
/ 18 августа 2010

Теперь это решено.Я упростил код.

Теперь моя проблема заключается в том, что всякий раз, когда я наводю указатель мыши на все элементы списка (показанный ниже ul.menu), затем снова наведите курсор мыши после проверки style = "display: none;" не удаляется после того, как я снова вернусь к наведению мыши.

Текущий 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>

Изображения, которые необходимо изменить при наведении каждого элемента меню: 

<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>

Обновлен 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;
}

Вы можете посмотреть сайт разработчика здесь .

У кого-нибудь есть идеи?в чем моя проблема?дайте мне знать, если я не ясно.Я попытался добавить display: block в поле .image, но он перезаписывается jquery и не возвращается к блоку.

1 Ответ

0 голосов
/ 26 августа 2010

Дайте этому шанс

обратите внимание, что Jquery позволяет вам находить значения элементов, используя следующий синтаксис: IMG [название = '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>
...