Autor Zpráva
Dix
Profil
Dobrý den, mám problém s :
Mam v rade na jednom radku 4 obrazky a pod nima dalsi 4... a jsou uzavreny v tabulce
nasledny priklad:
img img img img
img img img img
potrebuji kdyz na nejaky z nich najedu mysi aby se zobrazil jiny obrazek, ktery by prekryval vsechny (jako aby byl nad nimi) ale nepresahoval danou tabulku. (aby to fungovalo jako odkaz)
Moc bych prosil o nejaky strucny vysledny kod! Diky
Mistr
Profil
Já bych na to použil CSS styly (možná i JavaScript, ale zpočátku bych to zkoušel jen přes CSS). Asi bych to udělal přes vlastnost z-index (a pozicování?).

Co na to kolegyně a kolegové?
Mistr
Profil
Dix
Ten obrázek, co se má přes všechny roztáhnout, je neustále jeden? Nebo se bude měnit v závislosti, na kterém "malém" obrázku zrovna bude ukazovátko myšky?
Mistr
Profil
<html>
<head>
<title>Změna obrázků</title>
<script>

</head><body>
<table id="tabulka">
<tr>
<td><img src="maly1.jpg" title="Malý obrázek 1" onmouseover="tabulka.background='velky1.jpg'" onmouseout="tabulka.background.z-index='-10" /></td>
<td><img src="maly2" title="Malý obrázek 2" /></td>
<td><img src="maly3" title="Malý obrázek 3" /></td>
<td><img src="maly4" title="Malý obrázek 4" /></td>
</tr>
<tr>
<td><img src="maly5" title="Malý obrázek 5" /></td>
<td><img src="maly6" title="Malý obrázek 6" /></td>
<td><img src="maly7" title="Malý obrázek 7" /></td>
<td><img src="maly8" title="Malý obrázek 8" /></td>
</tr>
</table>
</body>
</html>

Pozn.: to onmouseover a onmouseout se pak nakopíruje i ke všem ostatním obrázkům. Já to tam neuváděl, abych nesnižoval přehlednost celého kódu.

Takhle bych to nějak viděl ten kód. Ty JavaSriptové prvky (jsou vytištěny kurzívou), tedy onmouseover a onmouseout budou (s největší pravděpodobností) špatně. Tedy ne snad ani tak logikou jako spíš syntaxí. Tím se Ti omlouvám, že můj navržený kód není dokonalý. V JavaScriptu nejsem rozhodně žádný velký borec.

Pokud někdo přijde s něčím lepším, pak klidně použij jeho a můj kód nech spadnout na propadliště dějin.
Mistr
Profil
onmouseover="tabulka.background='velky1.jpg'" onmouseout="tabulka.background.z-index='-10"
Bude to syntaxí blbě - velmi by mě překvapilo, kdyby to bylo v pořádku.
Dix
Profil
hm... jj ten obrazek bude pokazdy jinej (rozmery 570*100) ty maly obrazky (asi 50*20).
Bravo bravo tleskam velkemu Mistrovi funguje to na 99% !!!
akorat potrebuji aby se to zobrazovalo nahore (ted se to zobrazuje pod tema malyma obrazkama)!!! Ja jsem lama s JS ani trochu neumim ... diky
Mistr
Profil
funguje to na 99% !!!
???? Cože? Ono to funguje? To není možné...
Dix
Profil
rikam funguje ale je to pod tema malyma obrazkama... (co s tim abych to dostal nahoru pls)
Dix
Profil
jo musel jsem zmenit akorat onmouseout a dal jsem tam dalsi obrazek ktery je cerny... takze pote co s mysi "utecu" se to vrati na ty puvodni maly... (takze neni videt v mezerach to pozadi)
Mistr
Profil
Dix
Zkus rozšířit událost onmouseover takto:

místo
onmouseover="tabulka.background='velky1.jpg'"

napiš
onmouseover="tabulka.background='velky1.jpg'; tabulka.background.z-index='1'"
Mistr
Profil
musel jsem zmenit akorat onmouseout
Jakou změnou jsi provedl? Co v události onMouseOut bylo špatně?
Dix
Profil
ne nefunguje to s tim ; tabulka.background.z-index='1'" porad je to pod tim ....

takhle jsem to zmenil aaa.gif je cerny obrazek tak aby se kdyz s mysi utecu


