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!
LVL 9
Rowby GorenAsked:
Who is Participating?
 
hhammashConnect With a Mentor Commented:
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
 
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
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.