Link to home
Start Free TrialLog in
Avatar of 98fatboyrider
98fatboyrider

asked on

07 May 12 15 - Change button image with click event

The code below will swap images when moused over. Is there a way to make the button un-clickable and set the image to Home2.png after it's been clicked?
<a href="default.aspx" onmouseover="rollover('home1','Home2.png')" onmouseout="rollover('home1','Home1.png')"><img src="App_Themes/MasterPage/Images/Home1.png" alt="Home" name="home1" /></a>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 98fatboyrider
98fatboyrider

ASKER

Clicking the button now sets the image to Home1.png and is un-clickable however, the link is no longer working. Thoughts?
You want :

un-clickable
and
link working

?
Yes. The buttons are on the master page. I'd like to click the button, go to the default page, then set the buttons image I just clicked to Home1.png and make it un-clickable. Sorry for any confusion.
Okay, making the button un-clickable isn't a deal breaker. I would, however, like to click the button, be directed to the default page, then set the buttons image I just clicked on to Home1.png. Again, the buttons are on the master page.
I'd like to see the page you are talking about because I do not understand how you think a link can work if it is un-clickable.  Post a link to the page please.

The way a link works is you click it to activate it. If it is not clickable what event is supposed to fire it?

If we are missing something you need to provide a more definitive specification for the behavior you are looking for.  
That is not necessary

Change the code on the server to not make a link when you are on the page that the link normally goes to

So in default.aspx have

<span><img src="App_Themes/MasterPage/Images/Home1.png" alt="Home" name="home1" /></span>

and on other pages have the link
try this,

add one hidden field

and inside script set javascript function to change the value of that hidden field.

<a href="default.aspx" onmouseover="rollover('home1','Home2.png')" onmouseout="rollover('home1','Home1.png')" onclick="setvalue('home1');rollover('home1','Home2.png');"><img src="App_Themes/MasterPage/Images/Home1.png" alt="Home" name="home1" id="home1" /></a>
<input type="hidden" id="hiddenvm">

<script type="text/javascript">

function setvalue(tempimg)
{
document.getElementById('hiddenvm').value=tempimg;
}

function rollover(timg1,timg2,timg3)
{
if(document.getElementById('hiddenvm').value=='home1')
{
document.getElementById('hiddenvm').src='images/home2.png';
}
else
{
document.getElementById('hiddenvm').src='images/'+timg2;
}
}
</script>

Syntax might not correct this is just an idea.

hope this helps you..
Sorry use the below script forget to change variable name.

<script type="text/javascript">

function setvalue(tempimg)
{
document.getElementById('hiddenvm').value=tempimg;
}

function rollover(timg1,timg2,timg3)
{
if(document.getElementById('hiddenvm').value=='home1')
{
document.getElementById('home1').src='images/home2.png';
}
else
{
document.getElementById('home1').src='images/'+timg2;
}
}
</script>
How would that help when the link changes the page the script is on?

It would only work if you submit the form that has the hidden field...
javascript wont require form submission
we are just assigning value and retrieving it.
Assigning a value to a hidden field on a page that is replaced with another page will not keep the hidden field unless it is in a submitted form that is sent back with the hidden field intact.

A cookie would work, but there is no need for ANY script since the page knows which links are to be active and which not.

in default.aspx:

<span><img src="home.gif"></span>
<a href="about.aspx" onmouseover...."><img src="about.gif"></a>
<a href="contact.aspx" onmouseover...."><img src="contcact.gif"></a>

and on about:

<a href="default.aspx" onmouseover...."><img src="home.gif"></a>
<span><img src="about.gif"></span>
<a href="contact.aspx" onmouseover...."><img src="contcact.gif"></a>



I've requested that this question be deleted for the following reason:

Not enough information to confirm an answer.
What do you mean?

Either you did not describe the problem clearly so we gave you answers based on wrong assumptions OR we answered your question in many different ways.

Please explain why the answers we gave did not solve your problem.
AmanBhullar,

I was a CV way back when the program began so I understand the situation you are in.
With respect:
Not enough information to confirm an answer.

Is an incorrect conclusion.  The question as presented was answered, and the follow up was a failure on the part of the member, not the Experts.

Please have a moderator review your decision.

Cd&
Mod: this one is up to The asker. I cannot  recommend onze answer over annoteer since it is not clear why the asker wanted to delete.
I believe the original question was answered by leakim971 in http:#a36966004

That may not be what the user wanted, but the followup lacks clarity, as does the reason for the delete.  I'm not sure exactly what the user wants, and I don't think they do either, so it may be that a continuation with clearer requirements to bring it to a more satisfactory conclusion is possible.

Cd&
And so did I here: http:#a37082476
Would have been great to participate in a split