Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 266
  • Last Modified:

Further refinement of mouseover and layers

Hello again!

Please see this solution: http://experts-exchange.com/Applications/MS_Office/FrontPage/Q_21137569.html

I need one final refinement.

Please go to this test page:

http://www.rowby.com/cards/

Is it possible for an ordinary table to have a behaviour?  A reasonably cross-platform behaviour?

If that is possible, I would like the table that says "TERMINALS Free Credit Card Terminal" to have the same behaviour that the graphic "004a.jpg" that is currently below it which has the words "SOFTWARE" on it.  

(If that is possible the table would have the behavour and I will delete the "004a.jpg" of course)

If the table cannot have the behaviour, then I guess a new layer would be needed with the table put inside that layer.

Thanks!
0
Rowby Goren
Asked:
Rowby Goren
  • 8
  • 4
1 Solution
 
hhammashCommented:
Hi,

Yes the table can have bahaviour:

This is before the </head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


This is between <body> and </body>

<table width="350" border="1" onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


When you click on the table it goes to CNN.

What behaviour would you like to have for the table?

hhammash
0
 
hhammashCommented:
You can specify behaviors for different cells:

Before </head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


Between <body> and </body>

<table width="350" border="1">
  <tr>
    <td onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue">&nbsp;</td>
    <td onClick="MM_goToURL('parent','http://www.yahoo.com');return document.MM_returnValue">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


First cells goes to CNN on click,  second cells goes to Yahoo on click.

hhammash
0
 
hhammashCommented:
Hi,

This is what you want.  I gave the table the same behavior that I gave to the image below it before.

Code before </head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  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);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


Code before </body> . Note:  Remove <body> tag and please the code before </body> tag:

<body onLoad="MM_showHideLayers('PCImage','','hide')">
<div id="PCImage" style="position:absolute; left:167px; top:12px; width:235px; height:195px; z-index:1; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;">
  <div align="center"><strong><font size="6">This is PCImage Layer</font></strong></div>
</div>
<table width="150" border="0" onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue" onMouseOver="MM_showHideLayers('PCImage','','show')" onMouseOut="MM_showHideLayers('PCImage','','hide')">
  <tr>
    <td bgcolor="#990000"><div align="center"><strong><font color="#FFFFFF">Terminals</font></strong></div></td>
  </tr>
  <tr>
    <td bgcolor="#0000FF"><div align="center"><font size="5"><strong><font color="#FFFF33">Free</font></strong></font><font color="#FFFF33"><br>
        <strong>Credit Card<br>
        Terminals </strong></font></div></td>
  </tr>
</table>


I hope it helps
hhammash
0
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
Rowby GorenAuthor Commented:
Can ONE cell have two behaviours?   Let's call the cell "Cell_1"

Example:  MouseHover over Cell_1 brings up a layer (with the 004a.jpg image in the layer)
               Doubleclick Cell_1 goes to the URL.

Rowby

0
 
Rowby GorenAuthor Commented:
I I didn't see the above solution before I posted my above comment.

I'll impliment your suggestion later today or tonight.

thanks

Rowby
0
 
Rowby GorenAuthor Commented:

Hi

I made the modification.  You can see it here:

http://www.rowby.com/cards/

And it works fine as long as PCImage layer is positioned as above.

But when I move PCImage on top of the table, and hover the mouse over it, it flashes with every move of the mouse.

http://www.rowby.com/cards/test.html

Is there a different kind of hover behaviour that would eliminate the flashing?  

Thanks!

Rowby

Thanks!
0
 
hhammashCommented:
Hi,

Check this link:
http://nml.uaeu.ac.ae/Layers.htm

Before </Head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  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);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>



Remove <body> and put this before </body>

<body onLoad="MM_showHideLayers('PCImage','','hide')">
<div id="PCImage" style="position:absolute; left:7px; top:11px; width:167px; height:156px; z-index:1; background-color: #990000; layer-background-color: #990000; border: 1px none #000000;" onClick="MM_goToURL('parent','http://www.cnn.com');return document.MM_returnValue" onMouseOut="MM_showHideLayers('PCImage','','hide')">
  <div align="center"><strong>PCImage</strong></div>
</div>
<table width="120" border="1" onMouseOver="MM_showHideLayers('PCImage','','show')">
  <tr>
    <td><div align="center"><strong>Free</strong></div></td>
  </tr>
  <tr>
    <td><div align="center"><strong>Free<br>
        Credit Card Terminals</strong></div></td>
  </tr>
</table>


regards
hhammash
0
 
Rowby GorenAuthor Commented:
Hi  

So close --

It works locally, but look at the link -- it becomes a frame etc.  

So there is something not quite working.

Can you look one more time.  It's almost absolutely looking.


http://www.rowby.com/cards/

Rowby
0
 
Rowby GorenAuthor Commented:
I sent before I finished.

It's come  to a frame. etc.
0
 
Rowby GorenAuthor Commented:
Nope. It's fine.  Hold on.  I think the solution has worked....
0
 
Rowby GorenAuthor Commented:
Okay. It's working as needed.  Thanks!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!

Let's hope this is the end of the "refinements" :)

Rowby
0
 
Rowby GorenAuthor Commented:
Thanks. It's going to work fine now!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now