JS / PHP rollovers not quite working

[kingnutter]

Hi there,

 

I'm building rollover navigation by year using js and php. Everything is working fine except for the year 2001.

 

I can link to the js file if you need to see it, but essentially it uses the file xxx_black.png as normal and finds xxx_red.png to use for the rolled over image.

 

All images exist in the correct directory and have been created in the required colour.

 

Any ideas?

 

<?php

$year = 2009;

while ($year >= 2001)
{
?>

<td>
<script>
prepareImageSwap(document.body);
</script>
<a href="search_results.php?&yearsearch=<?php echo $year; ?>">
<img src="/images/<?php echo $year; ?>_black.png" alt="<?php echo $year; ?>"></a></td>
<td><img src="/images/banner_colon.png" alt=":"></td>

<?php $year--;

}
?>

</tr>
</table>

[KevinM1]

Why not use CSS rollovers instead?

[kingnutter]

I Googled CSS rollovers and couldn't find any solutions that didn't involve JS in one way or another.

 

Any pointers to the best angle would be very welcome.

[KevinM1]

I Googled CSS rollovers and couldn't find any solutions that didn't involve JS in one way or another.

 

Any pointers to the best angle would be very welcome.

 

You won't need JavaScript if the rollovers are for hyperlinks only.  For generic images that aren't links and other things, IE has had some issues getting :hover to work on anything other than anchors.  I believe they only addressed that problem in IE7, so if you're not only using rollovers for links, and you do care about legacy browsers, then yeah, you'll need JS.

 

Anyhoo, CSS rollovers are incredibly easy to create.  The basic premise is to have both your 'on' and 'off' images in the same image file, either one on top of the other, or one next to the other.  You set this image as the background of the element, positioning it so only the 'off' half is seen by default.  During :hover, you then shift this background image so the 'on' part is visible.  Some links:

 

http://www.alistapart.com/articles/sprites

http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html

http://www.elated.com/articles/css-rollover-buttons/

[kingnutter]

Very interesting. I shall look into it further for further rollovers. Thanks for that.

 

I'm still curious thought as to why the above code does not work for the final value of $year.

 

Any thoughts?

[KevinM1]

Very interesting. I shall look into it further for further rollovers. Thanks for that.

 

I'm still curious thought as to why the above code does not work for the final value of $year.

 

Any thoughts?

 

Is it stopping at 2002?  Or something else?

[kingnutter]

The last one that works is 2002.

 

2001 functions as a link, but the rollover is inactive.

 

If I reset

 

while ($year >= 2001)

 

to

 

while ($year >= 2003)

 

...2004 is the last one to work properly.

 

Weird, no?

 

 

[KevinM1]

Huh, that IS strange.  Can I see the code for your function?

[haku]

This is really so much better to be done in CSS. If you want to know why its not working in JS for academic reasons, post the HTML output (I.E. no PHP) and the javascript function. But if you are just trying to get the job done properly, stop wasting time and switch to CSS rollovers. Your JS rollovers won't work for many people, where CSS will work for pretty much everyone, and be less resource intensive.

[kingnutter]

Fair comment.

[kingnutter]

OK. I've had a good read up about this.

 

The only problem, if you look at my original code, is that I am generating the (year) image links using iteration of a decreasing string.

 

How can I achieve this if CSS requires a definite image URL, or is there a way to incorporate PHP into it?

 

 

[kingnutter]

No worries. I've fixed it by changing the while loop to >=2000 and creating a blank image for that year.

 

The JS code just isn't liking the last iteration for some reason.