[Rasmus]

Jag sitter med ett litet problem efter en uppdatering på min sida. För att inte skäpa ner XHTML koden med preloads eller javascript, men ändå inte få något reaktionstid på mina rollovers. (altså att det är en laddningstid från det att man håller musen över en bild tills det att effekten visas). Så har jag gjort en egen lösning på problemet.

Lösningen är att jag har en bild som är dubbelt så hög som den ska vara, övre halvan av bilden visas när man inte har musen över, och nedre halvan visas när man har musen över, på så sätt blir det inte några extra laddningstider. För att nu inte få en massa XHTML kod som sökmotorerna läser har jag valt att ha all CSS:en i en fil som inkluderas.

XHTML koden blir:

<a href="/news/" id="img1"></a>

CSS koden blir:

#img1
{
	width: 96px;
	height: 134px;
	overflow: hidden;
	background: url(../images/menu/news.gif) top left no-repeat;
	display: inline;
	float: left;
}
 
#img1:hover
{
	background-position: bottom left;
}

Problemet jag nu har är att sidan inte valideras med denna kod eftersom jag inte har något objekt som länkas inom <a></a>. Men OM jag har något innanför <a></a> så syns inte det, eftersom det ligger en bild ovanför. Vilket är samma sak som dold text. Skriver jag rätt anchortext där har jag ju dold text för att förbättra min SEO, vilket inte är tillåtet. Jag kan också ha ett annat tecken t.ex. en punkt bara, vilket också är dold text, men om det räknas som fusk vet jag inte. Problemet är då att detta bör försämra min SEO iom att jag får fel anchortext till den sidan. Jag har länkar till sidorna med rätt anchortext i min sitemap också, men jag tycker att det bör försämra iom att dessa rollover bilder ligger högst upp på alla sidor.

Någon som har något förslag på hur jag skulle kunna göra för att få rätt på detta?