Hvordan skriver jeg dette i xhtml og css?

nr. 1: Hvorfor ikke Javascript? el. DHTML som du bruger der...? (lav koden sådan her

<a href="../fotografier.html">
<img src="images/design_01.jpg" alt="Billede" onmouseover="this.src='images/design2_01.jpg'" onmouseout="this.src='images/design_01.jpg'" />
</a>

nr. 2: Meget avanceret og unødvendigt... (Kan ingengang finde på din links procedurer...):
XHTML:

<div id="billede">
</div>

CSS

#billede {
background-image: url(../images/design_01.jpg);
border: none; // bare fjern det hvis du vil have borders. Personligt hader jeg det.. :)
}

#billede:hover {
background-image: url(../images/design2_01.jpg);
}

Nummer to løsning er ikke crossbrowser!

Vil du lave en crossbrowser-løsning men uden jscript skal du gøre således:

<a href="din_url" id="billede">
</a>

og css:

#billede {
background-image: url(../images/design_01.jpg);
border: none;
display:block;
width: bredden på dit billede;
height: Højden på dit billede;
cursor: default;
}

#billede:hover {
background-image: url(../images/design2_01.jpg);
}

Så burde det virke, også crossbrowser.

Og husk een ting: target-attributten findes ikke på anchor-objectet i xhtml.

http://www.netmechanic.com/news/vol6/html_no1.htm
http://diveintoaccessibility.org/day_23_providing_text_equivalents_for_images.html


I korte træk:
Alternativ tekst: er for de folk der slår billeder fra. Det er til tekstbrowsere og til folk med små forbindelser. De findes stadig - store dele af Afrika er endnu ikke kommet på nettet. Alternativ tekst bruges som en kort beskrivelse til f.eks. et billede.

Titler: kan derimod bruges på næsten alle html-elementer og bruges som ekstra information.

De to attributter skal ikke fra ses som værende en og samme funktion.

Hvem, hvad og hvor der bruges hvilke skal jeg ikke kunne sige. Så jeg kan ikke fortælle dig hvor meget de to attributter benyttes, da dette er bestemt af hvor dovne folk er.

Altså det er til en aflevering - begyndte på multimediedesigner uddannelsen her til sommers. Vores rammer er at vi skal KUN bruge xhtml og css.

Men ud fra hvad jeg ser, så må den anden løsning være den rigtige.

Dog kan jeg ikke se hvorhenne i koden den linker henne. Hvordan får jeg det ind?

Men en bedre løsning vil selvfølgelig være:

#myImage img {
	width: 100px;
	height: 100px;
}

#myImage {
	background: url(...) center center no-repeat;
}

#myImage:hover {
	background: url(...) center center no-repeat;
}

<a href="#" title="Her er mit feriebillede fra Umbugistan" id="myImage">
	<img src="blank.gif" alt="Feriebillede fra Umbugistan" />
</a>

Så laver man heller ikke om på blok elementer, der er plads til alternativ tekst og man kan have bedre css-kontrol

Alt-teksten kan tilføjes ethvert element, blot man bruger title-attributten.

men alt og title attributerne er jo heldigvis ikke det samme...

næh... men hvor stærkt brug er der egentlig for alt-teksten længere?