Swap Image using onClick property

Posted on 2003-03-04
Medium Priority
Last Modified: 2012-08-13
I am building an access-based ASP/vbscript website with Dreamweaver. I have 3 columns in my database that I'd like results sorted by - company, proposal, and sponsor. The way I do this is by having the user click on an image-based tab with a url parameter that reloads the page with the corresponding sort.

As well as swapping the tabs onMouseOver, I wish to change/swap the tab clicked on by the user to select the sort, so that it is readily apparent to the user what the current sort is. I've attempted to do this with dreamweaver's onClick function (via Design -> behaviors) but my problem is that when the page reloads with the correct sorting, the clicked image reverts to its former 'unclicked' state. Is there anyway to keep track of what image has been clicked, and maintain its 'clicked' status even when the page reloads with the new sort?

Here are some code snippets:
The tabs have links as:
1) proposals.asp?sortby=company (default - without tab click)
2) proposals.asp?sortby=sponsor
3) proposals.asp?sortby=proposal

Here's the actual onClick code: (all on one line)
<a href="proposals.asp?sortby=company" onMouseOver="MM_swapImage('companyOn','','images/companyOn.gif','sponsorOff','','images/sponsorOff.gif','proposalOff','','images/proposalOff.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/companyOn.gif" name="companyOn" width="102" height="30" border="0" id="companyOn"></a>
<a href="proposals.asp?sortby=sponsor"onClick="MM_swapImage('companyOn','','images/companyOff.gif','sponsorOff','','images/sponsorOn.gif','proposalOff','','images/proposalOff.gif',1)" onMouseOver="MM_swapImage('companyOn','','images/companyOff.gif','sponsorOff','','images/sponsorOn.gif','proposalOff','','images/proposalOff.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/sponsorOff.gif" name="sponsorOff" width="102" height="30" border="0" id="sponsorOff"></a>
<a href="proposals.asp?sortby=proposal"onClick="MM_swapImage('companyOn','','images/companyOff.gif','sponsorOff','','images/sponsorOff.gif','proposalOff','','images/proposalOn.gif',1)" onMouseOver="MM_swapImage('companyOn','','images/companyOff.gif','sponsorOff','','images/sponsorOff.gif','proposalOff','','images/proposalOn.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/proposalOff.gif" name="proposalOff" width="102" height="30" border="0" id="proposalOff"></a>

Dreamweaver's MM_swapImage fcn looks like:
function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

Any Ideas on how to do this using ASP?
Question by:mazgwembe
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4

Expert Comment

ID: 8068753
I would suggest, when clicking on your link, to pass a query string through your link that will print out an alternative MouseOver function.

For example, the default MouseOver may be:
<a href="proposals.asp?sortby=company&clicked=yes" onMouseOver="MM_swapImage('companyOn','','images/companyOn.gif','sponsorOff','','images/sponsorOff.gif','proposalOff','','images/proposalOff.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/companyOn.gif" name="companyOn" width="102" height="30" border="0" id="companyOn"></a>

Then, when this is clicked, may be reversed like this:
<a href="proposals.asp?sortby=company&clicked=no" onMouseOver="MM_swapImage('companyOn','','images/sponsorOff.gif','sponsorOff','','images/companyOn.gif','proposalOff','','images/proposalOff.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/sponsorOff.gif" name="companyOn" width="102" height="30" border="0" id="companyOn"></a>

Pay special attention to the "&clicked=yes" and "&clicked=no" query strings I have tacked onto your links. The above adjustments to your code will be displayed according to the "clicked" query string.

Hope that helps.


Author Comment

ID: 8082212
I figured out another more direct javascript-less way to do this... -> check url parameter 'sortby' to see what the current sort is, and then use Response.write to spit out the image path of the (now color-coded) tab corresponding to the current sort. Thanks for your suggestion though...

Expert Comment

ID: 8084625
You're welcome, mazgwembe.

How to you plan on closing this question?
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!


Expert Comment

ID: 8807616
close question - as agreed....

Expert Comment

ID: 8810473

I would like to know why my efforts in this question go awarded by a person who put in no effort to have this problem solved.


Author Comment

ID: 8814355

Corrupticus helped me with my problem, offline, and since there's no way of taking back pts 4 a question or awarding them to oneself when one "figures out" the solution, I chose to give them to him as he is also a mbr of EE - fair enough?

Accepted Solution

mazgwembe earned 0 total points
ID: 8816549
You would be right, Spidey, in saying the answer I gave is that which was derived principally from Corrupticus' assistance, which was basically:

If ((request.querystring("sortby") = "company" ) then
Response.Write "<img src='images/companyOnAsc.gif'>"  'print out corresponding image path
Response.Write "<img src='images/companyOff.gif'>"  'default image path
End If

This approach was simple, yet elegant, and did not involve unnecessary dabbling in JavaScript.

Well, if there's a way to refund points, then lets do that, to be fair. What is the protocol for posting a request to the mods @ community support?

Expert Comment

ID: 8817375
Your welcome, mazgwembe. Seems manners lack somewhat in this place.

Don't expect my help in the future mate!


Author Comment

ID: 8823894
Thanks for your assistance and understanding Spidey. Keep up the good work @ EE.


I don't see why you're upset - your suggestion though plausible, necessitated a superfluous url parameter (clicked). Clearly, the solution proposed by Corrupticus was a cleaner, leaner and more nail-on-head one, and hence deserving of the pts - was my idea @ the time I chose to award them to him.

I didn't in anyway mean to disparage your contribution/suggestion to this question, if that's how you took it. The pts were awarded solely on merit, which is why I don't understand why your last comment was as sullen as it was. Like merit, manners @ EE are neither lacking nor are they in short suppy, and this will hopefully continue to be the trend for both.

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
In this video, Percona Solution Engineer Rick Golba discuss how (and why) you implement high availability in a database environment. To discuss how Percona Consulting can help with your design and architecture needs for your database and infrastr…

777 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