Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

07 May 12 15 - Change button image with click event

Posted on 2011-10-13
23
Medium Priority
?
210 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:98fatboyrider
  • 7
  • 3
  • 3
  • +3
19 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 36966004
<a href="default.aspx" onclick="rollover('home1','Home2.png');this.onmouseout='null';return false;" onmouseover="rollover('home1','Home2.png')" onmouseout="rollover('home1','Home1.png')"><img src="App_Themes/MasterPage/Images/Home1.png" alt="Home" name="home1" /></a>

test page : http://jsfiddle.net/cAHgG/

<a href="default.aspx" onclick="rollover('home1','http://perlbal.hi-pi.com/blog-images/100820/gd/1176274077/le-chien-mechant.gif');this.onmouseout='null';return false;" onmouseover="rollover('home1','http://perlbal.hi-pi.com/blog-images/100820/gd/1176274077/le-chien-mechant.gif')" onmouseout="rollover('home1','http://hebergeurimage.free.fr/chien%20blanc.2007422235648.jpg')"><img src="http://hebergeurimage.free.fr/chien%20blanc.2007422235648.jpg" alt="Home" name="home1" /></a>

Open in new window


rollover = function(a,b) {
    document.getElementsByName(a)[0].src = b;
}

Open in new window

0
 

Author Comment

by:98fatboyrider
ID: 36971873
Clicking the button now sets the image to Home1.png and is un-clickable however, the link is no longer working. Thoughts?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36971876
You want :

un-clickable
and
link working

?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:98fatboyrider
ID: 36971896
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.
0
 

Author Comment

by:98fatboyrider
ID: 36993652
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37081951
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.  
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37081993
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
0
 
LVL 9

Expert Comment

by:keyu
ID: 37082038
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..
0
 
LVL 9

Expert Comment

by:keyu
ID: 37082042
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>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37082170
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...
0
 
LVL 9

Expert Comment

by:keyu
ID: 37082317
javascript wont require form submission
we are just assigning value and retrieving it.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37082476
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>



0
 
LVL 19

Expert Comment

by:Amandeep Singh Bhullar
ID: 37923579
I've requested that this question be deleted for the following reason:

Not enough information to confirm an answer.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37923580
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37925921
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&
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37927638
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37932694
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&
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37932799
And so did I here: http:#a37082476
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37959743
Would have been great to participate in a split
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question