[klein]

Många hemsidor har idag bild när man gör en mouseover på t.e.x en tabelln? Någon som vet ett bra exempel?

[Kurdix]

en div som är absolute positionerad vid onmouseover?

[allstars]

kolla in overLib

[jgabor]

Jag skulle rekommendera er att titta in "CSS Sprites"-tekniken, som är rätt effektiv och bra att utnyttja på en hög-traffickerad sida...

http://www.alistapart.com/articles/sprites/

[tartareandesire]

Originally posted by jgabor@Feb 29 2008, 12:51
Jag skulle rekommendera er att titta in CSS Sprites-tekniken, som är rätt effektiv och bra att utnyttja på en hög-traffickerad sida...
http://www.alistapart.com/articles/sprites/

Håller med, däremot kanske det inte är så relevant för mindre sajter (dvs. de allra flesta).

[jgabor]

Originally posted by tartareandesire@Feb 29 2008, 12:04
Håller med, däremot kanske det inte är så relevant för mindre sajter (dvs. de allra flesta).

Nej, det är sant. Men klein verkar ha varit med hyfsat länge, och kan mycket väl driva en hög-traffickerad sida. Och det var även just därför jag sa att den passade sig bäst för just hög-traffickerade sidor. Sen är det ju inte helt fel att göra "rätt" direkt från start.

Annars kan man ju (ifall CSS Sprites är lite för svårt att greppa), dela upp sin bild i flera mindre delar, och sedan sätta en klass för bilden, med en tillhörande hover:

a#bild {
	background-image: url(bild.jpg);
}
a#bild:hover {
	background-image: url(bild_hover.jpg);
}

[klein]

Jag vill ha något som är lätt och implemtera.. Helst typ något


onmouseover="laddabild( "10002");" Sedan laddar man bilden, när man dra mousen över länken.. Annars kommer sidan bli väldigt trögladda, då jag skall visa ca 1000 artikelreader per sida..

Overlib verka mer för typ prattbubblor, utan vill ha mer åt prisjakt hållet. Dvs man har en produktlista, så kan man hålla mouse överlänken och då ser man en DIV vid länken.

Frågan hur laddar man DIV:en utan att ladda om sidan?

[tartareandesire]

Originally posted by klein@Mar 1 2008, 09:28
Jag vill ha något som är lätt och implemtera.. Helst typ något

onmouseover=laddabild( 10002); Sedan laddar man bilden, när man dra mousen över länken.. Annars kommer sidan bli väldigt trögladda, då jag skall visa ca 1000 artikelreader per sida..
Overlib verka mer för typ prattbubblor, utan vill ha mer åt prisjakt hållet. Dvs man har en produktlista, så kan man hålla mouse överlänken och då ser man en DIV vid länken.
Frågan hur laddar man DIV:en utan att ladda om sidan?

1000 artikelrader per sida låter ganska onödigt tycker jag? Oavsett så går det att skapa objekt dynamiskt med hjälp av Javascript, bara du vet var de ska hamna, exempelvis genom att läsa av var på skärmen man klickat då du förmodligen behöver absolut positionering.

[klein]

Ursprungligen postat av tartareandesire

1000 artikelrader per sida låter ganska onödigt tycker jag? Oavsett så går det att skapa objekt dynamiskt med hjälp av Javascript, bara du vet var de ska hamna, exempelvis genom att läsa av var på skärmen man klickat då du förmodligen behöver absolut positionering.

Att de går vet jag! Mer intresserad av bra exempel som visa hur man gör... Har inte hållit med Javascript massor med år... Jag misstänker att Layer tagarna som fanns i Netscape 4.0 inte är aktuella längre..:-)

[Magnus_A]

Den osynliga div:en laddas vid laddning av sidan. Sen visas den genom att man kopplar ett script till eventet onmouseover för visning och onmouseout för att ta bort den igen. Till exempel genom att ändra z-index.

Positioneringen sker genom att man läser av musens position och där finns det lite att klura med emedan de olika webbläsarna har egna uppfattningar om hur musens positionen ska registreras.

Koden kan typ se ut så här för att fånga musens position:
// set dynamic coords
function get_mouse(e)
{
var x,y;

if(nav || n_6) x=e.pageX;
if(iex) x=event.x+document.body.scrollLeft;

if(nav || n_6) y=e.pageY;
if(iex)
{
y=event.y;
if (document.documentElement && !document.documentElement.scrollTop) y+=0;
else if (document.documentElement && document.documentElement.scrollTop) y+=document.documentElement.scrollTop;
else if (document.body && document.body.scrollTop) y += document.body.scrollTop;
}

if(iex || nav)
{
skin.top=y+yyy;
skin.left=x+Xoffset;
}

if(n_6)
{
skin.top=(y+yyy)+"px";
skin.left=x+Xoffset+"px";
}
nudge(x);
}

// avoid edge overflow
function nudge(x)
{
var extreme,overflow,temp;

// right
if(iex) extreme=(document.body.clientWidth-popwidth);
if(n_6 || nav) extreme=(window.innerWidth-popwidth);

if(parseInt(skin.left)>extreme)
{
overflow=parseInt(skin.left)-extreme;
temp=parseInt(skin.left);
temp-=overflow;
if(nav || iex) skin.left=temp;
if(n_6)skin.left=temp+"px";
}

// left
if(parseInt(skin.left)<1)
{
overflow=parseInt(skin.left)-1;
temp=parseInt(skin.left);
temp-=overflow;
if(nav || iex) skin.left=temp;
if(n_6)skin.left=temp+"px";
}
}