Solved

Problem with creating image resources

Posted on 2001-09-12
4
200 Views
Last Modified: 2013-12-18
hai experts,
   i have the html code to change the button color onmouseover event and onmouseoutevent.
  so i create one imageresource and placed it on a page and for the image i put onmouseover and onmouseoutevent code.but i am not the same effect.
 when the paste whole html code on page and passthru html its working fine.
 i think i done very small mistake but unable to debug it out.can anybody will help me.



 









<style type="text/css">
      A.1 {text-decoration:none}
</style>





<html>
<head>
      <title>test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

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];}
}
//-->
</script>
</head>



<body bgcolor="FFFFFF" topmargin="5" leftmargin="0" onLoad="MM_preloadImages('images/emaily.gif','images/discussionsy.gif','images/formsy.gif','images/f&amp;dy.gif','images/calendary.gif','images/hry.gif')">
<table border="0" cellspacing="0" cellpadding="0" width="800" height="530" align="left">
   
  <tr align="center" valign="bottom">
    <td colspan="3" height="20">
     
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

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];}
}
//-->
</script>


<body onLoad="MM_preloadImages('images/goa.gif')">
<table width="930" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td rowspan="2" height="50" width="148"><img src="images/logo1.gif" width="150" height="50"></td>
    <td width="631" height="25">&nbsp;</td>
      <td rowspan="2" width="151" height="50"><img src="images/test.gif" width="150" height="50"></td>
</tr>
<tr>
      <td width="631" height="29" bgcolor="3366CC">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
            <td width="7%">&nbsp;</td>
            <td width="82%" align="center" valign="middle"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">Search
            <input type="text" name="textfield" size="30">
            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Go','','images/goa.gif',1)"><img name="Go" border="0" src="images/gob.gif" width="18" height="17" align="bottom"></a></font></td>
          <td width="11%">&nbsp;</td>
        </tr>
      </table>
    </td>
</tr>
</table>

    </td>
  </tr>
  <tr>  
    <td valign="bottom" align="left" width="130" height="20" bgcolor="FFFFFF">
       
<table cellpadding="0" cellspacing="0" border="0" width="130">
<tr align="center" valign="bottom" bgcolor="FFFFFF">

      
          <td height="22" width="130"><img src="images/main.gif" width="145" height="22"></td>
   
</tr>
</table>

    </td>
     
    <td rowspan="2" width="670" valign="top" align="left" height="40">
     


<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

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];}
}
//-->
</script>
<body onLoad="MM_preloadImages('images/logouty.gif')">
<table width="670" cellpadding="0" cellspacing="0" border="0">
  <tr>
     
    <td valign="middle" rowspan="2">
      <table width="780" border="0" cellspacing="0" cellpadding="0">
          <tr>
           
          <td width="634" bgcolor="FFFFFF" align="center" height="10"><font color="3366CC" size="3" face="Arial, Helvetica, sans-serif"><b><font size="2">Welcome
              <font color="#000066">Shaik Hidayatulla</font></font></b>
            </font></td>
            <td align="right" valign="bottom" width="146" bgcolor="#FFFFFF"><font color="3366CC" size="3" face="Arial, Helvetica, sans-serif"><a href="logout.cfm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('logout','','images/logouty.gif',1)"><img name="logout" border="0" src="images/logoutb.gif" width="145" height="22"></a></font></td>
          </tr>
          <tr bgcolor="#3366CC">
           
          <td width="634" align="center" height="10" valign="top">&nbsp;</td>
            <td align="right" valign="bottom" width="146">&nbsp;</td>
          </tr>
        </table>
      </td>
    </tr>
