Link to home
Start Free TrialLog in
Avatar of macuser777
macuser777Flag for United Kingdom of Great Britain and Northern Ireland

asked on

Background mouseover images in table cells

Hi,

Is it possible to use mouseover images  with links in table cells as backgrounds with static text?

this code doesn't work - but gives an idea of what i'm trying to achieve


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "http://www.mydomain.net/overyello3.gif";

image2 = new Image();
image2.src = "http://www.mydomain.net/overyello3.gif";

image3 = new Image();
image3.src = "http://www.mydomain.net/overyello3.gif";

image4 = new Image();
image4.src = "http://www.mydomain.net/overyello3.gif";

image5 = new Image();
image5.src = "http://www.mydomain.net/overyello3.gif";

// End -->
</script>

</head>

<body>
<p><a href="http://www.apple.com" onmouseover="image1.src='http://www.mydomain.net/overyello3.gif';"onmouseout="image1.src='http://www.mydomain.net/bb1.gif';">
  </a> <a href="http://www.mac.com" onmouseover="image2.src='http://www.mydomain.net/overyello3.gif';"onmouseout="image2.src='http://www.mydomain.net/bb1.gif';">
  </a> <a href="http://www.abcd.com" onmouseover="image3.src='http://www.mydomain.net/overyello3.gif';"onmouseout="image3.src='http://www.mydomain.net/bb1.gif';">
  </a> <a href="http://www.blogpulse.com" onmouseover="image4.src='http://www.mydomain.net/overyello3.gif';"onmouseout="image4.src='http://www.mydomain.net/bb1.gif';">
  </a> <a href="http://www.amazon.com" onmouseover="image5.src='http://www.mydomain.net/overyello3.gif';"onmouseout="image5.src='http://www.mydomain.net/bb1.gif';">
  </a> </p>
<p>&nbsp;</p>
<table width="38%" border="1">
  <tr>
    <td><a href="http://www.apple.com" onMouseOver="image1.src='http://www.mydomain.net/overyello3.gif';"onMouseOut="image1.src='http://www.mydomain.net/bb1.gif';"><img name="image1" src="http://www.mydomain.net/bb1.gif" border=0></a></td>
    <td><a href="http://www.puremotives.com" onMouseOver="image3.src='http://www.mydomain.net/overyello3.gif';"onMouseOut="image3.src='http://www.mydomain.net/bb1.gif';"><img name="image3" src="http://www.mydomain.net/bb1.gif" border=0></a></td>
  </tr>
  <tr>
    <td><a href="http://www.maclance.com" onMouseOver="image2.src='http://www.mydomain.net/overyello3.gif';"onMouseOut="image2.src='http://www.mydomain.net/bb1.gif';"><img name="image2" src="http://www.mydomain.net/bb1.gif" border=0></a></td>
    <td><a href="http://www.amazon.com" onMouseOver="image5.src='http://www.mydomain.net/overyello3.gif';"onMouseOut="image5.src='http://www.mydomain.net/bb1.gif';"><img name="image5" src="http://www.mydomain.net/bb1.gif" border=0></a></td>
  </tr>
  <tr>
    <td>text<a href="http://www.blogpulse.com" onMouseOver="image4.src='http://www.mydomain.net/overyello3.gif';"onMouseOut="image4.src='http://www.mydomain.net/bb1.gif';"><img name="image4" src="http://www.mydomain.net/bb1.gif" border=0></a>
      here</td>
    <td>static text will be visible in all cells at all times</td>
  </tr>
</table>
<p>&nbsp; </p>
</body>
</html>
Avatar of ziffgone
ziffgone
Flag of Canada image

Hi macuser777,

Place this right above the "// END -->" in your javascript:

<script type="text/javascript">
<!-- BEGIN
      // This is just to preload the images:
var bgimages = new Array();
      bgimages[0].src = "/images/origYell3.gif"
      bgimages[1].src = "/images/overYell3.gif"

      // bgimages[2] = "~" etc. for all images bieng used for swaps

      // Now the background image swap functions:
