Zvětšení obrázku javaScriptem   zodpovězená otázka

ASP.NET WebForms, JavaScript

Zdravím,

když jsem se konečně dokopal abych se začal učit pracovat s asp .net přemluvil jsem se abych se podíval i na javascript.

Na stránce mám hodnocení produktu (klasika 5 hvězdiček) a já chci, aby se při najetí myši daná hvězdička zvětšila. Udělal jsem si na to javascript, ale bohužel mi nefunguje. Funkce se správně při událostech onMouseOver a onMouseOut spustí a kód proběhne, velikost obrázku se však nezmění.

Kód je následující:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
 
     //    zvětšení obrázku
     function resizeBigger(img) {
         img.height += "10";
         img.width += "10";
     }
 
 
     //změnšení obrázku
     function resizeSmaller(img) {
         img.height -= "10";
         img.width -= "10";
     }
</script>

A takto ho mám deklarovaný v HTML:

1
<asp:image runat="server" id="hodnoceni1" onMouseOver="resizeBigger(this)" onMouseOut="resizeSmaller(this)"  width="16px" height="16px" />

Nevím proč to nefunguje, když jsem tam měl předtím javaScript který mi měníl zdroj obrázku tak to šlapalo:

1
<asp:image runat="server" id="hodnoceni1"  onmouseover="this.src='App_Themes/Default/Images/hodnoceni_plne.png'" onmouseout="this.src='App_Themes/Default/Images/hodnoceni_prazdne.png'" width="16px" height="16px" />

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Zkuste to takto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
 
        //    zvětšení obrázku
        function resizeBigger(img) {
            img.style.height = "26px";
            img.style.width = "26px";
        }
 
 
        //změnšení obrázku
        function resizeSmaller(img) {
            img.style.height = "6px";
            img.style.width = "6px";
        }
   </script>

nahlásit spamnahlásit spam 2 / 2 odpovědětodpovědět

Děkuji, to je přesně ono:))

Jen jsem to ještě trochu upravil, abych tam nezadával absolutní velikost:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//    zvětšení obrázku
function resizeBigger(img) {
 
    img.style.pixelHeight = img.style.pixelHeight + 10;
    img.style.pixelWidth = img.style.pixelWidth + 10;
 
}
 
 
//změnšení obrázku
function resizeSmaller(img) {
 
    img.style.pixelHeight = img.style.pixelHeight - 10;
    img.style.pixelWidth = img.style.pixelWidth - 10;
}

Ještě jednou díky;) S Javascriptem dělám dnes poprvé, takže tam na mě čeká ještě asi hodně záludností:)

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Taky s ním často bojuji..tohle je pro mě taky nová věc - myslím tím,použití pixelHeight/width ,takže taky děkuji :))

nahlásit spamnahlásit spam 0 odpovědětodpovědět

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:
Heslo:

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback