| Autor | Zpráva | ||
|---|---|---|---|
| defaultid Profil |
#1 · Zasláno: 23. 2. 2013, 19:47:01
Dobrý večer všem,
v problematice js jsem poměrně nováčkem, potřeboval bych od vás poradit, jak změnit atribut name u obrázků (validator vyhazuje obsolete) na id, které už v podstatě mají kvůli stylům. Problém je, že atribut name používá javascript, který ty obázky po najetí kurzorem mění (takové měnící se menu, když je kurzor nad obrázkem - obrázek je bílý, když na něm není, obrázek je šedý..).. Může mi tedy někdo poradit, jak upravit javascript, který je níže tak, aby fungoval? zkoušel jsem tam dávat getelementbyid, ale asi jsem něco/všechno dělal špatně, jsem už docela zoufalý a ten projekt je důležitý.. javascript if (document.images)
{
tab1on= new Image(147,48);
tab1on.src="images/buttons/uvod-w.png";
tab2on= new Image(147,48);
tab2on.src="images/buttons/sluzby-w.png";
tab3on= new Image(147,48);
tab3on.src="images/buttons/cenik-w.png";
tab4on= new Image(147,48);
tab4on.src="images/buttons/rezervace-w.png";
tab5on= new Image(147,48);
tab5on.src="images/buttons/galerie-w.png";
tab1off= new Image(147,48);
tab1off.src="images/buttons/uvod-g.png";
tab2off= new Image(147,48);
tab2off.src="images/buttons/sluzby-g.png";
tab3off= new Image(147,48);
tab3off.src="images/buttons/cenik-g.png";
tab4off= new Image(147,48);
tab4off.src="images/buttons/rezervace-g.png";
tab5off= new Image(147,48);
tab5off.src="images/buttons/galerie-g.png";
}
function lightup(imgName) // pokud dojde k aktivaci onMouseover v html (tedy najeti kurzoru na zalozku) - provede se tato funkce
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
function turnoff(imgName) // opacny pripad, tedy aktivace onMouseout (mys jde pryc ze zalozky)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}html(php) - POZNÁMKA - ten první obrázek tam je napevno, toho si nevšímejte, musím to ještě pořešit ale nemá to s javascriptem nic společného: <a href="index.php"><img id="uvod" src="images/buttons/uvod-w.png" name="tab1" width="147" height="48" alt="úvod"></a>
<a href="sluzby.php" onMouseover="lightup('tab2')" onMouseout="turnoff('tab2')"><img id="sluzby" src="images/buttons/sluzby-g.png" name="tab2" width="147" height="48" alt="služby"></a>
<a href="cenik.php" onMouseover="lightup('tab3')" onMouseout="turnoff('tab3')"><img id="cenik" src="images/buttons/cenik-g.png" name="tab3" width="147" height="48" alt="ceník"></a>
<a href="rezervace.php" onMouseover="lightup('tab4')" onMouseout="turnoff('tab4')"><img id="rezervace" src="images/buttons/rezervace-g.png" name="tab4" width="147" height="48" alt="rezervace"></a>
<a href="galerie.php" onMouseover="lightup('tab5')" onMouseout="turnoff('tab5')"><img id="galerie" src="images/buttons/galerie-g.png" name="tab5" width="147" height="48" alt="galerie"></a>PS: když je v cestě obrázku (názvu) g, odkazuje se na šedý obrázek, když je tam w - je bílý.. Bohužel nemůžu předvést živou ukázku, omlouvám se.. |
||
| preca1 Profil |
#2 · Zasláno: 23. 2. 2013, 20:11:38
Zdravim,
než se pustíme do řešení problému, tak dvě otázky: a) je opravdu nutné mít validní kód? 2) proč na tohle používat JS, když to nejspíš pude jednoduššeji a čistěji vyřešit pomocí CSS? |
||
| defaultid Profil |
a) asi ano, je to maturitní projekt..
2) vím, že by to šlo pomocí css, ale už se mi do toho moc nechce hrabat, web už je skoro hotový (proto řeším validitu).. všechny ostatní chyby už jsou opravené, jen na každé stránce vyhazuje tady těch 5 name atributů.. je to k pos*** :-( |
||
| preca1 Profil |
#4 · Zasláno: 23. 2. 2013, 20:55:05
Když to teda chceš pomocí JS, tak do metod lightup/turnoff nepředávej hodnotu atributu name (který tím pádem můžeš smazat a dosáhneš validity), ale hodnotu atributu id elementu img.
Následně v těch jmenovaných metodách použij tebou zmiňovanou metodu document.getElementById(idImgElementu) (pozor na velikost písmen). Tím získáš odkaz na ten obrázek a tomu změň src na tebou požadovaný (např. img.src = 'images/buttons/' + idImgElementu + '-g.png').
Jestli po tobě asi chtějí validní HTML, tak si taky asi dej pozor na použití eval() (které by teď už nemělo být potřeba), pravděpodobné deklarování proměnných jako globální, že to menu nebude chodit lidem s vypnutym JS. |
||
| defaultid Profil |
preca1:
tak jsem něco zkoušel, samozřejmě mi to jako js amtérovi nešlo, navíc jsem asi úplně nepochopil co mám vlastně udělat (vážně, s javascriptem se setkávám poprvé, takže nevím co má jaká funkce vracet, jak to implementovat atd..).. no, vím, že až se na to profík podívá, tak se bude za břicho popadat, ale stvořil jsem toto, nefunguje :-( if (document.images) // v prvni casti se prednacitaji zalozky (tab) pro jejich rychlejsi pouziti
{
uvodon= new Image(147,48);
uvodon.src="images/buttons/uvod-w.png";
sluzbyon= new Image(147,48);
sluzbyon.src="images/buttons/sluzby-w.png";
cenikon= new Image(147,48);
cenikon.src="images/buttons/cenik-w.png";
rezervaceon= new Image(147,48);
rezervaceon.src="images/buttons/rezervace-w.png";
galerieon= new Image(147,48);
galerieon.src="images/buttons/galerie-w.png";
uvodoff= new Image(147,48);
uvodoff.src="images/buttons/uvod-g.png";
sluzbyoff= new Image(147,48);
sluzbyoff.src="images/buttons/sluzby-g.png";
cenikoff= new Image(147,48);
cenikoff.src="images/buttons/cenik-g.png";
rezervaceoff= new Image(147,48);
rezervaceoff.src="images/buttons/rezervace-g.png";
galerieoff= new Image(147,48);
galerieoff.src="images/buttons/galerie-g.png";
}
function lightup(imgId) // pokud dojde k aktivaci onMouseover v html (tedy najeti kurzoru na zalozku) - provede se tato funkce
{
if (document.images)
{
imgOn=eval(imgId + "on.src");
document[imgId].src= imgOn;
}
}
function turnoff(imgId) // opacny pripad, tedy aktivace onMouseout (mys jde pryc ze zalozky)
{
if (document.images)
{
imgOff=eval(imgId + "off.src");
document[imgId].src= imgOff;
}
}s tím, že jsem v html změnil hodnotu, kterou vrací volání funkce lightup() a turnoff(), což jsem pravděpodobně (alespoň doufám) jako jediné pochopil správně.. <a href="index.php"><img id="uvod" src="images/buttons/uvod-w.png" width="147" height="48" alt="úvod"></a>
<a href="sluzby.php" onMouseover="lightup('sluzby')" onMouseout="turnoff('sluzby')"><img id="sluzby" src="images/buttons/sluzby-g.png" width="147" height="48" alt="služby"></a>
<a href="cenik.php" onMouseover="lightup('cenik')" onMouseout="turnoff('cenik')"><img id="cenik" src="images/buttons/cenik-g.png" width="147" height="48" alt="ceník"></a>
<a href="rezervace.php" onMouseover="lightup('rezervace')" onMouseout="turnoff('rezervace')"><img id="rezervace" src="images/buttons/rezervace-g.png" width="147" height="48" alt="rezervace"></a>
<a href="galerie.php" onMouseover="lightup('galerie')" onMouseout="turnoff('galerie')"><img id="galerie" src="images/buttons/galerie-g.png" width="147" height="48" alt="galerie"></a>//edit: když se tak nad tím zamyslím, asi nemám správně ani to html, to co jsem teď změnil.. takže jsem v koncích.. a ta validita je důležitá, tolik k tomu "asi".. |
||
| preca1 Profil |
#6 · Zasláno: 24. 2. 2013, 08:16:07
To HTML máš zřejmě dobře.
Používej var /**
* Přednačte všechny obrázky, které je potřeba
*/
var imagesToPreload = ["images/buttons/uvod-w.png", "images/buttons/sluzby-w.png"]; // seznam všech obrázků k přednačtení, doplň tam ty ostatní
var preloadImg = new Image();
for (var i = 0, length = imagesToPreload.length; i <= length; i++) {
preloadImg.src = imagesToPreload[i];
}// hash adres obrázků k jednotlivejm položkám menu, když na ně najedeš. Doplň tam ostatní. Hodnoty se oddělujou čárkou a za poslední hodnotou čárka neni
var menuItemOnImages = {
uvod: "images/buttons/uvod-w.png",
sluzby: "images/buttons/sluzby-w.png"
}
// hash adres obrázků k jednotlivejm položkám menu, když z nich sjedeš
var menuItemOffImages = {
uvod: "images/buttons/uvod-g.png",
sluzby: "images/buttons/sluzby-g.png"
}function turnoff(imgId) {
// najde element podle ID a změní jeho src
var menuItem = document.getElementById(imgd);
menuItem.src = menuItemOffImages[imgId];
}function lightup(imgId) {
var menuItem = document.getElementById(imgId);
menuItem.src = menuItemOnImages[imgId];
} |
||
| defaultid Profil |
Všimnul jsem si, že u funkce turnoff() na řádku 3 je asi chybka, imgd x imgId, ale i když jsem to opravil, pořád to nereaguje.. přikládám živou ukázku, je to index.html s obrázky a javascriptem, nastavený tak jako u reálného projektu, jen bez obsahů..
odkaz a heslo k archivu je "putty".. škoda, že filtrujete ul\oz.to, go\o.gl atd, nemám možnost to nahrát na webhosting.. a případně samotný kód: var imagesToPreload = ["images/buttons/uvod-w.png", "images/buttons/uvod-g.png", "images/buttons/sluzby-w.png", "images/buttons/sluzby-g.png", "images/buttons/cenik-w.png", "images/buttons/cenik-g.png", "images/buttons/rezervace-w.png", "images/buttons/rezervace-g.png", "images/buttons/galerie-w.png", "images/buttons/galerie-g.png"]; // seznam všech obrázků k přednačtení, doplň tam ty ostatní
var preloadImg = new Image();
for (var i = 0, length = imagesToPreload.length; i <= length; i++) {
preloadImg.src = imagesToPreload[i];
}
// hash adres obrázků k jednotlivejm položkám menu, když na ně najedeš. Doplň tam ostatní. Hodnoty se oddělujou čárkou a za poslední hodnotou čárka neni
var menuItemOnImages = {
uvod: "images/buttons/uvod-w.png",
sluzby: "images/buttons/sluzby-w.png",
cenik: "images/buttons/cenik-w.png",
rezervace: "images/buttons/rezervace-w.png",
galerie: "images/buttons/galerie-w.png"
}
// hash adres obrázků k jednotlivejm položkám menu, když z nich sjedeš
var menuItemOffImages = {
uvod: "images/buttons/uvod-g.png",
sluzby: "images/buttons/sluzby-g.png"
cenik: "images/buttons/cenik-g.png",
rezervace: "images/buttons/rezervace-g.png",
galerie: "images/buttons/galerie-g.png"
}
function lightup(imgId) {
var menuItem = document.getElementById(imgId);
menuItem.src = menuItemOnImages[imgId];
}
function turnoff(imgId) {
// najde element podle ID a změní jeho src
var menuItem = document.getElementById(imgId);
menuItem.src = menuItemOffImages[imgId];
}html: <a href="index.php"><img id="uvod" src="images/buttons/uvod-w.png" width="147" height="48" alt="úvod" /></a>
<a href="sluzby.php" onMouseover="lightup('sluzby')" onMouseout="turnoff('sluzby')"><img id="sluzby" src="images/buttons/sluzby-g.png" width="147" height="48" alt="služby" /></a>
<a href="cenik.php" onMouseover="lightup('cenik')" onMouseout="turnoff('cenik')"><img id="cenik" src="images/buttons/cenik-g.png" width="147" height="48" alt="ceník" /></a>
<a href="rezervace.php" onMouseover="lightup('rezervace')" onMouseout="turnoff('rezervace')"><img id="rezervace" src="images/buttons/rezervace-g.png" width="147" height="48" alt="rezervace" /></a>
<a href="galerie.php" onMouseover="lightup('galerie')" onMouseout="turnoff('galerie')"><img id="galerie" src="images/buttons/galerie-g.png" width="147" height="48" alt="galerie" /></a> |
||
| preca1 Profil |
#8 · Zasláno: 24. 2. 2013, 21:53:37
Chybí ti čárka v menuItemOffImages.
XHTML je narozdíl od HTML citlivý na velikost písmen. Proto, když si špatně zapsal onmouseover, na to prohlížeč nereaguje. Jinak pokud někdy budeš řešit podobný menu znova, tak by se to dalo udělat pomocí jednoho obrázku a CSS. Výhodou by bylo, že by líp fungovalo lidem/SW bez JS a obrázků a bylo by to mnohem udržovatelnější, Když budeš chtít změnit odkaz Galerie na něco jinýho (třeba Fotky), tak budeš muset vytvořit dva nový obrázky, upravit JS a HTML. V případě CSS bys prostě upravil text Galerie na Fotky. Taky existuje služba jsfiddle.net, kam zadáš JS, CSS a HTML a ona ti vytvoří funkční ukázku. |
||
| defaultid Profil |
preca1:
jaj, já jsem idiot, chybějící čárka.. Teď už všechno funguje perfektně, moc děkuju za pomoc. K tomu onmouseover, ono to stejně finálně bude v html5 (nebo alespoň v něčem, co se tomu podobá - ze zadání není jasné jakou specifikaci použít, tak si chci ulehčit práci). A to, že se to dá řešit pomocí CSS vím, možná, pokud se najde nějaký čas, tak to zkusím předělat. Ale myslím, že na to se ohled brát nebude. Za zmínění služby děkuju, určitě někdy vyzkouším. A teda ještě jednou díky, fakt jsi mi pomohl. //edit: web je validní, všechno je perfektní. |
||
|
Časová prodleva: 11 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0