Posted by Cerebral Believer on 08/20/06 16:25

Hi all,

I am having trouble with rollover/mouseover buttons, can anyone help?

From my distance learning course I have been shown the way to do this is to
declare an array of the images you use, and then refer to them using
mouseover, mouseout and onclick event handlers. So in my HTML I have
declared the following just after my opening body tag:

<script type="text/JavaScript">
<!--

var roImages = new Array();

document.images[0].src = "Click To Listen.jpg";
document.images[1].src = "Click To Listen_mo.jpg";

// -->
</script>

But I have tried several ways to reference the images in my document, and
none seem to produce a rollover effect. Part of the problem may be that I
am using a WYSIWYG GUI editor, that allows you to input code, but also for
some reason subtly changes it (normally removing "" and changing the order
of properties).

Basically array image 0 is the standard image which a user sees when they
first see the page, and array image 1 is what the image should change to
when the user moves their mouse over the original image. My latest hash of
the code is:

<img onmouseover=document.images[1]src title="Click to listen!" alt="Click
to listen!" src="Click To Listen.jpg" border=0 name="Click to listen!" ;>

So what am I doing wrong here?

-------

I found another code example that a user on another forum suggested, saying
that it should be compatible for all browsers - but as I am just a beginner
in JavaScript (just started learning last month), I am not 100% sure on what
to do with this.

<script language="JavaScript">

imag = new Array()
imag[0] = "images/Click To Listen.jpg"
imag[1] = "images/Click To Listen_mo.jpg"

function swtch(num,imgname){imgname.src = im[num].src}
im = new Array()
for (var i = 0; i < imag.length; i++){
im[i] = new Image()
im[i].src = imag[i]}

</script>

How it is used in the HTML page:

<a href="..." onMouseOver='swtch(0,IMAGENAME)'
onMouseOut='swtch(1,IMAGENAME)'><br><img src="images/Click To Listen_mo.jpg"
name="IMAGENAME" border="0" alt=""></a>

-------

Which code do you think is best, and how exactly would I form the code for
it to work correctly in my page?

Regards,
C.B.

[Back to original message]