Solved

Problem with creating image resources

Posted on 2001-09-12
4
205 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
ID: 6476081
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
ID: 6476111
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
ID: 6476614
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
ID: 6504849

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For Desktop Techs: How to retain a user's Notes configuration data when swapping out the end user's computer. (Assuming that you are not upgrading to a completely different version of Notes client) All you need to do is: 1) install Notes o…
I thought it will be a good idea to make a post as it will help in case someone else faces these issues. I trust this gives an idea how each entry in Notes.ini can mean a lot for the Domino Server to be functioning properly. This article discusses t…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

685 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