Link to home
Start Free TrialLog in
Avatar of mazgwembe
mazgwembe

asked on

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?
Avatar of Wakie
Wakie
Flag of Australia image

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.

Regards,
Wakie.
Avatar of mazgwembe
mazgwembe

ASKER

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?
close question - as agreed....
mazgwembe,

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.

Wakie.
um,

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?
ASKER CERTIFIED SOLUTION
Avatar of mazgwembe
mazgwembe

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

Don't expect my help in the future mate!

Wakie.
Thanks for your assistance and understanding Spidey. Keep up the good work @ EE.

Wakie,

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.