Změna obrázku podle webove adresy – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Daemon481
~ Anonymní uživatel
5 příspěvků
9. 1. 2014   #1
-
0
-

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>
Nahlásit jako SPAM
IP: 78.108.157.–
Reklama
Reklama
Kowalsky950
Stálý člen
9. 1. 2014   #2
-
0
-

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

Nahlásit jako SPAM
IP: 90.176.114.–
Ericsko+3
Stálý člen
11. 1. 2014   #3
-
0
-

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

Nahlásit jako SPAM
IP: 88.212.34.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 26 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý