onClick - button down

[funkykangaroo]

Hello,

I have gif that I want to be "pushed down" when I user clicks on it. I have it working with onmouseover, but how can I get it to work onclick?

Here's the code:

<script language="Javascript">

if (document.images) {
previous_a = new Image; previous_a.src = "/graphics/spot/previous_up.gif";
previous_b = new Image; previous_b.src = "/graphics/spot/previous_down.gif";
resources_a = new Image; resources_a.src = "/graphics/spot/resources_up.gif";
resources_b = new Image; resources_b.src = "/graphics/spot/resources_down.gif";
}

//Nav Bar MouseOver (do not change)
function rollOn(imgName, theImg) {
if (document.images) { document [imgName].src = theImg; }
}
//Nav Bar MouseOut (do not change)
function rollOff(imgName, theImg) {
if (document.images) { document [imgName].src = theImg; }
}


</script>


Located within the page:

<a href="/spot/previous.html" onmouseover="rollOn('previous', '/graphics/spot/previous_down.gif')" onmouseout="rollOff('previous', '/graphics/spot/previous_up.gif')"><img src="/graphics/spot/previous_up.gif" width="238" height="24" border="0" name="previous"></a>

Thx!

[Jona]

Hello funkykangaroo,

You can apply the same basic concept to a new function in the programming.


function clickDown(imgName, theImg)
&nbsp;{
&nbsp; if(document.images) {document.images[imgName].src=theImg;}
&nbsp; }


And use the onClick event handler.


<a href="page.html" onclick="clickDown('previous', '/graphics/previous_down.gif');">
<img src="previous.gif" alt="Previous">
</a>


[J]ona

[David Harrison]

Just building on Jona's code a little bit, were you after an effect like the one that this produces:



<a href="page.html" onmousedown="clickDown('previous', '/graphics/previous_down.gif');return true;" onmouseup="clickDown('previous', '/graphics/previous_up.gif');return true;">
<img src="previous.gif" alt="Previous">
</a>

[funkykangaroo]

Button disappears after user clicks on it.

Here's what I have

<script language="Javascript">

if (document.images) {
previous_a = new Image; previous_a.src = "/graphics/spot/previous_up.gif";
previous_b = new Image; previous_b.src = "/graphics/spot/previous_down.gif";
resources_a = new Image; resources_a.src = "/graphics/spot/resources_up.gif";
resources_b = new Image; resources_b.src = "/graphics/spot/resources_down.gif";
}

function clickDown(imgName, theImg)
{
if(document.images) {document.images[imgName].src=theImg;}
}

</script>

HTML:

<a href="/spot/previous.html" onclick="clickDown('previous', '/graphics/previous_down.gif');"><img src="/graphics/spot/previous_up.gif" name="previous" border="0"></a>

<a href="/spot/resources.html" onclick="clickDown('resources', '/graphics/spot/resources_down.gif')"><img src="/graphics/spot/resources_up.gif" width="91" height="24" border="0" name="resources"></a>

[Jona]

Did you change the src's of the images? You need to make sure you're changing to the right image when it is clicked.

And thanks lavalamp, I didn't think about the mousedown, mouseup thing. ;)

[J]ona

[funkykangaroo]

Yes, again here is my code:

<script language="Javascript">

if (document.images) {
previous_a = new Image; previous_a.src = "/graphics/spot/previous_up.gif";
previous_b = new Image; previous_b.src = "/graphics/spot/previous_down.gif";
resources_a = new Image; resources_a.src = "/graphics/spot/resources_up.gif";
resources_b = new Image; resources_b.src = "/graphics/spot/resources_down.gif";
}

function clickDown(imgName, theImg)
{
if(document.images) {document.images[imgName].src=theImg;}
}

</script>



------------------


<a href="/spot/previous.html" onclick="clickDown('previous', '/graphics/previous_down.gif');" onmouseup="clickDown('previous', '/graphics/spot/previous_up.gif');return true;"><img src="/graphics/spot/previous_up.gif" name="previous" border="0"></a>

<a href="/spot/resources.html" onclick="clickDown('resources', '/graphics/spot/resources_down.gif');return true;" onmouseup="clickDown('resources', '/graphics/spot/resources_up.gif');return true;"><img src="/graphics/spot/resources_up.gif" width="91" height="24" border="0" name="resources"></a>

[Vladdy]

Anyone heard of :focus???

[funkykangaroo]

Basically, I want a gif to act like a submit button does when you click on it

[Jona]

Originally posted by Vladdy
Anyone heard of :focus???

Nope. :D

Yes, but you can go ahead and enlighten us and give us another reason not to use JavaScript, Vladdy. I'll listen. ;)

[J]ona

[funkykangaroo]

figured it out

thx

[Jona]

Originally posted by funkykangaroo
figured it out

Uh well, I'm glad you did!

Vladdy, I'd still like to hear about your alternate solution through CSS. :)

[J]ona

[David Harrison]

I would recommend using CSS since then non-JS browsers can see the effect. I've used CSS rollovers on www.fsg-uk.com

However since funkykangaroo has sorted it out now I guess there's no more reason for us to keep suggesting stuff.

[Jona]

Originally posted by lavalamp
However since funkykangaroo has sorted it out now I guess there's no more reason for us to keep suggesting stuff.

I still want to see how Vladdy proposes to change an image and use the :focus pseudo-class. :)
You can always learn something new from people, even if you already know how to do it a different way.

[J]ona

[David Harrison]

Perhaps Vladdy was only trying to emulate your initial script where the image only changed onclick. I'm not 100% sure how the :active works but could that be used in conjunction with :focus to replace the JavaScript?

[Vladdy]

Sorry, I meant :active pseudo-class for mousedown action:

www.vladdy.net/Demos/SubmitImage.html

When applying to anchors you would not need IEFixes.htc (see www.vladdy.net/Demos/IEPseudoClassesFix.html for description) since the stoopid one does recognize the pseudo classes with anchors

[Jona]

Originally posted by Vladdy
Sorry, I meant :active pseudo-class for mousedown action

That was a totally wicked-cool idea, Vladdy! Never would have thought of it, myself. Seeing as I rarely ever use background-position. Looks like there's more than one use for everything!

[J]ona

[Vladdy]

Originally posted by Jona
That was a totally wicked-cool idea, Vladdy! Never would have thought of it, myself. Seeing as I rarely ever use background-position. Looks like there's more than one use for everything!

[J]ona
Neither had I ;) .... there was a "Sliding Doors" article on ALA .... mainly avoids image preloading problem...

[Jona]

Oh! Well, I have honestly been paying more attention to ALA as of late--but I must not have seen that article. I'll be paying more and more attention to useful sites like that from now on. :)

[J]ona