</table>


    </td>
     
  </tr>
  <tr>
    <td valign="bottom" align="left" width="130" height="20" bgcolor="3366CC">&nbsp;</td>
  </tr>
  <tr>  
    <td bgcolor="3366CC" align="left" valign="top" height="430" width="130">
     


      
    <table width="130" border="0" cellspacing="0" cellpadding="0">
      
        <tr>
          <td><a onclick="return false;" href="mail.cfm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Email','','images/emaily.gif',1)"><img name="Email" border="0" src="images/emailb.gif" width="145" height="22" alt="Under Constraction"></a></td>
        </tr>
      
        <tr>
          <td><a onclick="return false;" href="calendar.cfm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Calendar','','images/calendary.gif',1)"><img name="Calendar" border="0" src="images/calendarb.gif" width="145" height="22" alt="Under Constraction"></a></td>
        </tr>
      
        <tr>
          <td><a onclick="return false;" href="Discussions.cfm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Discussions','','images/discussionsy.gif',1)"><img name="Discussions" border="0" src="images/discussionsb.gif" width="145" height="22" alt="Under Constraction"></a></td>
        </tr>
      
        <tr>
          <td><a href="req.cfm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Forms','','images/formsy.gif',1)"><img name="Forms" border="0" src="images/formsb.gif" width="145" height="22"></a></td>
        </tr>
      
        <tr>
          <td><a onclick="return false;" href="hr.cfm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('HRResourcse','','images/hry.gif',1)"><img name="HRResourcse" border="0" src="images/hrb.gif" width="145" height="22" alt="Under Constraction"></a></td>
        </tr>
      
        <tr align="left">
          <td><a href="Files.cfm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Files','','images/f&dy.gif',1)"><img name="Files" border="0" src="images/f&d.gif" width="145" height="22"></a></td>
        </tr>
      

      
      
      
      
        <tr>
            
                  <td>&nbsp;</td>
            
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
      
    </td>
    <td valign="top" width="670" height="420">
      
        
       
        
     
       
        
    </td>
  </tr>
 
  <tr align="center" valign="top" bordercolor="White" bordercolordark="White">
    <td colspan="3" height="40" bordercolor="White" bordercolor="White">
     
<table width="930" cellpadding="0" cellspacing="0">
  <tr bgcolor="FFCC00">
          <td width="130" rowspan="2" height="20">&nbsp;</td>
          <td height="20" rowspan="2"><div align="center"><font color="#3366CC" size="1" face="Arial, Helvetica, sans-serif"></font></div></td>
          <td width="150" height="20" rowspan="2">&nbsp;</td>
      </tr>
      <tr bgcolor="FFCC00">
      </tr>
</table>

    </td>
  </tr>
 
</table>
</body>
</html>
0
Comment
Question by:saleemkhan
  • 2
  • 2
4 Comments
 
LVL 8

Accepted Solution

by:
Jean Marie Geeraerts earned 50 total points
Comment Utility
There is absolutely no need for JavaScript functions, when domino does the mouseover effects for you.
All you need to do is create the graphic buttons as explained below:

Create one graphic containing the four different states of the button :
1. normal
2. mouse over
3. selected
4. mouse out

All different states should be horizontally next to each other, seperated by exactly one pixel. All states also must be exactly equal in size.
So if you have a button that is 200x20 pixels, you will have to create a graphic that is 803x20 pixels. (803=200+1+200+1+200+1+200)

If you create this graphic as an image resource, set the following properties :
Images across : 4
Images down : 1
Web browser compatible : checked (this is done automatically when you change the number for Images across to 4)

Now when you create an image resource on a page or form, using this type of image resource, domino will automatically create the necessary mouseover effects. So there is no need for extra JavaScript functions.

If you have two seperate buttons in seperate graphics the easy way to create the image well (as it is called) is to create a new blanc image of the correct size and then paste the seperate buttons onto it.

If you send me the seperate buttons, I will combine them for you. I've sent you an email with one example graphic.

Regards,
Jerrith
0
 

Author Comment

by:saleemkhan
Comment Utility
i created imageresouce and inserted in page.when i change the background color of the page to blue in the buttons i am able to see white color and on the right side of the button there is one very sharp line is there.
  why its appearing white background color for the button when i change the background color of the page to blue.

waiting for reply.
saleem.
0
 
LVL 8

Expert Comment

by:Jean Marie Geeraerts
Comment Utility
The white background is due to a bug in notes. To bypass this problem, create the images with a background colour the same as the background colour of the page you want to put them on.
I won't be able to create the images for you today, but I'll make sure you get them tomorrow morning.
0
 

Author Comment

by:saleemkhan
Comment Utility

Excellent its working fine what i did is while creating the button itself i gave background as blue color.

thank u very much for ur hint.
i need the same help in future also.


saleem.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

You’ve got a lotus Domino web server, and you have been told that “leverage browser caching” is a must do. This means that we have to tell the browser everywhere in the web to use cache. In other words, we set (and send) an expiration date in the HT…
Lack of Storage capacity is a common problem that exists in every field of life. Here we are taking the case of Lotus Notes Emails, as we all know that we are totally depend on e-communication i.e. Emails. This article is fully dedicated to resolvin…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now