<tr>
<td><img src="glude.gif" title="Malý obrázek 1" onmouseover="tabulka.background='membersglude2.gif'; tabulka.background.z-index='1'" onmouseout="tabulka.background.z-index='-10'" /></td>
<td><img src="glude.gif" title="Malý obrázek 2" onmouseover="tabulka.background='membersglude3.gif'" onmouseout="tabulka.background='aaa.gif'"/></td>
<td><img src="glude.gif" title="Malý obrázek 3" onmouseover="tabulka.background='membersglude4.gif'" onmouseover="tabulka.background.z-index='auto'" onmouseout="tabulka.background='aaa.gif'" /></td> </tr>
<tr>
<td><img src="glude.gif" title="Malý obrázek 4" onmouseover="tabulka.background='membersglude5.gif'" onmouseout="tabulka.background.z-index='-10" /></td>

<td><img src="glude.gif" title="Malý obrázek 5" onmouseover="tabulka.background='membersglude6.gif'" onmouseout="tabulka.background.z-index='-10" /></td>
<td><img src="glude.gif" title="Malý obrázek 6" onmouseover="tabulka.background='membersglude7.gif'" onmouseout="tabulka.background.z-index='-10" /></td>

</tr>
</table>

ja nevim delam asi neco spatne nebo nevim... ael porad to mam pod tim !
Dix
Profil
jak vidis zkousel jsem menit ruzny hodnoty z-indexu auto +/- ale porad je to pod tema malyma obrazkama ...
Mistr
Profil
I když dáš ten z-index (u onmouseover) třeba 10?
Mistr
Profil
Každopádně to číslo by mělo být v apostrofech. Máš je na té klávese, s níž píšeš přehlásku k písmenkům. Musíš ale stisknout také Shift. Já tu klávesu mám například vlevo od BackSpace.
Mistr
Profil
Další varianta, co mě napadla:
onmouseover="tabulka.background='velky1.jpg'; this.background.z-index='1'"

Změnu máš pro lepší přehlednost vysázenou tučně.
Mistr
Profil
onmouseover="tabulka.background='velky1.jpg';tabulka.background.z-inde x='1'"

A nebo tam nedělej mezeru (před tím středníkem). Tak co, funguje něco z toho?
Dix
Profil
bouzel porad to je pod tim( navic pokud tam vlozim kamkoliv z-index tak se to prestane zobrazovat i pod tim)... ja vim je to na palici ale kazdopadne diky!Nebudu te uz otravovat ale kdyby te nahodou neco napadlo tak dej pls vedet dik!
Mistr
Profil
ja vim je to na palici
Není to na palici, jenom já jsem blbej. Background je pozadí, takže je celkem logické, že bude pod těmi obrázky.
Mistr
Profil
Má ta Tvoje tabulka nějaké rozměry (například 20px apod.) nebo je to udávané jen v procentech? Já jen, že by se pak mohlo zkusit nějak překrýt tu tabulku obrázkem, budeš-li znát přesnmé rozměry.
Dix
Profil
jo ma 570 sirka/130 vyska a nebude s e menit ...
Mistr
Profil
Mimochodem, teď mě napadá, musíš ty obrázky mít uzavřené v tabulce?
Dix
Profil
no takhle nechci aby se to nejak soupalo ven.... nemusi to byt uzavreny... ale kdyz jsem to zkousel pres css tak se to ruzne rozlejzalo... ale budu rad za kazdy pokus !!!
Mistr
Profil
Ještě mě napadlo zkusit nastavit pozadí tabulce a buňce. Moment, prověřím to.
Radek Hrabůvka
Profil
Dix kdyz na nejaky z nich najedu mysi aby se zobrazil jiny obrazek, ktery by prekryval vsechny
Jestli dobře rozumím, tak to bude "pakárna", kde se budu muse opatrně plížil myší mezi náhledy, pokud si budu chtít nechat zvětšit prostřední obrázek?

Zkus upravit http://css.interval.cz/priklady/priklad-30-1.htm - je to skoro ono. Uprav pozici, kde se velký obrázek má zjevit, je v div.kontejner:hover div.fotka, div.kontejnerHover div.fotkaprohlížečích.
, já jsem testoval při eft:50px; top:80px; aby došlo k požadovanému překrytí. Bez jakýchkoliv dalších úprav kódu je zvětšený obrázek zobrazen, pokud je nad ním nebo náhledem kurzor. Nezapomeň si zkopčit pro fungování v IE *.htc soubor, já to testoval jen v IE, ale mělo by to chodit ve všech běžných prohlížečích.
Mistr
Profil
Dix
Tak to díky Radku Hrabůvkovi máš.
Dix
Profil
JJ už to jede díky moc !
Mistr
Profil
Dix
Hodíš sem, kdyžtak, odkaz na stránku, v níž jsi tento prvek použil, abysme se na to mohli mrknout? Nechceš-li, nemusíš.
Dix
Profil
az bude kompletne hotova... urcite zejtra
Toto téma je uzamčeno. Odpověď nelze zaslat.

0