Nagy kép megjelenítése linken hover esetén

Anonymous · 2005. Dec. 20. (K), 13.16

Sziasztok

Az innerHTML-lel kapcsolatban lenne kérdésem, méghozzá annyi, hogy az IE5+ böngészök tudják-e kezelni? Olvastam itt a forumon, hogy vannak bongeszok melyek nem szeretik.A konkrét script elvileg muködik az IE4+ ban de az oldal megjelenítésénél hibát ír ki a megjelenítö(IE5).

A kódrészlet a következö:(forras : http://www.dynamicdrive.com/dynamicindex5/linkfloaties.htm)

function showfloatie(thetext, e, optbgColor, optWidth, optHeight)
 {
   var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
   var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
   var floatobj=document.getElementById("dhtmlfloatie")

   //...floatobj stilus es egyeb beallitasok
   
   floatobj.innerHTML=thetext
   
   var floatWidth=(floatobj.offsetWidth>0)? floatobj.offsetWidth : floatobj.style.width;
   var floatHeight=(floatobj.offsetHeight>0)? floatobj.offsetHeight : floatobj.style.width;
   var winWidth=(document.all&&!window.opera)? ietruebody().clientWidth : window.innerWidth-20;
   var winHeight=(document.all&&!window.opera)? ietruebody().clientHeight : window.innerHeight;
   
   e=window.event? window.event : e
   floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
   if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
      floatobj.style.top=dsocy+5+"px"
   else
      floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
   slowhigh(floatobj)
}

Ha nem akkor mi módon lehetne ezt helyettesíteni, hogy muködjön?
Köszönöm

■

HTML, CSS, JavaScript, Ajax

csirip

Mit szeretnél?

Jano · 2005. Dec. 20. (K), 14.31

Mit szeretnél csinálni? Mert lehet ezt lehet egyszerűbben pl pusztán CSS-sel. Ha leírod és jól tippeltem, leírom, hogyan.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Képeket külön ablakban

Anonymous · 2005. Dec. 20. (K), 14.42

Szia

A terv egyszerü: ha a linkre viszem az egeret akkor egy külön ablakban (nem is ablak hanem egy "doboz") jelenjen meg a kép amire a link mutat és mikor az kurzort elmozditom a linkrol a doboz tunjon el.Ha tudsz ra jobb modszert azt megkoszonnem

A script amit irtam amugy teljesen jol mukodik nalam Mozilla/FireFoxban csak duhit, hogy a topicnyitoban leirt problemaba utkoztem.

koszonom

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Más-más böngészők

mefi · 2005. Dec. 20. (K), 21.00

Biztos van rá másik megoldás is, keress rá valahol. Tapasztalataim szerint minden böngészőn máshogy működnek a scriptek. Pl. ha azt szeretném, hogy a javascript:abalakom(12); nyissa meg egy új ablakban a valami.php?id=12 -t. Minden böngésző kezeli, kivéve IE. Létezik persze itt is középút, de ahhoz mélyebben kell ismerni az adott nyelvet gondolom.

üdv:
mefi
http://mefi.be

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Más-más böngészők

Anonymous · 2005. Dec. 21. (Sze), 01.51

A fentebb vázolt kódot (javascript:abalakom(12); nyissa meg egy új ablakban a valami.php?id=12) milyen szempontból nem kezeli az IE?

Természetesen kezeli, ha az a bizonyos "abalakom" nevű javascript tisztességesen meg van írva. A böngészők nincsenek 100%-ig felkészítve a hozzánemértésből fakadó gányolásra.

Persze egyszerűbb kijelenteni, hogy ezvagyaz a böngésző eztvagyazt nem tudja. De tudja, sőt, manapság kifejezetten egyszerűbb "krosszbrózer" scripteket írni, mint például 4-5 éve volt.

Gyulus

A hozzászóláshoz regisztráció és belépés szükséges
új téma

:hover

Jano · 2005. Dec. 21. (Sze), 03.12

Gondoltam :)

Beteszed a képet a linkbe és alapból eltünteted, majd a :hover segítségével elővarázsolod. Kis pozicionálás trükkel megfűszerezed és máris tálalható.


<a href="" class="kepeslink">Kep1 <img src="" alt=""></a>


a.kepeslink {
 color:blue;
 position:relative;
}

a.kepeslink img {
 display:none;
 position:absolute;
}

a.kepeslink:hover {
 color:orange;
}