function newBg(x, newImg){
       x.style.background = "url("+newImg+")";
}
function origBg(x,oldImg){
       x.style.background = "url("+oldImg+")";
}
// END -->
</script>

Then adjust your TD's like so:

<td style="background: url(/images/overYello3.gif);" onmouseover="newBg(this, '/images/origYell3.gif');" onmouseout="oldBg(this, '/images/overyello3.gif');">
      Any Static text you like goes here. (Hopefully contrasting with both background for easy reading!)
</td>

That should do it.

Regards...
Sorry, had something in there that shouldn't have been.

Complete ignore/disregard this line:

"Place this right above the "// END -->" in your javascript:",

It was pertaining to something else I was going to do instead of the solution I have given.
Whup, another error in there:

onmouseout="oldBg(this, '/images/overyello3.gif');"

Should be:

onmouseout="origBg(this, '/images/overyello3.gif');"

Sorry. I think I'm tired, I'm gonna go veg in front of the TV for a while, then go to bed. ;)

Regards....
Avatar of garethdart24
garethdart24

You could also achieve this without using a table, by positioning your two elements (text and image link) in divs and floating one over the other.  The text link has a higher z-index, so is always on top of the image.  See the example below.  I've also adjusted it's onmouseover, onmouseout and onclick properties to make it seem part of the link.  The cursor should also change to a finger when you mouse over the text.

<html>
<head>
<script>

function imgSwap(imageID) {

document.getElementById(imageID).src = "whateverelse.jpg";

}

function imgRestore(imageID) {

document.getElementById(imageID).src = "whatever.jpg";

}

</script>
<style>

div.swapsDiv {

position: relative;
z-index: -1;
height: 100px;
width: 100px;

}

div.staticDiv {

position: relative;
z-index: +1;
height: 100px;
width: 100px;
text-align: center;
display: inline block;
cursor: pointer;

}

#imgDiv {

top: 0px;

}

#textDiv {

top: -100px;

}

</style>
</head>
<body>
<div class = "swapsDiv" name = "imgDiv" id = "imgDiv">
<a id = "link1" name = "link1" href = "NAMEOFTHISPAGE.html" onmouseover = "imgSwap('img1');" onmouseout = "imgRestore('img1')"><img border = "0" id = "img1" name = "img1" src = "whatever.jpg"></a>
</div>
<div class = "staticDiv" name = "textDiv" id = "textDiv" onmouseover = "imgSwap('img1');" onmouseout = "imgRestore('img1');" onclick = "javascript:location.href = document.getElementById('link1').href;">Your Text!</div>

</body>
</html>

It's an alternative to using tables, anyway.  

G
This is unnecessary. Just use CSS and make it the background image:

CSS-file:

.menu {
  padding: 0;
  margin: 0
}
.menu li {
  padding: 0;
  margin: 0;
  list-style: none
}
.menu a, .menu a:visited {
  background: url('images/bg.gif')
}
.menu a:hover {
  background: url('images/bghover.gif')
}

HTML-file:

<ul class="menu">
  <li><a href="http://apple.com/">Apple.com</a></li>
  <li><a href="http://apple.com/">Apple.com</a></li>
  <li><a href="http://apple.com/">Apple.com</a></li>
</ul>

------------------------------------------------------------------

If you want there to be an image left to the text, just add padding (padding: 5px) to the .menu a-class in the CSS file, and in the background image, you make it look like there's an image left to the text.
Picture me smacking my head.  Shoulda thought of that. ;)

G
Avatar of macuser777

ASKER

Hi all,



ziffgone.......can't get it going. ['m using the javascript as there will be a whole lot of cells and each will have a slightly different background image and it seems easier...plus i'm a css dunce at the moment:(  ]

here's a test page

apple(googlebotnot)ness    dot   com

here's the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!-- BEGIN
     // This is just to preload the images:
var bgimages = new Array();
     bgimages[0].src = "/http://www.appleness.com/overyello3.gif"
     bgimages[1].src = "http://www.appleness.com/overyello3gif

     // bgimages[2] = "~" etc. for all images bieng used for swaps

     // Now the background image swap functions:
