Mouseover-lösning med bilder, utan img och javascript?

Yo!

Jag kör för tillfället följande snutt för att byta bild vid mouseover:

// css:
#byt {
	width:				150px;
	height:				40px;
	display:			block;
	border:				0;
	background:			url(bild1.jpg);
}

#byt:hover {
	background:			url(bild2.jpg);
}

// preloadscript:
(new Image()).src = "bild2.jpg";

// bild:
<a id="byt" href="hej.html"></a>

Det funkar, men på pc med IE så händer det tydligen att bilden blinkar till lite innan den visas ibland.
Har ni någon smartare lösning på allting? Är traditionella img/javascript att föredra ändå? ;P

Kanske en lösning där man har båda bilderna i en fil och bara flyttar position på den vid hover? Någon som har förslag på nåt sånt i så fall?

Taxi!

Jag fixade en background-position och det verkar funka, men om någon har andra förslag med två bilder så tas det tacksamt emot... Jag sparar nämligen bildfilerna från en automatisk uppslice:ning så man skulle spara några klick om man slapp specialbehandla dessa bilder.

du använder dig av background-position nu lr ?
http://wellstyled.com/css-nopreload-rollovers.html

du kan ju med php/asp lr dyl sätta ihop bilderna så slipper du göra det manuellt om du har många bilder.

Jo det är sant. Men är det inte lika o-optimalt att köra ett script varje gång man hämtar en bild? Iofs så behöver man väl bara göra denna ihopsättningen en gång. Vad brukar du använda för php-kod sl0k?

Jo som sagt så behöver du bara göra det en gång, om du inte tänkt att ha dynamiska bilder förstås..
Finns flertalet funktioner i GD för att sätta ihop bilder m.m ..

Nu har jag ett nytt problem. Jag vet inte hur jag ska beskriva det för det händer bara på en server... ibland :)

Jag använder följande:

// css:
#byt {
	width:				150px;
	height:				40px;
	display:			block;
	border:				0;
	background:			url(bild1.jpg);
}

#byt:hover {
	background-position:0 -40px;
}

// bild:
<a id="byt" href="hej.html"></a>

Det funkar i alla läsare jag har provat till mac, men i IE på pc (som alltid ska strula), så försvinner bilden helt ibland, lite slumpartat känns det som, när man går över den eller ibland när man går ifrån den. Sedan kommer den tillbaka igen.

Vad kan tänkas vara lurigt? Det har som sagt bara upptäckts på en server och har funkat där nån enstaka gång, men en sån sak borde väl inte vara server-relaterad :o

Nån som har idéer?

Jag har varit med om liknande problem förut, vilket löstes genom att se till att servern inte skickade med någon Vary-header för bilder till IE. Jag löste det med .htaccess då. Du kan ju testa och se om det blir nån skillnad. :)

Shyrre! ...men hur gör man det? :)

Jag skapade en fil som heter .htaccess och lade den på servern i mappen där sidan jag kör ligger. Jag satte rättigheterna till 644 på den för att en annan htaccess-fil hade det såg jag ;P

Kod i .htaccess:

BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

Det verkar inte ha gjort nån skillnad, men allt är nog inte på plats än...

Taxi!

r/ det kanske inte ens går att köra .htaccess på den servern. Hur får jag reda på det? Att ändra i serverns konfigurationsfil vet jag inte om webbhotellet går med på.

Tja...du kan ju kolla om det finns en Vary-header för dina bilder med http://www.rexswain.com/httpview.html, och om den försvinner om du skickar med:

Mozilla/4.0 MSIE

...som User-Agent.

Får upp detta när jag testade med en bild:

Header (Length = 272):

HTTP/1.1·200·OK(CR)(LF)
Cache-Control:·no-cache(CR)(LF)
Content-Length:·3799(CR)(LF)
Content-Type:·image/jpeg(CR)(LF)
Last-Modified:·Thu,·02·Mar·2006·22:03:39·GMT(CR)(LF)
Accept-Ranges:·bytes(CR)(LF)
ETag:·"80ef1b29453ec61:e90"(CR)(LF)
Server:·Microsoft-IIS/6.0(CR)(LF)
Date:·Sat,·04·Mar·2006·00:02:32·GMT(CR)(LF)
Connection:·close(CR)(LF)
(CR)(LF)

Nåt man kan ha användning för? Eftersom jag fick upp meddelandet så funkar inte min .htaccess med andra ord?

Jag ser ingen Vary-header där. Alltså är det inte problemet. För övrigt funkar .htaccess bara på Apache-servrar vad jag vet. ;)

Jag vet inte riktigt vad som är problemet. Du kan ju testa om hasLayout hjälper...

#byt { zoom:1; }

Nä, nu ser jag vad som kan vara problemet:

bassebhu skrev:

Cache-Control:·no-cache(CR)(LF)

Plocka bort den där headern så borde det funka bättre. Hur du modifierar HTTP headers på en IIS-server får du fråga någon annan om! ;)

zcorpan skrev:

Nä, nu ser jag vad som kan vara problemet: Plocka bort den där headern så borde det funka bättre. Hur du modifierar HTTP headers på en IIS-server får du fråga någon annan om! ;)

Allright! Jag har inte heller en aning. Det är inget som man kan sätta i en fil, utan måste göras i server-inställningarna? I så fall får webbhotellet kontaktas...

Tack för hjälpen :)