| Autor | Zpráva | ||
|---|---|---|---|
| DEF Profil * |
#1 · Zasláno: 15. 6. 2011, 15:23:32
Hledal jsem doufám poctivě, ale nenašel odpověď, zda je možné odstranit následující:
Obrázek jako odkaz, který se mění při onmouse, respktive onmosedown ale přes něj napozicovaný text (a je mi jedno, jestli se bude text chovat také jako odkaz či nikoli) - mělo to být menu. Vše funguje jen do doby, než myší najedu na text přes obrázek, v tu chvíli se projeví příkaz onmouseout a vrátí se původní obrázek, do doby, než zase myší sjedu z textu. Kód jsem ořezal jen pro tento dotaz, tak mě prosím nekamenujte. Předem íky za vysvětlení, zda to takto vůbec může fungovat a pokud ano, kde dělám chybu? <table> <tr><td> <a HREF='2011/australie.html'><img src='stuj.jpg' onmouseover="this.src = 'priprav.jpg'" onmouseout="this.src = 'stuj.jpg'" onmousedown="this.src = 'jed.jpg'" alt='strom'></a><div style='position: relative; left: 40%; top: -50%'>australie</div> </td></tr> </table> |
||
| vospunt Profil |
#2 · Zasláno: 15. 6. 2011, 22:03:47
já osobně bych použil jquery na obrázek i text použil mouseleave
jak je uvedeno na příkladě zde : http://api.jquery.com/mouseleave/ (dole vpravo to žluté ...) takto chceš aby to fungovalo ... zlutý jako text a světle zelený jako obrázek ... vyzkoušej si to a uvidíš ;) pokud chceš ještě pomoct s implementací jQuery řekni |
||
| jenikkozak Profil |
#3 · Zasláno: 15. 6. 2011, 22:23:08
DEF:
Kvůli menu bych nestahoval javascriptovou knihovnu. Nebude lepší použít obrázek na pozadí odkazu a měnit jej pomocí pseudotřídy hover? (Povídání je na stránce Jak zdokonalit odkazy.) |
||
| vospunt Profil |
#4 · Zasláno: 15. 6. 2011, 22:34:22
nebo využít tohle :
<a href="někam.html"
onmouseover="document['obrazek'].src = 'druhy.gif' ;"
onmouseout="document['obrazek'].src = 'prvni.gif' ;">
<img src="prvni.gif" name="obrazek">
</a>ale já se přikláním k jQuery ... protože když se s tím naučíš využeješ např. jednoduchou stavbu AJAXu + nespočetné množství pluginů ... grafy, tabulky, slidery, dialogy atd atd ... pokud vytváříš nový web a chceš ho mít "IN" je opravdu postupovat s dobou a nepoužívat zastarelé metody jako je např iframe atd .... |
||
| vospunt Profil |
#5 · Zasláno: 15. 6. 2011, 22:35:14 · Upravil/a: vospunt
Oprava kódu
<a href="někam.html"
onmouseover="document['obrazek'].src = 'druhy.gif' ;"
onmouseout="document['obrazek'].src = 'prvni.gif' ;">
<img onmouseover="this.src = 'druhy.gif' ;"
onmouseout="this.src = 'prvni.gif' ;" src="prvni.gif" name="obrazek">
</a> |
||
| jenikkozak Profil |
#6 · Zasláno: 15. 6. 2011, 22:44:24
vospunt:
„ale já se přikláním k jQuery“ Prosím. Proč dělat věci jednoduše, když to jde složitě? |
||
| vospunt Profil |
#7 · Zasláno: 15. 6. 2011, 22:54:35
jQuery je jednoduchý na použití a proč nevyužít jeho funkcí k vývoji dalších aplikací na webu když to usnadní práci
|
||
| pcmanik Profil |
#8 · Zasláno: 15. 6. 2011, 23:38:16
vospunt:
Zase vznika dalsi flame... Ak ma jQuery velke vyuztie v projekte, je spravne ho pouzit, ale na takto trivialne veci, ako je par efektov a par eventov sa skutocne neoplati tahat cely framework. |
||
| vospunt Profil |
#9 · Zasláno: 16. 6. 2011, 06:12:51
proto jsem poslal skript kterým by šlo vyřešit tento problém ale že jsem řekl svůj názor ...
|
||
| _es Profil |
#10 · Zasláno: 16. 6. 2011, 07:21:08 · Upravil/a: _es
|
||
| joe Profil |
#11 · Zasláno: 16. 6. 2011, 09:08:54
vospunt:
„jQuery je jednoduchý na použití a proč nevyužít jeho funkcí k vývoji dalších aplikací na webu když to usnadní práci“ Usnadní, pokud se používá rozumně. DEF: Na to nepotřebuješ JavaScript. HTML <a href="2011/australie.html">australie</a> CSS a {
background: url(stuj.jpg);
}
a:hover {
background: url(priprav.jpg);
}
a:active {
background: url(jed.jpg);
}
|
||
| DEF Profil * |
#12 · Zasláno: 16. 6. 2011, 13:57:05
Děkuju všem za příspěvky, překvapila mě rychlost i rozmanitost návrhů. Zkoušel jsem způsob od joeho, ale obrázek se vykreslil jen pod textem odkazu :-( pak jsem se zkusil ponořit do jQuery, ale i když jsem našel návod v češtině, nedal jsem to (byť by to byla asi nejelegantnější cesta). Nakonec jsem vyzkoušel návrh zápisu od vospunta a to funguje, byť je zápis dlouhý a představa 20-ti položek menu je ubíjející, funguje a asi bude muset, nejméně do doby, než pochopím strukturu jQuery :-)
Pokud je někdo z jmenovaných dívka, tak se omlouvám a domyslete si správnou koncovku ;-) Ještě jednou všem díky!!! |
||
| vospunt Profil |
#13 · Zasláno: 16. 6. 2011, 14:08:09
ale pokud chceš pomoct s jQuery napiš mi na ICQ
|
||
| DEF Profil * |
#14 · Zasláno: 16. 6. 2011, 14:32:01
vospunt:
Děkuju za nabídku, ale nejdřív do toho musím proniknout a pak teprve žádat o pomoc. |
||
| vospunt Profil |
#15 · Zasláno: 16. 6. 2011, 16:35:48
sem taky takovej :D prve to zkouším ... 1000x a potom se ptám ale s jQuery u mě můžeš cokoli ... jo a kámoš má web ... www.jquery-navod.cz ... český návod na jquery ;)
|
||
| Bubák Profil |
#16 · Zasláno: 16. 6. 2011, 17:11:05
DEF:
„Zkoušel jsem způsob od joeho, ale obrázek se vykreslil jen pod textem odkazu“ Klasika, naštěstí je pomoc jednoduchá, stačí odkaz deklarovat jako blokový a zadat mu rozměry, nejčastěji podle velikosti obrázků, případně jde využít opakování obrázků, background-repeat.
a {
display: block;
width: 120px;
height: 50px;
line-height: 50px; /* vertikální centrování textu */
background: red url(stuj.jpg);
}
a:hover, a:focus {
/* Co se nemeni, znova nedeklarujeme! */
background: orange url(priprav.jpg);
}
a:active {
background: green url(jed.jpg);
}jQuery neřeší tvůj problém s tím, že když je myš nad textem odkazu, není nad obrázkem. Problém je, že v případě využití JS, což je i jQuery, se obrázek nezmění uživatelům, kteří upřednostňují ovládání z klávesnice před myší. Další problémy nastanou při vypnutých obrázcích, při vypnutých skriptech a pri vypnutém CSS. V případě menu doporučuji použít na změnu obrázků CSS řešení, udělat menu přístupné při vypnutých obrázcích, nebo vypnutém CSS je pro takto stavěné menu triviální. |
||
| vospunt Profil |
#17 · Zasláno: 16. 6. 2011, 18:44:27
tady říkáš když vypnu css tak mi jQuery nebude chodit ale ty to chceš řešit přes CSS ... ježiš ... to je jasný že kdo si to vypne nepoběží jak má ale .... kolik procent lidí to dělá a kolik procent lidí je normálních uživatelů kteří ani o funkci vypnutí JS atd ani neví !! a jquery to řeší ! onmouseleave reaguje po odjetí z obrázku i když přes obrázek je text !!
|
||
| pcmanik Profil |
#18 · Zasláno: 16. 6. 2011, 18:50:45 · Upravil/a: pcmanik
vospunt:
jQuery nic neriesi, su to obycajne js eventy. Ale zjavne si jeden z tych, ktory ani nevedia, ze nejaky JavaScript existuje. jo a kámoš má web ... www.jquery-navod.cz Na ten web by som sa radsej neodvolaval, je tam tolko zlych rad a chyb az to neni mozne. Oficialna dokumentacia je ovela lepsia. A ak neovladas anglictinu, tak potom nemas v tomto obore co robit. |
||
| vospunt Profil |
#19 · Zasláno: 16. 6. 2011, 18:57:31
angličtinu ovládám já taky hledám pouze na anglických stránkách ale tazatel nevěděl a říkal že anglicky tomu nerozumněl tak jsem poradil
a pokud ty myslíš že nic neumím a máš třeba tento dotaz : http://diskuse.jakpsatweb.cz/?action=vthread&forum=8&topic=122271&page=-1 a nevíš si rady ... tak základním problémem bývá kodování souboru ... pokud použiješ př UTF8 a do toho dáváš cp1250 udělá to bordel ... ale dobře tvrdej nick dělá tvrdýho chlapa |
||
| pcmanik Profil |
#20 · Zasláno: 16. 6. 2011, 19:04:09
vospunt:
Fuu neviem o com hovoris, ale nevadi. Tam bola ina chyba a to ta, ze som mal zlu verziu dreamveaweru a ulozila ten subor zle a nedalo sa s tym nic spravit. A ze myslim ze ty nic nevies, tak sa odvolavas na moju chybu? To je ako dokaz toho, ze vsetko ovladas? A zbytocne sa nenavazaj, ten nick pouzivam uz asi 6 - 7 rokov, a nie kvoli tejto diskusii. Za to ked sa pozreme na nejaky tvoj topic Tak je jasne, ze ten js absolutne neovladas, nakolko by si vedel. Ze miesto attr staci pouzit this.href. |
||
| Chamurappi Profil |
#21 · Zasláno: 16. 6. 2011, 20:01:01
Reaguji na vospunta:
„říkáš když vypnu css tak mi jQuery nebude chodit“ Neříká, Bubák by takový nesmysl nikdy nenapsal. „kolik procent lidí je normálních uživatelů“ Při dobře vymyšleném návrhu je úplně jedno, kolik jich je. „pokud použiješ př UTF8 a do toho dáváš cp1250 udělá to bordel“ U textu OK těžko.
Příspěvky [#15] a [#17] až [#21] smažu. Nesmyslné osobní výpady nebudou tolerovány. |
||
| Bubák Profil |
#22 · Zasláno: 16. 6. 2011, 20:25:10
vospunt:
V prvé řadě mám neodbytný dojem, že jsi doposud nepochopil, jaký problém DEF řeší. Tak extra pro tebe znova a pomalu: - nad obrázkem je napozicovaný text - pokud se najede myší na text nad obrázkem, dojde k opuštění obrázku a a obrázek se změní zpět - zmíněný problém není řešitelný tím, že se místo JavaScriptu použije JavaScriptová knihovna - řešení problému existuje, základem je mít obrázek a text ve stjném elementu, v tomto případě bych doporučil odkaz, a měnit obrázek podle událostí onmouseover a onmouseout tohoto elementu - odkaz, která jsi sem dal [#2], problém neřeší, protože do obrázku nemůžeš vložit žádný element Problémový DEFův JS kód a nastínění CSS řešení: <style>
a.css {
display: block;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
background: red url(http://teststranek.kvalitne.cz/css-rollover/ano-ne.png);
font-size: 18px;
}
a.css:hover, a.css:active, a.css:focus {
background-color: green;
background-position: bottom;)
}
</style>
<h1>JavaScript</h1>
<a href=#>
<img width=30 height=30 border=0
src="http://www.jakpsatweb.cz/images/druhy.gif"
onmouseover="this.src = 'http://www.jakpsatweb.cz/images/prvni.gif';"
onmouseout="this.src = 'http://www.jakpsatweb.cz/images/druhy.gif';"><br>
<span style="position: relative; top: -30px; left: 0px; font-size: 18px">text</span></a>
<h1>CSS</h1>
<a class="css" href=#>text</a> |
||
| vospunt Profil |
#23 · Zasláno: 16. 6. 2011, 20:27:55
říkáte nerejpat to zaprvé zadruhé pochopil sem to a za třetí mouseleave to řeší protože lze použít na jakýkoli element klidně i div img atd ...
|
||
| Bubák Profil |
#24 · Zasláno: 16. 6. 2011, 20:59:51
vospunt:
„mouseleave to řeší protože lze použít na jakýkoli element klidně i div img atd ...“ Pochop konečně naprosto základní věc, a to, že když je myš na elementu, který je napozicovaný nad obrázek, tak je nad elementem, který je napozicován nad obrázek a proto není nad obrázkem. Pokud tvrdíš něco jiného, prosím o živou ukázku, která bude využívat mouseleave obrázku, nad obrázkem budeš mít napozicovaný text a řešení nebyde vykazovat problém, kvůli kterému DEF položil dotaz. |
||
|
Časová prodleva: 13 let
|
|||
0