some of you are already familiar with www.safariquip.co.uk and my exploits of cutting down the download times

i'm trying to make the buttons on the left nav bar the same as the ones in the main frame. they will be cut down from one big image to one image for the little logo, one image for the bottom right hand corner etc.

i have done this, and a page on it is viewable here

the problem is, that the CSS only rolls over when you go onto the text, i want it to roll over when you go onto the table, so that it appears just like the button below with text and images rolling over together.

anyone with any ideas on how to do this? they are much appreciated.

Well, you could forget the link all together and just make the normal text change color when your mouse is over it.

First you have to make the cursor a hand, so in the <td> put

style="cursor:hand"

Then, you have to put some javascript. I'm not quite sure the exact code, but it's something like this - I would search on goolge a bit

onMouseOver="this.style.color:yourrollovercolor" onMouseOut="this.style.color:yourorigonalcolor"

I'm not sure if it's color= (equal sign) or color: (semi-colon), I'm not sure if thats the right code at all

Hope I understood your question correctly..

that makes sense thankx chroder.

i had the hand styling already, just hadn't put it in, its in now though.

as for the rollover text changing, does anyone have the script? i've searched around for it, but i can't find it at present. basically all i need is for either:
*the css to change OnMouseOver of the table
or
*the text to change without css OnMouseOver of the table

anyone with any scripts / suggestions please let me know! i need this one answered asap!

i've tried using

onmouseover="this.style.color = 'red';"
onmouseout="this.style.color = 'black';"

but it doens't work. i figure its because theres already too many mouseover and mouseout commands in the block. also, because i'm trying to apply the script to a whole table, not just to a section of text.

thus, things aren't going very well. anyone that can code, is there any chance of you knowing how to code something that will mean that when you rollover a table, the text in it changes colour? anybody else know of a script that will do this?

thankx guys

How about trying the link, but make in your css

width:100%;
height:100%;

That would make the link span the whole cell, but I'm not sure if it would push the other things in the cell away... Make sure you have a width and height attribute on the cell and it might work, but might not comply with the W3C Validator...

I'll do some searching

i've tried making the link with the same height + width as the button piece, but no joy.

i'm not exactly sure what you mean with the height and width thing, can you copy + paste my source in and edit it with how you think it should look so that i can use that instead of trying to work in the dark?

many thankx

Originally posted by DaveTodd
many mouseover and mouseout commands in the block. also, because i'm trying to apply the script to a whole table, not just to a section of text.

You have to put the onmouseover statements in one, you can't have multiple onmouseover/onmouseout attributes. Just put a colon (;)at the end of what you have already then stick in the code above (after the ;)

And, you should apply it to each cell, not the entire table, and (lol) you should not have a link there anymore, just plain text, and () you would have to put in you CSS with the cursor the initial font color.

Phew, hehe

Anyway, if thats the wrong code then look at http://www.dynamicdrive.com/dynamici...rolleffect.htm
It has an onmouseover effect with scrollers, but I don't see any quick answer...

(Yes, I'm posting again, im not trying to spam )

Ok, the code does work, so you just have to put it on each table cell and not the entire table, and combine the onmouseovers/outs you already have into one. I tried this code and it works fine.

<table>
<tr>
     <td style="cursor:hand; color:blue" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">TEST</td>
</tr>
</table>

Edit: I am looking at your code now, I didn't realize that everything is in different cells.... Be right back in a couple minutes, im going to try and make it work for you!

Got it! I bold-ed what I changed.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
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_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_findObj(n, d) { //v4.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);
  if(!x && document.getElementById) x=document.getElementById(n); 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];}
}

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>
<style type="text/css">
<!--
a:hover {  font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: #FFFF00}
a:link {  font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: #000000}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('compass2.gif','b_right2.gif','but_travel_f2.gif')">
<table width="142" border="0" height="34" bgcolor="#CC6600" style="cursor:hand; color:black" onMouseOver="MM_swapImage('compass','','compass2.gif','bright','','b_right2.gif',1); this.style.color='#FFFF00'" onMouseOut="MM_swapImgRestore(); this.style.color='black'" onClick="MM_goToURL('parent','#');return document.MM_returnValue">
  <tr> 
    <td colspan="3"><img src="yellow_bar.gif" width="150" height="1"></td>
  </tr>
  <tr> 
    <td width="28" height="22"> 
      <div align="right"><img src="compass.gif" width="27" height="22" name="compass"></div>
    </td>
    <td width="99" height="22"> 
      <div align="left"><b>Travel Equipment</b></div>
    <!-- No need for the <a href> stuff -->
    </td>
    <td valign="bottom" align="right" width="14" height="22"> 
      <div align="right"><img src="b_right.gif" width="13" height="12" name="bright"></div>
    </td>
  </tr>
  <tr> 
    <td colspan="3"><img src="yellow_bar.gif" width="150" height="1"></td>
  </tr>
</table>
</body>
</html>

many thankx chroder, i'll slam that on soon as i get back to work...which is...next wednesday!! i'll post a progress report soon as its all up and working for everyone to check out.

many thankx for all your continued help