Home :: Forums :: Downloads :: Shop
  1. Home
  2. Forums
  3. Javascript Help
  4. Some help on multiple image rollovers

Some help on multiple image rollovers

  Post new topicReply to topicPrintable Version
<< View previous topic View next topic >>
Share: Del.icio.us  Digg  Google  Spurl  Blink  Furl  Y! MyWeb  
#1.    Some help on multiple image rollovers
wolf
CZ Active Member
wolf has been a member for over 20 year's 20 Year Member
usa.gif indiana.gif
Occupation: Student; Flash, HTML, PHP developer
Age: 33
Gender: Male
 Status: Offline
Joined: Jul 25, 2003
0.02 posts per day
Posts: 168
Points: 10,417
AIM Address Yahoo Messenger MSN Messenger 
Hello again all. I'm trying to create only two functions in javascript (act() and inact()) for 4 different images, possibly more. Here's my code:




if (document.images) {
  var homeoff = new Image();
  homeoff.src = "/testingsite54/theme/home.gif";
  var homeon = new Image();
  homeon.src = "/testingsite54/theme/home2.gif";
  var aboutoff = new Image();
  aboutoff.src = "/testingsite54/theme/about.gif";
  var abouton = new Image();
  abouton.src = "/testingsite54/theme/about2.gif";
  var hapon = new Image();
  hapon.src = "/testingsite54/theme/happenings.gif";
  var hapoff = new Image();
  hapoff.src = "/testingsite54/theme/happenings2.gif";
  var linkon = new Image();
  linkon = "/testingsite54/theme/link.gif";
  var linkoff = new Image();
  linkoff = "/testingsite54/theme/link2.gif";
}
function act([ImageName]) {
  if (document.images)
  document.images.[ImageName].src = eval([ImageName] + "on.src");

}
function inact([ImageName]) {
  if (document.images)
  document.images.[ImageName].src = eval([ImageName] + "off.src");
}




In the linkage code I have these:
onMouseOver="act('home')" onMouseOut="inact('home')"


I'm trying not to create 8 functions here...one for each "active" and "inactive" image. The code above doesn't work, and I don't understand why. I'm new to this, so maybe I've got it all wrong. My site is [ Register or login to view links on this board. ] and if anyone can help, it would be greatly appreciated. Thanks!

P.S. for the sake of building, I've commented out all javascript and taken the mouseover code out of my links, the above it what I've tried using and have failed.



_________________
[ Register or login to view links on this board.]
Back to top Reply with quote
#2.    re: Some help on multiple image rollovers
Kelly_Hero
PayPal Donation
CZ Revered Member
 Codezwiz Site Donator
Kelly_Hero has been a member for over 20 year's 20 Year Member
usa.gif southcarolina.gif
Occupation: Web Developer
Age: 59
Gender: Female
Website:
Status: Offline
Joined: Aug 20, 2003
0.50 posts per day
Posts: 3765
Points: 351,412
   
This looks similar to one I've used before. I'm not a Javascript guru and I didn't write this, but it may help you compare to yours.
<SC RIPT LANGUAGE="JavaSc ript">  <!-- Hide from old browsers

var iName=""; var nav=navigator.appName.indexOf("Netscape"); var vers=parseInt(navigator.appVersion);
  if ( (nav != -1 && vers >= 3) || (vers == 4) ) {
default1 = new Image(); default1.src = "images/home.gif"
changed1 = new Image(); changed1.src = "images/homeb.gif"
default2 = new Image(); default2.src = "images/ethics.gif"
changed2 = new Image(); changed2.src = "images/ethicsb.gif"
default3 = new Image(); default3.src = "images/members.gif"
changed3 = new Image(); changed3.src = "images/membersb.gif"
default4 = new Image(); default4.src = "images/join.gif"
changed4 = new Image(); changed4.src = "images/joinb.gif"
default5 = new Image(); default5.src = "images/contact.gif"
changed5 = new Image(); changed5.src = "images/contactb.gif"
default6 = new Image(); default6.src = "images/calendar.gif"
changed6 = new Image(); changed6.src = "images/calendarb.gif"
default7 = new Image(); default7.src = "images/training.gif"
changed7 = new Image(); changed7.src = "images/trainingb.gif"
default8 = new Image(); default8.src = "images/directors.gif"
changed8 = new Image(); changed8.src = "images/directorsb.gif"
  }
  function Ichange(p) {
    if ( (nav != -1 && vers >= 3) || (vers == 4) ) {
    var pSrc=eval(p+ ".src");
    document[iName].src = pSrc;
    }
  }
// end hiding --></S CRIPT>


The actual link code:
<a href="index.html" onmouseover="iname='image1'; ichange('changed1')" onmouseout="ichange('default1')">
<img src="images/home.gif" name="image1" border=0 ></a>



Back to top Reply with quote
Display posts from previous:      
Add To: Del.icio.us  Digg  Google  Spurl  Blink  Furl  Y! MyWeb  
<< View previous topic View next topic >>
Post new topicReply to topic

Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum

∧