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

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

Swap Image using onClick property

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?
  • 4
  • 4
1 Solution
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.

mazgwembeAuthor Commented:
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...
You're welcome, mazgwembe.

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

close question - as agreed....

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.

mazgwembeAuthor Commented:

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?
mazgwembeAuthor Commented:
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?
Your welcome, mazgwembe. Seems manners lack somewhat in this place.

Don't expect my help in the future mate!

mazgwembeAuthor Commented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now