onMouseOver with buttons
Hello,
This may be a really stupid question but I can't find the answer anywhere so I'll toss it out here.
I have a button and an image in my page1.jsp file. I've setup a function that when I click on the button it toggles the display of the image. Works just fine.
Now, I want to have the same thing (toggling of the image display) happen onMouseOver of the button instead of having to click on it. How can this be done?
I've tried setting the onMouseOver javascript function to "return toggleDisplay()" and then placing a javascript function in the JSP file, but the JavaScript debugger tells me that "function toggleDisplay() is not defined"
Any pointer would be greatly appreciated!!
Message was edited by:
peppertech
[775 byte] By [
peppertech] at [2007-11-26 9:36:16]
# 2
Here is the JSP code from the page1.jsp file.
*********************************
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui">
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<ui:page binding="#{Page1.page1}" id="page1">
<ui:html binding="#{Page1.html1}" id="html1">
<ui:head binding="#{Page1.head1}" id="head1">
<ui:link binding="#{Page1.link1}" id="link1" url="/resources/stylesheet.css"/>
</ui:head>
<ui:body binding="#{Page1.body1}" id="body1" style="-rave-layout: grid">
<script language="text/javascript">
function toggleDisplay(){
if (this.image1.isVisible() == true){
this.image1.setVisible(false);
}else{
this.image1.setVisible(true);
}
return null;
}
</script>
<ui:form binding="#{Page1.form1}" id="form1">
<ui:button action="#{Page1.button1_action}" binding="#{Page1.button1}" id="button1" onMouseOver="return toggleDisplay()"
style="left: 269px; top: 340px; position: absolute" text="Click to toggle image display"/>
<ui:image binding="#{Page1.image1}" id="image1" style="left: 300px; top: 190px; position: absolute" url="/resources/arsenal_crest.gif"/>
</ui:form>
</ui:body>
</ui:html>
</ui:page>
</f:view>
</jsp:root>
**********************************
# 3
One other odd thing that I found when viewing the page source of the resulting HTML file, is that all of the event functions for the Button are added to the HTML so you get things like:
onFocus="return this.myofocus();"
onMouseOut="return this.myonmouseout();"
etc.
I couldn't find a way to stop these from being created by the tool, so the resulting HTML looks like this when the page is run
<input id="form1:button1" name="form1:button1" class="Btn2" onblur="return this.myonblur();" onfocus="return this.myonfocus();" onmouseout="return this.myonmouseout();" onmouseover="return toggleDisplay();return this.myonmouseover();" style="left: 269px; top: 340px; position: absolute" type="submit" value="Click to toggle image display">
</input>
<script type="text/javascript">
sjwuic_assign_button('form1:button1', defaultButtonStrings, true, false, false);
</script>
<img id="form1:image1" style="left: 300px; top: 190px; position: absolute" src="/GettingStarted/resources/arsenal_crest.gif" alt="" border="0"></img>
# 6
You use the "language=" Attribute which is deprecated.
<script language="text/javascript">
What Browser are you using? Try
<script type="text/javascript">
Juergen
Message was edited by:
bookon
Message was edited by:
bookon
