?
Solved

Further refinement of mouseover and layers

Posted on 2004-09-27
12
Medium Priority
?
263 Views
Last Modified: 2013-12-24
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
Comment
Question by:Rowby Goren
[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
  • 8
  • 4
12 Comments
 
LVL 14

Expert Comment

by:hhammash
ID: 12160643
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
 
LVL 14

Expert Comment

by:hhammash
ID: 12160691
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
 
LVL 14

Expert Comment

by:hhammash
ID: 12160812
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
Nothing ever in the clear!

This technical paper will help you implement VMware’s VM encryption as well as implement Veeam encryption which together will achieve the nothing ever in the clear goal. If a bad guy steals VMs, backups or traffic they get nothing.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 12160826
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12160840
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12171410

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
 
LVL 14

Accepted Solution

by:
hhammash earned 2000 total points
ID: 12173793
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174063
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174070
I sent before I finished.

It's come  to a frame. etc.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174331
Nope. It's fine.  Hold on.  I think the solution has worked....
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174356
Okay. It's working as needed.  Thanks!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!

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

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 12174423
Thanks. It's going to work fine now!
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

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

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Suggested Courses

718 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