Complex Hyperlink with mouse events

[lakeside12]

Hi
Please can someone help, I have tried to combine a few things into one and hit a brick wall.

I wanted a Mouseover function and the Div Hide/show combined into one operation Which I have below here

Individually they work, but combined they fail totally

I want the mouseover to swap the image, and I want the Onclick to show / hide the div. Right nothing works at all not even a mouseclick to call showhidefield1.

What have I done so wrong on this.

<a href="#" onClick="showhidefield1(); return false;
onmouseover="document.frm.src='

http://test.com/pic2.png'"

onmouseout ="document.frm.src='

http://test.com/pic1.png'">

<img name=NAME src="'

http://test.com/pic1'">

</a>


showhidefield1 is a Javascript function and works ok

Your help is appreciated

many Thanks

 

[vacunita]

You are missing a " after the return false; Other than that, I'm not sure what you are attempting to do, since you seem to be wanting to change the src property a Form or other object directly accessible by name, who's name is frm.

Forms don't have a src property. And your image's name is "NAME" not "frm".

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[lakeside12]

Hello

A member on this forum Vacunita submitted this and it works perfectly, all I want to do is add in a ON MOUSE EFFECT that swaps the Images on Mouse Over

Can you or someone help with this , the code below is perfect so if you can add to this that would be awesome.
Many many thanks


<a href="#" onClick="showhidefield(); return false;">Click here to show or hide the area</a>



function showhidefield(){
if(document.getElementById("hideablearea").style.display == "block"){
document.getElementById("hideablearea").style.display = "none";
}
else{
document.getElementById("hideablearea").style.display = "block";
}
}


<div id="hideablearea" style="display:block">
<input type=text ...>
</div>

 

[vacunita]

I'm not saying anything about the function, that's fine.

I was talking about your other 2 events which seem to be trying to access a nonexistent object.

Now that I understand, try this instead:

<a href="#" onClick="showhidefield1(); return false;[blue]"[/blue] onmouseover="document.getElementById('[red]myimage[/red]').src='[URL unfurl="true"]http://test.com/pic2.png';"[/URL] onmouseout="document.getElementById('[red]myimage[/red]').src='[URL unfurl="true"]http://test.com/pic1.png';">[/URL]
 <img name=NAME [red]id="myimage"[/red] src="[URL unfurl="true"]http://test.com/pic1.png">[/URL]
</a>

Though a CSS approach to the image swapping would have been a better option.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[lakeside12]

Hi
That worked perfectly, THAT YOU SO MUCH !!!!

I have a question, is it possible to have a second button on the form that when clicked changes the image on the first button to a totally new image

All your help is much appreciated

many Thanks

 

[vacunita]

Sure. Just replicate one of the mouse events of the above example into the onClick event of your other button.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[lakeside12]

Hi,
I know this sounds really silly, but I do not quite know how to do that , I get the OnClick event, but are not all these images and "actions" local to the button in question, is it possible to show me what you mean

Many thanks
I do appreciate your help

 

[vacunita]

Nope not really.

You can use the same document.getElementById in your other button to point to the image, and change its src.

Why because the ID is what identifies the image. and getElementById can use it to access the image from anywhere. Even from an unrelated button.

<a href="#" onClick="document.getElementById('myimage').src='totallynewimage.png'; return false;">Change image</a>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[lakeside12]

WOW THANK YOU SO MUCH
Javascript is such a smart language, I LOVE IT

Thank you for your help you are brilliant

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.