Jojoxx.net

 

 

AnvändareAnvändare
Besökare just nu: 29
SnabblänkarSnabblänkar
JavaScript-arkivet
Perl
FAQ
Sök på Jojoxx.netSök på Jojoxx.net



Meny med bildväxling 3

Exempel

Röd Grön Blå
 Imageswap 

Kod


<script type="text/javascript">
/* Detta script finns att hämta på http://www.jojoxx.net och
   får användas fritt så länge som dessa rader står kvar. */

if (document.images) {
	button_1_off=new Image;
	button_1_off.src="images/empty.gif";
	button_1_red=new Image;
	button_1_red.src="images/red.gif";
	button_1_green=new Image;
	button_1_green.src="images/green.gif";
	button_1_blue=new Image;
	button_1_blue.src="images/blue.gif";
}

function rollIn(imgName, state) {
	if (document.images) {
		document[imgName].src=eval(imgName + state + ".src");
	}
}

function rollOut(imgName) {
	if (document.images) {
		document[imgName].src=eval(imgName + "off.src");
	}
}
</script>

<table border=0>
<tr>
<td align=center width="80"><a href="imageswap3.html" onMouseover="rollIn('button_1_', 'red')" onMouseout="rollOut('button_1_')">Röd</a></td>
<td align=center width="80"><a href="imageswap3.html" onMouseover="rollIn('button_1_', 'green')" onMouseout="rollOut('button_1_')">Grön</a></td>
<td align=center width="80"><a href="imageswap3.html" onMouseover="rollIn('button_1_', 'blue')" onMouseout="rollOut('button_1_')">Blå</a></td>
</tr>
<tr><td> </td><td align=center><img src="images/empty.gif" border=0 name="button_1_" alt="Imageswap" width=50 height=30></td><td> </td></tr>
</table>

Kommentar

Scriptet växlar mellan flera utseenden av en och samma bild beroende på vilken länk användaren pekar då. Kan vara bra som en förklarande till länkar.

,