function newBg(x, newImg){
      x.style.background = "url("+newImg+")";
}
function origBg(x,oldImg){
      x.style.background = "url("+oldImg+")";
}
// END -->
</script>

</head>

<body>

<table width="84%" border="1">
  <tr>
 
<td style="background: url(http://www.appleness.com/overyello3.gif);"
onmouseover="newBg(this, 'http://www.appleness.com/bb3.gif');"
onmouseout="origBg(this, 'http://www.appleness.com/overyello3.gif');">
 
     Any Static text you like goes here. (Hopefully contrasting with both background for easy reading!)
</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>


<p>this <img src="http://www.appleness.com/overyello3.gif" width="312" height="32">
  should mouseover this<img src="http://www.appleness.com/bb3.gif" width="312" height="32">
</p>
<p>and link to, for instance, http://www.apple.com</p>
</body>
</html>

macuser777, listen, my solution is much easier, and it's supported by all browsers. You should avoid JavaScript when possible, and especially when you can use valid CSS instead.
*Smacking garethdart24's head* You should have thought of that! ;)
Hi Joakim,

I'm prepared to be smacked around the head too!!

I'd have to use div id's in the html file as I want to restrict this behaviour to one part of the screen.
But what about wanting to use many different background images ( i'm presuming that doing this in tables is not a problem)
in table cells.

I will only be using one mouseover image (That's the plan anyway)

Please look here to see what i'm dealing with

the[google]reading[bot]list[not]  dot net

the tab menu is messy I know - I just took it off another site of mine to get things vaguely in place at this stage.


...css 101 then :),  well 102 maybe....

thanks

macuser
ziffgone

spotted a couple of typos i'd put in - I corrected but still no go..

     bgimages[0].src = "http://www.appleness.com/overyello3.gif
     bgimages[1].src = "http://www.appleness.com/overyello3.gif
*Smacks macuser777's head*

I don't get what you are trying to do. You want a cell with a background image and text, and when you hover the cell, you want the background image to change?
:))))

ok...

first, just found out ziffgone's solution works on windows...I'm on a mac...browser issues as you warned [if you nip over to apple*ness   dot   com again you'll see the top cell working.] It works on my mozilla but not Safari or ie for Mac.

>>>>You want a cell with a background image and text, and when you hover the cell, you want the background image to change?

yup...plus the mouseover needs to be a link.

btw - fmi - ziffgone's solution...

where do the <a href=""> and </a> tags go???

I've tried them in a couple of places (on Mozilla) and they don't take.
Hello again macuser777,

Joakim has the right idea, but he's FAR too violent, (smacking everyone's heads about!), so let's combine the two. Using CSS isn't so difficult, and there's no time like now to learn! (Simply go by the example and you shouldn't have any problems).

I am not familiar with Safari, but if it adheres to W3C standards, then I can't see the problem.

