Page 1 of 1

Rollover image not working!

Posted: Mon Jul 12, 2010 11:57 am
by rowena
Hi,

i have gone through practically every thread in this forum regardign rollovers and have implemented various differnet code snippets and double checked everything and my rollover still doesnt seem to work.

this is my code in my template (that has been placed inside {literal} tags):


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



The code in the body of my page for my 3 images that are in a table are as follows:

















Can someone please tell me where im going wrong?!?!?

the page can be viewed at: http://safe-4.co.uk/index.php?page=who-we-do-it-for

Re: Rollover image not working!

Posted: Mon Jul 12, 2010 12:12 pm
by Ziggywigged
Probably not the solution you want to hear, but why not use css?

Also, you have spaces in your files names which could be causing problems.

Re: Rollover image not working!

Posted: Mon Jul 12, 2010 12:20 pm
by rowena
cos i wouldn't knwo how to do it using CSS :-)

removed the spacing in my filenames and it still doesn't work  :(

if you look on my page itself, at the bottom left hand corner it says 'Error on page' also.

how come it worked for others that used the javascript? :(

Re: Rollover image not working!

Posted: Mon Jul 12, 2010 12:34 pm
by Ziggywigged
This looks like Dreamweaver JS.
Do you need the preload img script on the body tag?

Re: Rollover image not working!

Posted: Mon Jul 12, 2010 6:29 pm
by Dr.CSS
I never use JS for rollovers, give your a links an ID or class...

In css give them width/height to fit image size, call image,

a.yourclass {width:XXpx; height:XXpx; background: url(path/to/image) no-repeat left top}

a.yourclass:hover {background: url(path/to/hoverimage) no-repeat left top}

It's even better to stitch the 2 images together, one on top of the other so it loads both as one and no flicker on hover, then do...

background-image url(path/to/image);
background-repeat: no-repeat;
background-position: 0px 0px;

then in hover you can just call the position...

background-position: 0px -XXpx;  the -XXpx is the height of the top image, say one image is 125px with next one under it 125px your hover call is -125px to move it up so bottom image shows...

You actually have a very good example of how to do rollovers with css on that page, look at the menu css to see how it's done...

Re: Rollover image not working!

Posted: Tue Jul 13, 2010 8:36 am
by rowena
many thanks for all your help!

i will try out the CSS now.