Byta text mot tumnagelbilder

Nedan finns en kodsnutt hur listandet av arrangemang görs idag (Varje arrangemang har en tillhörande bild). Vad jag skulle vilja ha hjälp med är att med hjälp av ett javascript byta ut texten till bilder.

Antingen så kan man naturligtvis ladda om hela sidan och stoppa in bilder där, men det borde finnas ett sätt att byta ut.

<div style="clear: both;">
<ul>
	<li class="event-category"><h3>Brädspel ( 5 )</h3>
		<ul id="catid-3" class="sub-item">
			<li id="itemid-225"><a href="event_info.asp?eID=225">Army of Frogs</a></li>
			<li id="itemid-214"><a href="event_info.asp?eID=214">SM i Settlers of Catan</a></li>
		</ul> <!-- .sub-item -->
	</li> <!-- .event-category -->
	<li class="event-category"><h3>Butik ( 3 )</h3>
		<ul id="catid-7" class="sub-item">
			<li id="itemid-212"><a href="event_info.asp?eID=212">Basar!</a></li>
			<li id="itemid-188"><a href="event_info.asp?eID=188">Juntan</a></li>
			<li id="itemid-215"><a href="event_info.asp?eID=215">The Gottick Roadshow</a></li>
		</ul> <!-- .sub-item -->
	</li> <!-- .event-category -->
</ul>
</div>

En lösning jag har funderat på är att man byter "visibility" på klasserna, fast jag har mina tvivel till detta.

 <li id="itemid-212"><a href="event_info.asp?eID=215">
<span class="imageholder"><img src="thegotticroadshow.jpg" /></span>
<span class="textholder">The Gottick Roadshow</span></a>
 </li>

Behöver hjälp med idéer och möjliga lösningar...

Hej

Hej
Nu vet jag inte om jag förstått allt, men du vill alltså
ha två olika lägen på sidan? Ett med bara text, och
ett med bilder istället för text.

Vad jag tror problemet med att ändra attributet
visibility är att texten förvisso försvinner, men
platsen den tar upp fortfarande finns kvar. Det
blir så att säga ett tomrum på sidan där texten var.

Därför kanske attributet display är bättre att
ändra då även platsen försvinner. Du kan då
sätta display:none för att ta bort och display:block
eller display:inline för att göra synlig igen.

För att ändra class-attributet med javascript kan
du göra något så här tror jag:

function getCssRules(doc) {
if (!doc.styleSheets) return;
var theRules = new Array();
if (doc.styleSheets[0].cssRules)
theRules = doc.styleSheets[0].cssRules
else if (doc.styleSheets[0].rules)
theRules = doc.styleSheets[0].rules
else return;
return theRules;
}

Denna funktion returnerar en array av alla regler.
Detta kan du sedan använda på följande sätt när
du ska komma åt ett visst attribut, när du ändrar
från text till bilder:

function changeFromTextToImages() {
rules = getCssRules(document);
rules[5].style.display="none";
rules[6].style.display="block";
}

förutsatt att regel 6 är klassen textholder
och regel 7 är klassen imageholder.

(källa http://www.quirksmode.org/dom/changess.html)

mvh Simon