Try this out:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
.norm {cursor:hand;
           cursor:pointer;
           background: url(http://www.appleness.com/overyello3.gif);
           color:#000000;
           }
.hov {cursor:hand;
        cursor:pointer;
        background: url(http://www.appleness.com/bb3.gif);
        color:#000000;}
//-->
</style>
</head>
<body>
<br><br>
<table width="84%" align="center" border="1" cellpadding="5" cellspacing="0">
  <tr>
    <td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="top.location.href='http://www.apple.com';">
    <div style="text-align:center;">http://www.apple.com</div>
    </td>
    <td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="top.location.href='http://www.puremotives.com';">
    <div style="text-align:center;">http://www.puremotives.com</div>
    </td>
    <td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="top.location.href='http://www.maclance.com';">
    <div style="text-align:center;">http://www.maclance.com</div>
   </tr>
   <tr>
    </td>
    <td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="top.location.href='http://www.amazon.com';">
    <div style="text-align:center;">http://www.amazon.com</div>
    </td>
    <td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="top.location.href='http://www.blogpulse.com';">
    <div style="text-align:center;">http://www.blogpulse.com</div>
    </td>
    <td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="top.location.href='http://www.google.com';">
    <div style="text-align:center;">http://www.google.com</div>
    </td>
  </tr>
</table>
</body>
<html>

Simply apply the class="norm" and the "onmouseover/onmouseout" code to any TD you want to have that background change on. If you want to apply different backgrounds, simply add more CSS, copying the CSS I gave, just change the class names to ".norm1" and ".hov1", or anything you like, also change the URLs in the "background: url(~~)" to the images you want. Don't be afraid to use CSS, were here to help!

The onclick="top.location.href='~~';" replaces your <a href="~~"></a> links. If you would like each site to open in a new window, change the onclick to: onclick="window.open('url/to/go/to.com');" .

In case anyone is wondering why I included "cursor: hand" and "cursor:pointer" both in the CSS, Netscape/Mozilla doesn't support "cursor:hand", so when it sees it, it ignores the CSS instead taking "cursor:pointer", (which is the hand for that browser). When IE sees "cursor:hand" it utilizes it, but then ignores "cursor:pointer". Best of both worlds.

Tested in IE6, Netscape/Mozilla and Opera.

Hope that helps.

Regards...
Hey ziffgone,

It pains me to say it...but in none of my Mac browsers [Safari, Mozilla, Opera, IE for Mac] does this work.

All but safari click thru to the right destination. Safari goes nowhere.

None show either the background or foreground images. All also spave very differently.

HOWEVER...I have just recenly got off the phone to a more well oiled friend who is running Panther and your first solution works on his safari - I am still running Jaguar which is
stuck on v.1. safari. SOOOO i think that might be A way forward. It won't allow the whole image to be a link as I wanted - but workable if i can't face the pain of 100 or so photoshop images and trying to line up the text just so.

ALSO - i don't know if this is useful towards an overall solution...but i found this javascript...which i don't even begin to understand...

which allows the mouseover image to be a link. But still no static text......not in any way that i can figure

Maybe...?

apple *** ness  dot  net/test6.php

thanks


*Smacking ziffgone's head*

Ok, I see you want tables and divs. Here's the solution:



CSS-file:

.menu {

}
.menu a, .menu a:visited {
      background: url('images/bg.gif');
      display: block;
      width: 100%;
      height: 100%
}
.menu a:hover {
      background: url('images/bghover.gif')
}



HTML-file:

<table width="38%" border="1">
  <tr>
    <td class="menu"><div><a href="http://apple.com/">Apple.com</a></div></td>
  </tr>
  <tr>
    <td class="menu"><div><a href="http://apple.com/">Apple.com</a></div></td>
  </tr>
  <tr>
    <td class="menu"><div><a href="http://apple.com/">Apple.com</a></div></td>
  </tr>
</table>



The link is 100% wide and 100% high. It doesn't matter where in the cell you click. The link covers the whole cell.
And when you hover the cell, the background changes to the specified image.
hmmmmm...i'm starting to think I might be missing something basic here.

Joakim (and ziffgone's last) solution don't show any images.

Please check appleness   dot com/test7.php [Joakim] and test8.php [ziffgone] to see if i've missed something.

Or...here's the page I made to test Jaokim's solution:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd "> 
<html>
<head>
<style type="text/css">
<!--

.menu {

}
.menu a, .menu a:visited {
     background: url('http://www.thereadinglist.net/openm1.gif');
     display: block;
     width: 100%;
     height: 100%
}
.menu a:hover {
     background: url('http://www.thereadinglist.net/bb13.gif')
}
//-->
</style>
</head>
<body>
<br>
<table width="38%" border="1">
  <tr>
    <td class="menu"><div><a href=" http://apple.com/ ">Apple.com</a></div></td>
  </tr>
  <tr>
    <td class="menu"><div><a href=" http://apple.com/ ">Apple.com</a></div></td>
  </tr>
  <tr>
    <td class="menu"><div><a href=" http://apple.com/ ">Apple.com</a></div></td>
  </tr>
</table>

</body>
<html>

If I might suggest, we need to know exactly what support your target browser has for CSS and Javascript.  There've been CSS solutions and Javascript solutions suggested, all of which work on IE, as far as I can see, but if your target browser doesn't support them they aren't going to be much good to you.

Most every browser that I can think of supports at least basic javascript and basic CSS, but if you're having problems with what's been posted, then that suggests yours might not.  Any documentation on this available?

I also apologise for starting the head-smacking trend. ;)
Then, you have to use another browser, macuser777. My code is valid both CSS and HTML. You said that ziffgone's solution doesn't work with the three great ones (Mozilla, Opera and Internet Explorer). Does my solution work with those browsers? If it does, it proves that that Jaguar-Panther thing is not updated with the W3C HTML and CSS standards, and that you maybe should think of using another browser (I recommend Mozilla :P).
ASKER CERTIFIED SOLUTION
Avatar of ziffgone
ziffgone
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
!!!

Hi everyone - sorry I haven't checked in for a while - for some reason I stopped getting notification of replies and I just came over to see how I could close the Q.

I thought you'd all got fed up with me! ..or maybe couldn't take the violence :)

I've just had a look at ziffgone's comparison page....wierd eh?

I have had similar problems with another q recently that involved centering a table vertically.
Pretty much the same scenario..a bunch of increasingly elegant solutions working on all kinds of browsers but not for me.
I'd concluded it must be because I was still on the Jaguar version of Safari...but it seems not to be the case.

I'll have to catch up and chew it over a bit...
test8 and test7 display correctly on your server..still do nothing on mine...
I'm a bit lost...

>>>I also want you to try something though, I'd like you to change:
"background: url(blah blah);"

To this:
"background-image: url(blah blah);"

>>>>And see if that helps. Also try the URL between the" url("  and  ");"   in quotes and out of quotes, like so:
background-image: url(/path/to/pic.gif);  AND   background-image: url('/path/to/pic.gif');

Which tests ...or both?

>>>Also, do you have any other PHP scripting happening on test7.php and test8.php that may be conflicting with the page, or do they only contain the example HTML/Javascript that we gave you?

Nothing else going on...it's a lazy habit I have to type .php rather than .html (lol at myself ... 1 keystroke!)
Hi macuser777, welcome back!

"Which tests ...or both?" - Try first the one without quotes, and if that doesn't do anything, then try the other way with quotes.

Quite frankly, I think it is a server problem, not cross browser compatibility, it's VERY strange. You may have to consider moving your hosting. I don't know.

Otherwise, quite frankly I'm stumped, my friend. :(

Regards...
hmmmmmmmmmmm.........welcome to the twilight zone....

Thought i'd start by cutting and pasting your code into a new file

/test9.html
/test9.php

then i tried copying mu test8.php into losingit.html - nada

there must be some difference in the code - can't see it though....
Truly, truly, invigoratingly,

BIZARRE !!

I can't see the diff in codes either, and yet there must be. I don't know.

Regards...
the design view in DWeaver does look different mind you.

In the working page the cells are grayed out..in the non working they are white...

/dwpic.html
Very odd.

Just curious, what hosting company are you with? What OS do they use, Windows or Unix? Might want to post a link to this question in one of those forums to see if someone can shed some light on why your server is treating the pages so oddly.

Regards...
e3servers.com

Apache version
1.3.31 (Unix)

...they spent a few hours yesterday fixing some issue in a configuration file [whatever that means] that was affecting another site.
It didn't make any difference here.

The only thing that I can think is that there is some kind of invisible corruption in the pages that don't work???? - maybe due to the dreamweaver -  totally uninformed idea of course.

I should have remembered this earlier - but I had some wierd sttuff like this before - but we skipped over the wierdness and headed to the solution
It's a long thread, but you'll see I had a similar thing where the exact same code worked on other servers but not for me at first. Then strangely, by copying and pasting from the other sites it worked for me.

https://www.experts-exchange.com/questions/20777559/enable-google-get-form-within-post-action.html

Makes me think my  dreamweaver is playing up somethimes - entering spooky invisible code - :) - we eneded using a file called /bannans on that q- only thing that I can think of anyway.

Ho hum...

macuser

[At some point I ought to award the points here - as it seems I actually may have several working solutions-
a little guidance appreciated on that when you have time.]
server information:

Operating system
Linux
Hi ziffgone,

I accepted that answer as it had 2 working examples and some other interseting stuff :)

macuser