Změna obrázku podle webove adresy – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Dobrý den, mám kód, ve kterém funguje změna obrázku při najetí myškou, nyní chci přidat kontrolu adresy a pokud bude stejná jako href v <a> tak se obrázek změní, poradíte prosím. HTML kód:  

<div id="pages_redirect">
                    <ul>
                        <li><a class="gymnazium" href="http://prigo.cz"><img src="/image/gymnazium.png" alt="" /></a></li>
                        <li><a class="zs" href="http://webstranka.4fan.cz"><img src="/image/zs.png" alt="" /></a></li>
                        <li><a class="materska" href=""><img src="/image/materska.png" alt="" /></a></li>
                    </ul>
                </div>

Jquery kód:

<script type="text/javascript">
		$(document).ready(function() {
			$('.slideshow').before('<div id="nav" class="nav">').cycle({
				fx: 'fade',
				pager: '#nav' /* , */
				//before: function() { console.log(this.src); }
			});
            
            $(".zs img")
            .mouseover(function () {
                $(this).attr("src", "/image/zs_hover.png");
                $('#pages_redirect ul li').css('border-bottom','5px solid #369929');
                
            })
            .mouseout(function () {
                $(this).attr("src", "/image/zs.png");
                $('#pages_redirect ul li').css('border-bottom','5px solid #c5c7c8');
            });
            $(".gymnazium img")
            .mouseover(function () {
                $(this).attr("src", "/image/gymnazium_hover.png");
                $('#pages_redirect ul li').css('border-bottom','5px solid #8dbe48');
                
            })
            .mouseout(function () {
                $(this).attr("src", "/image/gymnazium.png");
                $('#pages_redirect ul li').css('border-bottom','5px solid #c5c7c8');
            });
            
            $(".materska img")
            .mouseover(function () {
                $(this).attr("src", "/image/materska_hover.png");
                $('#pages_redirect ul li').css('border-bottom','5px solid #cde0bf');
            })
            .mouseout(function () {
                $(this).attr("src", "/image/materska.png");
                $('#pages_redirect ul li').css('border-bottom','5px solid #c5c7c8');
            });
            
            $(".ibaco img")
            .mouseover(function () {
                $(this).attr("src", "/image/ibaco_hover.png");
                $('#pages_redirect ul li').css('border-bottom','5px solid #e2007a');
            })
            .mouseout(function () {
                $(this).attr("src", "/image/ibaco.png");
                $('#pages_redirect ul li').css('border-bottom','5px solid #c5c7c8');
            });
            
            $("#pages_redirect a").each(function() {   
                if (this.href == window.location.href) {
                    var className = this.attr('class');
                    if(className == "zs"){
                        $('.zs img').attr("src", "/image/zs_hover.png");    
                    }
                    if(className == "gymnazium"){
                        $('.gymnazium img').attr("src", "/image/gymnazium_hover.png");    
                    }
                    if(className == "materska"){
                        $('.materska img').attr("src", "/image/materska_hover.png");    
                    }
                }
            });
            
		});
		</script>

Měl by ti stačit window.location. Poté už jenom rozparsuješ a máš hotovo ;-)

Takyto pristup nie je velmi prehladny, ani vhodny z viacerych dovodov.

Skus zvazit, ci nie je lepsie pouzit css:

<div id="pages_redirect">
  <ul>
    <li><a class="gymnazium" href="http://prigo.cz"></a></li>
    <li><a class="zs" href="http://webstranka.4fan.cz"></a></li>
    <li><a class="materska" href=""></a></li>
  </ul>
</div>

<style>
  .gymnazium {background: url("/image/gymnazium.png") no-repeat; }
  .gymnazium.hover {background-image: url("/image/gymnazium_hover.png")}
  .zs {...}
  .materska {...}
</style>

Potom v javascripte uz iba pridavas a odoberas class:

$(document).ready(function() {
  $('#pages_redirect a').live('mouseover', function(){
    $(this).addClass("hover");
  });
  $('#pages_redirect a').live('mouseout', function(){
    $(this).removeClass("hover");
  });
});

Co sa tyka zistenia, na akej url sa nachadzas, ak sa stranka generuje napr. v php, idealne je vlozit uz tam class="active" do aktivnej linky, ak nie, vyriesis to ako ti napisal uz Kowalsky95