a.kepeslink:hover img {
 display:block;
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

remek

Anonymous · 2005. Dec. 21. (Sze), 11.39

Jano, nagyon szépen köszönöm, sokat segítettél. Ez tényleg egyszerübb megoldás és nem kell az a hosszú script se.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

valami gond van

Anonymous · 2005. Dec. 21. (Sze), 12.37

Szia Jano

Kiprobaltam a rendszert, pozicionáltam,átszabtam a saját színekre,stb, mukodik; Mozilla/Firefox alatt minden OK. De az IE5 tovabbra sem jelenit meg semmit :(

és még egy megj: a képek megjelenítése rendben de a CLASS=kepeslink stilusu elemek a megjelenített képeken is látszódnak, azaz nem tünnek el a háttérben mint a többi html elem.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Mutasd

Jano · 2005. Dec. 21. (Sze), 13.19

Ha tudod tedd ki valahova, úgy könnyebb.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

nem kell kirakni

Anonymous · 2005. Dec. 21. (Sze), 14.09

Szia

A CLASS=kepeslink elemek atlatszosagat megoldottam, en voltam a bena :-/
Nagyon egyszeru pelda,direkt csinaltam egy probat; ez a html se fut le normalisan az IE5-ben(Mozilla OK):

<HTML>
<HEAD>
<STYLE>

a:hover {
 color:orange;
 border:1px solid red;
}

</STYLE>
</HEAD>
<BODY>
<P><a href="" >Kep1 </a></P>
<P><a href="" >Kep2 </a></P>
<P><a href="" >Kep3 </a></P>
<P><a href="" >Kep4 </a></P>
</BODY>
</HTML>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Nálad a hiba

Jano · 2005. Dec. 21. (Sze), 14.51

Ha arra gondolsz, hogy a szín ugyan átvált de a keret nem, akkor az egy bug. Ha display:block-ot is megadsz a linknek akkor a keret kirajzolást is megcsinálja.

Ha semmi sem trténik: akkor valószínűleg azzal az IE5-tel van a hiba. Esetleg valami beállítás vagy kompatibilitási probléma...nem tudom. Még azt se mondanám, hogy azért mert mondjuk MAC-es IE5-ot probalod mert annak is támogatnia kell az a:hover-t.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Rendben

Anonymous · 2005. Dec. 21. (Sze), 14.59

Koszi, a display:block -kal mar jol muködik. :)
Köszönöm hogy foglalkoztál a problémámmal.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

vegre

Anonymous · 2005. Dec. 21. (Sze), 16.28

Szia

Megvan hogy mi okozta a problememat:)
az a.kepeslink:hover {color:orange;} hoz be kellett meg irnom a display:block-ot. Igy mar rendben mukodik az IE-ben is:)
Meg egyszer koszonom a segitseget

A hozzászóláshoz regisztráció és belépés szükséges
új téma

meg egy kis problema:)

Anonymous · 2005. Dec. 22. (Cs), 12.35

Ujra kell irjak meghozza a pozicionalassal kapcsolatban. Ha a
a.kepeslink:hover img
-ben meg szeretnem adni a kep helyzetét a position: -nel a kovetkezo problema lép fel az IE5-ben: a kép megjelenik viszont amikor elveszem a kurzort a linkrol a kép nem tunik el.
Nekem a fixed lenne a legjobb pozicionálási módszer, de utánanéztem itt a weblaborban és látom ezt csak emulálni lehet. De nem is ez a nagyobb probléma hanem az hogy a kép nem tünik el. Amennyiben kihagyom a position: , mintegy varázsszóra rendesen müködik az oldal.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

IE bug

Jano · 2005. Dec. 22. (Cs), 13.53

Az IE-ben vam egy bug a hoverrel kapcsolatban: ha maganak az a elemnek nincsen olyan tulajdonsaga ami megvaltozik, akkor amikor lemegy rola az eger a gyerek elemre (itt img) nem csinalja meg a stilus valtast.

Fixed posicionalast nem csak IE5 de IE6 se tud. Viszont olyat tudsz csinalni, hogy minden kep ugyanott jelenjen meg. Tedd a linkekeket egy kozos div elembe, es ne az a elemnek ad a position:relative szabalyt hanem ennek a befoglalo DIV-nek. Gondolom ertheto a dolog: az abszolut pozicionalashoz a helyzetet mindig a legkozelebbi pozicionalt befoglalo elemhez kepest nezi.

IE5-re teszteles nalad azt jelenti, hogy IE6 melett nézed, hogy IE5-on is jo-e? Vagy nincs is IE5-nel nagyobb a gepeden? Erdemes elgondolkodni azon, hogy ma mar csak IE6-ot tamogasson a fejleszto mert elegge lecsokkent az ie6 alatti verziok szama. Persze ehhez sajat statisztika kell. De IE6 már kapcsolhato ugynevezett szabvany modba és akkor nem kell szivni a kulonbozo doboz modellekkel.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

<Nincs cím>

Anonymous · 2005. Dec. 23. (P), 11.50

