News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Easy image rollover effects in SMF

Started by rakuli, May 18, 2005, 04:34:16 PM

Previous topic - Next topic

rakuli

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 0get_images.lengthi++) 
{
 
              //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 that

Be warned... If you use this, your page will no longer check out as valid xhtml because you are adding a new attribute :(

Kirby

can't you just use onmouseover and onmouseout?

rakuli

#2
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.

[Unknown]

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]

rakuli

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...


Advertisement: