Hi
Here's a little snippet of JS that I have set up for use in my forum for rollover image effects. It will only work with relatively new browsers that support the DOM but old browsers will not see any adverse effects. I think it makes it nice and easy.
Add this code in your index.template.php just before the "</head>" (Note, you will need to add a "\" before all the apostrophes ' if you are just going to pop it in there.)
or save everything except the <script> tags in a separate file
eg. rollover.js
and add <script type="text/javascript" src="rollover.js"></script>
just before the </head>.
<script type="text/javascript">
function set_it_up() {
if (!document.getElementById) return //old browser? just src="" will do.
var original_image;
var store_rollovers = new Array(); //get the rollover images
var get_images = document.getElementsByTagName('img'); //get original images
for (var i = 0; i < get_images.length; i++)
{
//only get the rollover if there is one set
if (get_images[i].getAttribute('rollover'))
{
store_rollovers[i] = new Image();
store_rollovers[i].src = get_images[i].getAttribute('rollover');
//onmouseover
get_images[i].onmouseover = function() {
original_image = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('rollover'))
}
//onmouseout
get_images[i].onmouseout = function() {
this.setAttribute('src', original_image)
}
}
}
}
onload=set_it_up;
</script>
Now that's the hard part... But where are my rollover images to go you ask?
In any image you want to have this effect set it up normally eg
<img src="embarrassing_photo_from_my_youth.jpg" alt="Rakuli after his sisters dressed him up" height="67" width="50" />
but add a new attribute "rollover" to this img
<img src="embarrassing_photo_from_my_youth.jpg" rollover="another_angle.jpg" height="67" width="50" />
or in your menu_template
echo '
<a href="http://www.rakuli.com">', ($settings['use_image_buttons'] ? '<img src="' . $settings
['images_url'] . '/' . $context['user']['language'] . '/home.gif" rollover="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home_over.gif" alt="Home" border="0" />' : $txt[182]), '</a>', $context['menu_separator'];
Easy as thatBe warned... If you use this, your page will no longer check out as valid xhtml because you are adding a new attribute :(
Quote from: Kirby on May 18, 2005, 04:36:29 PM
can't you just use onmouseover and onmouseout?
Yeah you can. But that doesn't preload the images and this can be applied to any image as easy as adding the src= attribute.
Someone tell me if this is wrong but, to make to page pass a XHTML check I have changed "rollover" to "longdesc". This is so instead of inventing an attribute I am utilising an existing one that to me, is redundant. Longdesc is an img tag attribute that points to a URL with a longer description of the image. I have never used this attribute and I believe it is being developed to help with accessibility at a later time.
I figure that it is sort of like an empty alt="" attribute which is also for accessibility but needed for XHTML.
That's just misusing the longdesc attribute :P.
Why not just use a convention, like home.gif and home_over.gif? That's pretty easy to do.
And there's already javascript for the footer that does it, although it doesn't do any preloading (which has its detriments.)
-[Unknown]
Quote from: [Unknown] on May 18, 2005, 05:36:45 PM
That's just misusing the longdesc attribute :P.
Why not just use a convention, like home.gif and home_over.gif? That's pretty easy to do.
And there's already javascript for the footer that does it, although it doesn't do any preloading (which has its detriments.)
-[Unknown]
Yeah I've used all these but i I just like the idea of being able to type source 1 then straight up source 2.
The main thing I don't like about it is having to find a cheats way round the XHTML. I just thought I might share it because rollovers (at least for me) when I first started ecmascript were a bit daunting. :o
I know it's not much I just like to give back where I can...