Changing image not working in Firefox

[PoetAlley]

I have a javascript which changes an image on a page in IE when a smaller image on another part of the page is mousedOver, it also changes some inline text next to the smaller images, but neither of them work when displayed in FireFox. I would very much appreciate help on this.

This is the code in the header section.

Code: Select all

<script type="text/javascript">
<!--
currentPic = "Album1";

function hot(name){
    eval(currentPic + ".style.display='none'");
    eval(name + ".style.display='inline'");
    mainPic.src= "http://www.accidentrecordings.com/members/images/" + name + ".JPG";
    currentPic = name;
}
// -->
</script>

This is the code for the default page image

Code: Select all

<img src="http://www.accidentrecordings.com/members/images/Album1.JPG" alt="Fated to Happen album" id="mainPic" />

And this is the code for the smaller images below with the inline text.

Code: Select all

<a href='album1.html'><img src="http://www.accidentrecordings.com/members/images/album1_button.JPG" alt="Accident, Fated to Happen" onmouseover="hot('Album1');" /></a>
<a href='album2.html'><img src="http://www.accidentrecordings.com/members/images/album2_button.JPG" alt="Accident, Black Spot" onmouseover="hot('Album2');" /></a>
<a href='album3.html'><img src="http://www.accidentrecordings.com/members/images/album3_button.JPG" alt="Accident, In The Home" onmouseover="hot('Album3');" /></a>
<a href='album4.html'><img src="http://www.accidentrecordings.com/members/images/album4_button.JPG" alt="Accident, In The Making" onmouseover="hot('Album4');" /></a>
<a href="album5.html"><img src="http://www.accidentrecordings.com/members/images/album5_button.JPG" alt="Accident, Zone Ahead" onmouseover="hot('Album5');" /></a>

<div id="Album1" style="display:inline;">16 Track CD playing for 77 minutes 43 seconds.  <strong>Fated to Happen</strong> is a reflection of the different types of music that we enjoy listening to and playing, and covers many genre, and is the shortest of our albums so far.</div>
<div id="Album2" style="display:none;">15 Track CD playing for 78 minutes 36 seconds.  <strong>Black Spot</strong> is the first of an experiment in entertainment when we decided to blend the telling of stories and one of my solo performance piece poems in with songs in various styles.</div>
<div id="Album3" style="display:none;">17 Track CD playing for 79 minutes 48 seconds.  <strong>In The Home</strong> saw a great leap forward in our recordings, we used a drum track to accompany our other instruments, a feature which was expanded on in future recordings.</div>
<div id="Album4" style="display:none;">15 Track CD playing for 79 minutes 56 seconds.  <strong>In The Making</strong> saw us experimenting with the marrying of different drum styles together, including rock drums and bongos, and it is also our longest CD to date.</div>
<div id="Album5" style="display:none;">16 track CD that plays for 79 minutes 57 seconds  <strong>Zone Ahead</strong> also includes a guest appearance on 3 tracks by guitarist Yaz B, and we hope that you enjoy listening to them as much as you do the rest of the album.</div><br />

[ScottR]

There are much easier ways of doing this, but...

At first glance I would remove the quotes from style.display = .

Quotes are for strings and that is not a string.

But what is applied to the display is a string, so I would try this.

Code: Select all

  eval(currentPic + .style.display="none");

Scott

[PoetAlley]

Thanks Scott, but I tried that on both lines, but not only did it not work in FireFox, it also stopped working in IE7.

[Rakuli]

Hi Poet,

I probably wouldn't use eval() for this, you would be able to acheive it much easier with the DOM.

if you changed your function to be

Code: Select all

<script type="text/javascript">
<!--
var currentPic = "Album1";

function hot(name){
 
    document.getElementById(currentPic).style.display = 'none';
    document.getElementById(name).style.display = 'inline';
    document.getElementById('mainPic').src = name + '.JPG';

    currentPic = name;

  }
// -->
</script>

That should work in all DOM compatible browsers.

Cheers,

[PoetAlley]

Thanks Rakuli, that works perfectly in both browsers, all I have to do now is copy it onto each of the pages in my site. I would like you to send me your contact info, then I can send you 5 links to download the 5 albums that we have recorded. We also give you permission to give them to anyone you want.

[Rakuli]

No problems, glad I could help.

You can send the links via PM if you like, I would be interested to see them.

Cheers,