On Click Image Change..

[HabboIslands]

I was creating a website, but I need the links to change from one look to another when I click on it, im not sure if this is written in HTML or what, please help me!

BTW: Not on mouse over..

[Iiro]

<script type="text/javascript">
function changeImg(img, newimg) {
img.src = newimg;
}
</script>

<img onclick="changeImg(this, 'blah.gif')" src="blah1.gif">

[HabboIslands]

Thanks! One last question, how do I make it into a link? lol

[Twey]

<a href="page.html">
<img src="image.png" onclick="this.src='image-clicked.png';">
</a>

[HabboIslands]

It works, but the image has a black box around it.. What do I do?

BTW, thanks!

[Twey]

In the head:
<style type="text/css">
a img, a.img {
border-style: none;
}
</style>In the body:
<a class="img" href="page.html">
<img src="image.png" onclick="this.src='image-clicked.png';">
</a>

[Emeralda]

Sorry for bumping this old thread, it was the first thing google has shown >.<

Anyway, I'm trying to make the spoiler tags show images instead, but it seems I don't really know how to implement this codes to the spoiler code. It properly show spoiler1.png to spoiler2.png change, but it's a one time thing and it just stays at spoiler2.png no matter if it's hidden or not.

Original:


<dl style="margin:20px; margin-top:5px; border: 0px solid #3bbfe7;" class="codebox">

<dt style="height:22px;">
<strong>Spoiler:</strong>
<input type="button" value="Show" style="width:50px; font-size:10px; margin:0px; padding:0px;" onclick="var spoiler = $(this).parents('.codebox').find('.content').toggle('slow');
if ( spoiler.toggle == 'none' ) { spoiler.toggle = 'none'; this.value = 'Show'; } else { spoiler.toggle = 'show'; this.value = 'Hide'; };
return false;">
</dt>
<dd>
<div class="content" name="spoiler" style="display: none;">{param}</div>
</dd>

</dl>



After some edits:

<script type="text/javascript">
function changeImg(img, newimg) {
img.src = newimg;
}
</script>

<dl style="margin:20px; margin-top:5px; border: 0px solid #3bbfe7;" class="codebox">

<dt style="height:22px;">
<input type="image" src="/images/buttons/spoiler1.png" onclick="var spoiler = $(this).parents('.codebox').find('.content').toggle('slow');
if ( spoiler.toggle == 'none' ) { spoiler.toggle = 'none'; this.value = 'Show'; changeImg(this, '/images/buttons/spoiler1.png');} else { spoiler.toggle = 'show'; this.value = 'Hide'; changeImg(this, '/images/buttons/spoiler2.png'); };
return false;">
</dt>
<dd>
<div class="content" name="spoiler" style="display: none;">{param}</div>
</dd>

</dl>

Another version:

<dl style="margin:20px; margin-top:5px; border: 0px solid #3bbfe7;" class="codebox">

<dt style="height:22px;">
<input type="image" src="/images/buttons/spoiler1.png" onclick="var spoiler = $(this).parents('.codebox').find('.content').toggle('slow');
if ( spoiler.toggle == 'none' ) { spoiler.toggle = 'none'; this.src = '/images/buttons/spoiler1.png';} else { spoiler.toggle = 'show'; this.src = '/images/buttons/spoiler2.png'; };
return false;">
</dt>
<dd>
<div class="content" name="spoiler" style="display: none;">{param}</div>
</dd>

</dl>


Yet another approach:

<dl style="margin:15px; margin-top:5px; border: 0px solid #3bbfe7;" class="codebox">
<dt>
<img src="/images/buttons/spoiler1.png" onclick="var spoiler = $(this).parents('.codebox').find('.content').toggle('slow');
if ( spoiler.toggle == 'none' ) { spoiler.toggle = 'none'; this.src = '/images/buttons/spoiler1.png';} else { spoiler.toggle = 'show'; this.src = '/images/buttons/spoiler2.png'; };
return false;" />
</dt>
<dd class="content" name="spoiler" style="display: none;">{param}</dd>
</dl>


EDIT: Fixed, optimised and what's not~ Though I'm not sharing it if no one asks me for it, since no one cared to help me either >.>