Click to See Complete Forum and Search --> : onclick image swap PLUS rollover
wynton_ca
10-31-2003, 01:23 PM
Still having problems joining these two events. Onclick an image changes (toggles back and forth). On all images there are rollovers (that should mirror the toggled image) triggered by the mouseover event. The problem Im having is having the image recognize when to rollover,....quite frankly I cant get the rollover to work. I dont know how to combine the onclick and onmouseover events to run off of one another. When the image is onlicked, it still needs to onmouseover rollover! Grrrrr! going crazy here!
(this is the main onclick function that I have to marry a rollover to, for both states of toggle):
function chng(c_img) {
if (c_img.src.indexOf(swap1)!= -1) {
c_img.src = swap2;
}
else {
c_img.src = swap1;
}
}
<img src="btn_videos.gif" width="113" height="27" alt="Show/Hide Details" border="0" onclick="chng(this)" onmouseover="rolloverfucntion()" name="img1" />
halifaxrick
10-31-2003, 01:58 PM
I don't really know what you are trying to do, but a onmouseover will happen before an onclick ever does. So expecting an onmouseover to occur after the onclick is futile.
If you need something else to happen afer what you want in the onclick happens, could you not just add it to the onclick function?
What exactly are you trying to achieve?
wynton_ca
10-31-2003, 02:16 PM
Ok, Im not being clear in the midst of my frustration. One image is used to show and hide a hidden layer. Closed, the image says "Show Info", while open the image says "Hide Info". I need rollovers for both states, open and closed. Im unsure of how to control a rollover within the image swap function, and most definately the onclick function needs to take precedence over the rollover.
Hopefully that makes it a bit more clear?
halifaxrick
10-31-2003, 02:22 PM
I think I know what you mean, let me know if I am on the right track.
The image has a rollover and an onclick, the onclick changes the image that is displayed. Depending on which image is displayed, the rollover will be different.
A rollover will always happen first as you have to move onto the image (rollover) before you click it (onclick).
If you want the rolloverfunction to occur after the onclick aswell as when someone rolls over just add the function to your onclick statement.
function chng(c_img) {
if (c_img.src.indexOf(swap1)!= -1) {
c_img.src = swap2;
rolloverfucntion()" ;
}
else {
c_img.src = swap1;
rolloverfucntion()" ;
}
}
<img src="btn_videos.gif" width="113" height="27" alt="Show/Hide Details" border="0" onclick="chng(this)" onmouseover="rolloverfucntion()" name="img1" />
wynton_ca
10-31-2003, 04:40 PM
Ok, so I would reference the rollover funtion from within the codeblock after the onclick is initiated by the user. Where would I write the rollover function? Outside of the image swap function or inside? Also Im having problems deciphering a rollover function that will recognize the mouseover event from within the onclick. Do you have any suggestions to code the rollover function?
Much appreciated!
halifaxrick
11-03-2003, 09:39 AM
The rollover function would be an independent function that can be called either from a) the chng() function or b) by itself from the mouseover.
It would not be within the blocks of the chng() function.
The rollover function is just a function call, it is not permantly attached to the onmouseover. The way you have to code it for the rollover function to occur after the chng() function, is to call the rollover function within the chng() function.
If the user has clicked the image, then by default they are over the image, that is why you would call the rollover function from within the chng() function.
I am sorry is this is not answering your question. If it doesn't, could you explain (without code references) what you want to do?
wynton_ca
11-03-2003, 11:57 AM
Cool. I understand the point you're getting at and agree with the approach. The problem Im having is getting the onmouseover/out and onclick events to coexist with one another. Say the user mouses over the image, the event is called,....then the user clicks, it seems to return the user to the original off state image rather than swapping the image. So in essence the user is forced to click twice. Im not so sure I can obtain the behavior that is desired.
halifaxrick
11-03-2003, 12:16 PM
What does the rollover function do? If it affects the same image as the onclick, you may want to preload all of your images to reduce the time that things take. Also, the window.setTimeout("function()",time) function could help you get things happening in order.
Do you have a site with this page on so I could see what is happening?