Igen, tényleg az tag tulajdonságváltozásaitól függ a dolog, viszont amit felfedeztem hogy color: jellemzö változtatása esetén is fennáll a bug

a.kepeslink {font-family:Tahoma,Arial;font-size:12px;font-weight:normal;color:#724302}

a.kepeslink:hover {font-family:Tahoma,Arial;font-size:12px;font-weight:normal;color:#aaaaaa}

de ott egye a fene!Ha megváltoztattam a weight-et vagy a size-t akkor már ment.

Az IE5-re tesztelés annyit jelent h IE5 van a gépen. Az kellemes lehet ha az IE6 ezzel az általad emlíŧett szabvany moddal meg tudja jeleniteni a dolgokat rendesen, csak felmerült bennem h az oldal alkalmazkodjon a felhasználóhoz, vagy fordítva. Mert gondolom a szabvány módba váltáshoz valamit kell csinálnia a felhasználónak. És vajh kiírhatom-e az oldalra: "hogyha normálisan szeretnéd nézni akkor IE6+ ban válts szabvány módra" mondatot?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

nem a júzeren múlik

Táskai Zsolt · 2005. Dec. 23. (P), 12.11

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
tehát a doctype-on múlik.
Tasi

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Azt hiszem sikerült

Anonymous · 2005. Dec. 28. (Sze), 14.26

Sziasztok

Köszönöm a doctype infot. Végül valahogy sikerült megoldanom h a képek normálisan megjelenjenek a hoverrel a Jano által említett módszerrel.
Számomra már az is érdekes felfedezés volt, hogy amennyiben a kepeslink osztályba tartozó elemeket nem egy már pozicionált HTML elembe tettem, akkor hiaba pozicionaltam (static,absolute,relative) a kepeslink:hover img -et, nem működött rendesen az egész-értsd a kép nem tűnt el pedig az a elemnek volt olyan tulajdonsága, amely megváltozott.

Aztán a fent említett elemet,amely tartalmazza a kepeslinkeket, pozicionaltam relative, a kepeslink elemeket pedig absolute és csak jobbról adtam meg fix helyet (right:10px) és így már normálisan megjelenik a hover a képpel, majd el is tűnik a kurzor linkről való elmozgatása esetén.Igaz most IE6-on próbáltam ki:)

ami működik nálam IE6-on:

a.kepeslink {
 color:blue;
}

a.kepeslink img {
 display:none;
}

a.kepeslink:hover {
 color:orange;
}

a.kepeslink:hover img {
 display:block;
 position:absolute;
 right:10px;
}

<P style="position:relative">
  <a href="" class="kepeslink">Kep1 <img src="" alt=""></a>
  ...
</P>

köszönöm a segítséget.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Az elozobol valamit kihagytam

Anonymous · 2006. Jan. 3. (K), 13.12

Szoval par hozzászolással ezelott irtam hogy a color jellemzo valtozasa esetén is fennáll a bug. Tehát az

a.kepeslink {
 color:blue;font-size:12px;
}
/*es*/
a.kepeslink:hover {
 color:orange;font-size:10px;
}

esetén müködik az elöbb vázolt összeállítás IE6, sot IE5-ben is.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Egy aprócska kérdés még ...

Anonymous · 2006. Jan. 13. (P), 13.14

Szóval már csak egyetlen gondom van:)
Két css file van az egyikben IE-s a másikban !IE-s verzio
Az oldal elején a megfelelöt töltöm be:

<LINK REL="stylesheet" HREF="/stylesnotIE.css" type="text/css">
<!--[if IE]>
     <link rel="stylesheet" type="text/css" href="/stylesIE.css" />
<![endif]-->

Az IE verzioban következö a képeslink stílus hover esetén:

a.kepeslink:hover img {
 display:block;
 position:absolute;
 right:10px;
}

A nem IE-s ben pedig

a.kepeslink:hover img {
 display:block;
 position:fixed;
 right:10px;
 top:10px;
}

Amennyiben a fentebb leírt metódust alkalmazom IE esetén akkor kétszer deklarálodik a a.kepeslink:hover stílus: elöször top-paraméterrel utána top nélkül. És úgy tünik, hogy a második inicializálásnál a top nem törlödik, megmarad 10px-en és ez azt eredményezi, hogy az IE-ben is érvényesíti a hatását: a kép a szülö taghez viszonyítva fentröl és jobbról 10px-en jelenik meg,tehát amikor a lap aljára görgetem a scrollbart már nem fogom látni a képet.

Amennyiben csak az IE-s verziót töltöm be az oldal elején, akkor minden remekül müködik.

Hogy lehet ezt a problémát kiküszöbölni, a top-ot "kiiktatni"?

köszönöm

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés