ugrás a tartalomhoz

Diszkrét rollover vs. IE

Dj Faustus · 2006. Szep. 12. (K), 04.05
Szevasztok, problémám a következő lenne:
adottak az alábbi Javascript függvények:
function getElementsByClass(name) {
  var found = 0;
  var elems = new Array();
  var alltags = document.getElementsByTagName("*");
  if (alltags) {
    for (j=0; j < alltags.length; j++) {
        if (alltags[j].className==name) {
          elems[found++]=alltags[j];
        }
    }
  }
  return(elems);
}
function addEventHandler(obj, eventType, handler) {
	if (window.opera && obj.addEventListener) {
		obj.addEventListener(eventType, handler, false);
		return true;
	} else if (obj.addEventListener) {
		obj.addEventListener(eventType, handler, true);
		return true;
	} else if (obj.attachEvent) {
		var r = obj.attachEvent("on"+eventType, handler);
		return r;
	} else {
		return false;
	}
}
function mover() {
	var outimgs = new Array;
	var outimgsname = new Array;
	var overimgs = new Array;
	var over = getElementsByClass('over');
	for (j=0; j < over.length; j++) {
		outimgs[j] = new Image();
		overimgs[j] = new Image();
		outimgs[j].src = over[j].lastChild.src;
		overimgs[j].src = over[j].lastChild.src.replace ('\.jpg','_on.jpg');
		outimgsname[j] = over[j].lastChild.name;
		over[j].setAttribute('onmouseover', 'document.images[\''+outimgsname[j]+'\'].src=\''+overimgs[j].src+'\';');
		over[j].setAttribute('onmouseout', 'document.images[\''+outimgsname[j]+'\'].src=\''+outimgs[j].src+'\';');
	}
}
addEventHandler(window,'load',mover);
Ez lényegében egy rollover effektet valósít meg az alábbiakhoz kódokban:
<a href="#" class="over"><img src="elso.jpg" name="elso" alt="Első kép" /></a>
, ahol az onmouseoverhez tartozó képek nevének végén az _on utótag van.

Opera és Firefox alatt működik is rendesen. IE alatt viszont nem, annak ellenére, hogy az IE Developer Toolbar szerint az onmouseout és onmouseover események rendesen hozzáadódnak (megfelelő értékekkel) az <a> taghez.

Vajon mi lehet a probléma?
 
1

:P IE alatt

toxin · 2006. Szep. 12. (K), 06.27
nem lehet setAttribute-al js eseménykezelőket node-okra akasztani, ill. lehetni lehet lásd mellékelt IE Developer Toolbar, csak effektíve nem mennek

lásd még http://weblabor.hu/forumok/temak/14569#comment-31914

üdv t
2

egyébként nem lett ez elbonyolítva ? :)

toxin · 2006. Szep. 12. (K), 07.15
mint prototype evangelista :)) persze azzal mutatom de akkor is

function mover() {
    $$('.over').each(
        function(elem,idx){
             elem.onmouseover = function(){
                Element.down(this).src = Element.down(this).src.replace('.jpg','_on.jpg'); 
             }
             elem.onmouseout = function(){
                Element.down(this).src = Element.down(this).src.replace('_on.jpg','.jpg'); 
             }
        }
    )
}

Event.observe(window,'load',mover,true);
http://toxin.hu/weblabor/rollover/test6.html (lásd forrása)

ui: Element.up/down/prev/next DOM navigációs metódusok, most kerültek bele a pr-be 4-5 napja http://script.aculo.us/downloads , $$ css kiválasztók már 2 hete :)

üdv t
7

De...

Dj Faustus · 2006. Szep. 12. (K), 14.13
...az előtöltés miatt lett egy kissé (nagyon) kusza lett az egész (és igen a setAttribute volt a ludas).
Egyébként ha jobban belegondolok ez az előtöltés nem is annyira létszükséglet (a képek pár kByte-osak csak).

Prototype nélkül így néz ki a mover függvény:
function mover() {
	var over = getElementsByClass('over');
	for (j=0; j < over.length; j++) {
		over[j].onmouseover = function(){
			document.images[this.lastChild.name].src = this.lastChild.src.replace('.jpg','_on.jpg'); 
		}
		over[j].onmouseout = function(){
			document.images[this.lastChild.name].src = this.lastChild.src.replace('_on.jpg','.jpg'); 
		}
	}
}
Köszönöm.
3

rollover, de min?

ashnur · 2006. Szep. 12. (K), 09.45
Nem lehet, hogy nem valósul meg a rollover event? valami el is takarhatja.. nem néztem meg alaposabban, lehet marhaság amit írok.

mellesleg rá kéne jönni már, hogy gyönyörü rollovert lehet mindenfele javascript meg egyéb trükkök (behaviorok és .htc fileok) nélkül is, csak CSS-el.
4

IE6-on csak horgonyra

toxin · 2006. Szep. 12. (K), 09.58
sőt még IE7-in xar ha ez igaz
http://www.webdevout.net/browser_support_css.php?uas=IE6-IE7-FX1_5-OP9#support-css2pseudoclasses-hover

htc-nélkül hogy raksz div-re hover-t? (elnézést Grétsy László nyelvőrúrtól és kollégáitól :) )
5

ki mondta...

ashnur · 2006. Szep. 12. (K), 13.57
...hogy divre rakok hovert?
azt mondtam, hogy rollovert csinalok. termeszetesen az <A>-ra rakom, mert IEben maskent nem menne. sot. meg atlatszo PNG-t is hasznalhatok ha jolesik, es ott se lesz se invalid css se javascript se behavior.

egyebkent az IE7 rol szolo hireket inkabb innen szerezd be:
http://blogs.msdn.com/ie/archive/2006/02/02/523679.aspx

"We enabled :hover on all elements, not just on <a> tag"
6

bocsánat

toxin · 2006. Szep. 12. (K), 14.07
férleolvastam

ezt

mellesleg rá kéne jönni már, hogy gyönyörü rollovert lehet mindenfele javascript meg egyéb trükkök (behaviorok és .htc fileok) nélkül is, csak CSS-el.


így

mellesleg rá kéne jönni már, hogy gyönyörü hovert lehet mindenfele javascript meg egyéb trükkök (behaviorok és .htc fileok) nélkül is, csak CSS-el.


elnézést :) [blush] igazad van természetesen
8

el van nezve :)

ashnur · 2006. Szep. 12. (K), 15.47
ez legyen a legnagyobb tevedesed :D
9

lécci példát!

Anonymous · 2006. Szep. 12. (K), 20.04
Esetleg tudnál példát erre a .png megoldásra? Kössz.
11

pelda.

ashnur · 2006. Szep. 12. (K), 23.56
hat egy nagyon ronda oldal, de vegulis peldanak pelda: http://djace.com/

van egy pngfix.js az oldalon, de ahhoz semmi kozom, a menu az mukodik kikapcsolt jsel is: http://www.djace.com/

meg kell mondjam, hogy csak annyi a kozom az oldalhoz, hogy hasznalhatova tettem IE alatt is:) szoval keretik ne ez alapjan megitelni :D
a menu is pl egyaltalan nem vakbarat, meg ilyesmik..:)

mellesleg ennel meg lehet oldani szebben is, siettem meg minden:)

a kozeljovoben fogok kesziteni egy step-by-step xhtml/css leirast egy vizszintes png menuhoz, azt majd felteszem netre:) ez mar regi tervem, csak keves az ido... mondjuk most majd lesz ugy 1-2 heten belul
10

re

toxin · 2006. Szep. 12. (K), 20.13
"We enabled :hover on all elements, not just on <a> tag"


megnézted itt mi van?
http://www.webdevout.net/browser_support_css.php?uas=IE6-IE7-FX1_5-OP9#support-css2pseudoclasses-hover
az van hogy ugyan benne van IE7-ben, de pillanatnyilag egy nagy rakást se ér :P IE , majd akkor szóljál ha egy szép zöld pipát látsz ott, mint jobbra tőle fx, és opera alatt

ettől függetlenül majd ha lesz IE7 , mindenféle beta, és rc jelzés nélkül akkor derül ki, legyen igazad :)

üdv t
12

persze, hogy megneztem.

ashnur · 2006. Szep. 12. (K), 23.57
de nem arrol beszeltem ami most van egy betaban hanem arrol, hogy mi lesz. szerintem jo lesz:)