Solved

Problem with creating image resources

Posted on 2001-09-12
4
208 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

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…
Notes Document Link used by IBM Notes is a link file which aids in the sharing of links to documents in email and webpages. The posts describe the importance and steps to create a Lotus Notes NDL file in brief.
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…

615 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